WordPress.org

Make WordPress Core

#37432 closed defect (bug) (duplicate)

Emoji not encoded properly in alt text for images

Reported by: morganestes Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.2
Component: Emoji Keywords: has-screenshots needs-patch
Focuses: accessibility, javascript Cc:

Description

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.

Change History (4)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


13 months ago

#2 @afercia
13 months ago

  • Focuses javascript added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from trunk to 4.2

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:

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:

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:

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

#3 @ocean90
13 months ago

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

Last edited 13 months ago by ocean90 (previous) (diff)

#4 @afercia
13 months ago

  • Milestone Future Release deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #37433.

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

Note: See TracTickets for help on using tickets.