Make emojis accessible
|Reported by:||afercia||Owned by:|
Splitting this out from #37432.
Currently, the WordPress Emojis are not accessible. The alt text contains the emoji character (vs a HTML encoded entity, or the emoji description) and that's a deliberate implementation choice, see 37433#comment:3 intended to allow copy and pasting the emojis.
We've discussed a bit this issue in the accessibility weekly meeting and agreed there's room for improvements. At least, starting a discussion about emojis accessibility would be very welcome.
Quickly checking how screen readers announce the WordPress emojis, there's no accessible name or description they can use:
Note: VoiceOver reads out "group" because the image is a svg file.
Just adding an aria-label attribute (I've quickly edited in the browser console) gives screen readers an accessible name to announce:
Comparing with what others do, for example Twitter because they usually have great solutions for accessibility, they use png images and both an aria-label and a title attribute, so VoiceOVer in this example reads out both. I guess the title attribute is used just to show the browser's "tooltip" with the emoji name:
<img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f60e.png" draggable="false" alt="" title="Smiling face with sunglasses" aria-label="Emoji: Smiling face with sunglasses">
The aria-label solution is mentioned also on a related issue on the twemoji GitHub: https://github.com/twitter/twemoji/issues/41