Improved alt text about twemoji HOT 4 CLOSED

This oddly seems to be the right thing to do; if you copy/paste a string with Emoji in it, then the alt text gets used instead of the IMG, so you'd want to use the emoji itself in the ALT text to ensure text round-trips nicely.

But this alone doesn't work too well for accessibility; some screenreaders will read out descriptive text for some symbols, but usually only a handful that they (or the speech engine they use) know about.

For accessibility, turns out that the best thing to do is to use aria-label as descriptive text, which is what Twitter actually do on their own site - view-source on an Tweet such as this one, and you'll get:

<img class="twitter-emoji" src="https://abs.twimg.com/emoji/v1/72x72/1f389.png" draggable="false" alt="🎉" title="Party popper" aria-label="Emoji: Party popper">

So what we'd need is some way to add aria-label to the generated IMGs - and ideally do so in a localization-friendly way. Having a callback option to parse() that can supply aria-label - similar to how the current exclusion callback works - could work here, plus perhaps a set of icon->label maps in different .js files.

from twemoji.

like @BrendanMcK said, it's a copy and paste feature that preserves full intent (no trim, no special treatment, just the initial surrogates pair)

twitter places title and aria-label in the server, which is very nice but at the same time the mapping is huge and I am not sure it's a good idea to add that much extra bandwidth and time to first emoji through a client side solution.

However, everyone could implement such functionality with what this API provides already, a callback, or just an extra "aria" enhancement after replacing emoji, improving all img.emoji gracefully.

We might provide such mapping as file a part, but that'd be eventually a feature request, not a bug or a change for the alt attribute.

Best Regards

from twemoji.

Aside: what happens if I copy a string with Emoji in it and paste it inside my content using a browser that doesn't support emoji?

from twemoji.

@afercia you do not loose data, which is the purpose of the copy and paste. Nobody can predict where you are going to paste it, but if the reader on the other side supports emoji natively, it'll see it.

from twemoji.