[wp-trac] [WordPress Trac] #37486: Make emojis accessible

[WordPress Trac]

#37486: Make emojis accessible
-----------------------------+--------------------------------------------
 Reporter:  afercia          |       Owner:
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Emoji            |     Version:  4.2
 Severity:  normal           |  Resolution:
 Keywords:  has-screenshots  |     Focuses:  ui, accessibility, javascript
-----------------------------+--------------------------------------------

Comment (by afercia):

 Screen readers usually read out what browsers expose to them through their
 accessibility APIs. Sometimes, in limited circumstances, they try to read
 directly the DOM to work around known browsers inabilities to correctly
 expose accessible properties. So it's mostly a matter of platform/browsers
 support for unicode/svg and how browser expose these informations to
 assistive technologies. However, WordPress is not using inline SVGs. These
 are just standard `<img>` elements with no textual alternative whatsoever.

 As per the `group` thing, seems specific to Safari+VoiceOver and I think
 just adding a `role="img"` attribute could help the emojis to be correctly
 identified as images. Quick test available on this codepen:
 http://s.codepen.io/afercia/debug/wWXQao

 [[Image(https://cldup.com/GxRjqq-COb.png)]]

 Native support:
 interestingly, VoiceOver announces the WP Emojis skin tone modifier as
 "Emoji modifier fitzpatrick type" and displays it in the Caption Panel:

 [[Image(https://cldup.com/e3qHBKD7Kz.png)]]

 hearing just "Emoji modifier fitzpatrick type" is a bit annoying and not
 useful at all, one more reason to provide a textual alternative in my
 opinion. This made me curious though so I've tested a bit more. Seems
 Safari+VoiceOver on OS X El Capitan  can correctly announce the native
 emoji characters. I guess no surprise, since this platform has a very good
 support for Unicode. By the way, it seems they're often announced with a
 slightly different name, for example "Station" is announced as "Subway
 station" and this happens in many, many, other cases:

 [[Image(https://cldup.com/7ELA_klRB3.png)]]

 Unfortunately, on other platforms support greatly varies across browsers
 even for common Unicode characters, see the test for the "right-pointing
 double angle quotation mark" on the codepen. In the worst case, emojis are
 announced as "symbol" and then an alphanumeric string (often different
 from the character code).

 Descriptions size/Translations:
 yep, I can understand the technical challenge. I really have no idea about
 the current implementation details :) About translations, maybe there are
 already some translations available? See below:

 [[Image(https://cldup.com/1keQkjA04u.jpg)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37486#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform