Emoji not encoded properly in alt text for images

[morganestes]

When viewing the page source of ​https://wordpress.org/news/2016/07/wordpress-4-6-beta-4/ (specifically, the emoji item), the alt text of the rendered emoji displays as an empty box, not at all, or the Unicode entity number (depending on the browser) instead of the expected image. Skin tone modifiers display fine, though.

I don't know if that's a flaw in the browser, lack of OS support, or in the html_entity_decode( $emoji ) function.

This happens for me on OS X 10.11.6 running Chrome 51.0.2704.84 and Safari 9.1.2, and Firefox 47.0.1.

I don't know if that's a flaw in the browser, lack of OS support, or in the html_entity_decode( $emoji ) function.

I share the same feeling :) As per the accessibility concerns, we've discussed a bit this ticket in today's accessibility weekly meeting and maybe there's room for improvements. Quickly checking how screen readers announce the WordPress emojis, there's no accessible name or description they can announce:

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 whit 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">

Hmm, this is actually a duplicate of #37433 which was closed as invalid. Maybe a new ticket for adding aria-labels would be better?

Duplicate of #37433.

Hm, database-is-locked-double-submission-issues? :) Will split the aria-label in a new ticket.