Skip to main content.

Emoji placement & screen readers for reading

first published: August 9, 2024 and collected in: accessibility weekly

The a11y weekly series was originally written for the design team at Cybozu. This version has been updated and expanded.

Placing Emoji's correctly

I often see Emoji placed as a prefix, for example in lists:

Depending on your screen reader and browser combination, this maybe be read out with its full CLDR (Common Locale Data Repository) name, also known as "Unicode Name" or any of the other names Emojipedia lists.

Therefore on macs for example this would be read as:

As you can see, this not only suboptimal, it can be outright annoying. Since Emoji are ever growing and being expanded, it is also possible that a given Emoji may not be understood by a screen reader.

Least we forget that an Emoji may have different meanings in different contexts, cultures and even generations. Therefore, while they are made to be universally understood (like icons), they can be misunderstood.

Here are some every day tips to make live easier for everyone:

Screen readers for reading and better understanding

I have recently started to use screen readers to read and simultaneously listen to sites with longer or complicated contents. This really showed me again, why attributes can be a problem with auto translations. This will warrant its own post in the future.

While this can be a while quality of life improvement for people with dyslexia and AD(H)D (like myself), it also helps user who are not fluent in a given language yet.

Anyway, for now just know that listening and reading complicated content can really make it easier to understand and comprehend.

Resources