Accessible emoji – Tink – Léonie Watson

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

Code language

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 problem

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 [...]

Read article at

Article Taxonomies

Categories: Terms: , , , , , , Keywords: