22nd of December 2016
- Code things
Emoji help us communicate complex ideas very easily. When used in native apps and applications, emoji are reasonably accessible to screen readers, but on the web we need to do a little more to make sure everyone can understand emoji.
An emoji is an ideogram (a picture that represents an idea or concept). Unlike an image that is displayed from a (.png, .gif or .jpg) file, an emoji is displayed using a Unicode character. On the web this is often done using the hexadecimal or decimal representation of the Unicode character. For example:
Copy to clipboard
This presents a snowman emoji (☃) in the browser. Unless you’re looking at it with a screen reader, in which case there is a chance you’ll be completely unaware it’s there at all.
The first problem is that browsers do not always expose the emoji as an image in the accessibility tree. The <span> element is semantically neutral * its role may not be communicated by the browser and/or used by screen readers.
The second problem is that the content [...]