[wp-trac] [WordPress Trac] #37432: Emoji not encoded properly in alt text for images

[WordPress Trac]

#37432: Emoji not encoded properly in alt text for images
-------------------------------------+-------------------------------------
 Reporter:  morganestes              |       Owner:
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Future Release
Component:  Emoji                    |     Version:  4.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots needs-   |     Focuses:  accessibility,
  patch                              |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-screenshots => has-screenshots needs-patch
 * focuses:  accessibility => accessibility, javascript
 * version:  trunk => 4.2
 * milestone:  Awaiting Review => Future Release


Comment:

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

 [[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 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:

 [[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">
 }}}

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