[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                         |   Keywords:  has-screenshots
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 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
 [ticket: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:

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

 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:

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

 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:

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


 {{{
 <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

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