Day 14 - Emoji usage

You likely encounter emojis in almost all digital communication you get. From text messages, social media, and even on websites. Emojis are an advancement over emoticons :) since they have built-in alt text. But with that advantage comes some disadvantages.

These general principles apply to websites, social media, or messages. It’s a good practice to use the same guidelines when creating content for any platform.

Emojis should not replace interface elements or replace words. The text “Like” or “Share” are clear labels for the actions available to the user. Replacing them with a 👍 thumbs up or 🔗 link emoji may not convey the same information to a sighted visitor and someone hearing “Thumb up" or "Link symbol" would find it hard to decipher the intent of those two links.

General principles

Emoji’s should be used sparingly
Use common emojis to help with interpretation
If an emoji could be used on a light or dark background ensure there is enough contrast
Use emojis at the end of sentences instead of in the middle
Using a skin tone variation of an emoji adds the skin tone color to the alt text that is read by a screen reader
An emoji may look different on various devices, be aware they may not translate the way you see them on your device

Example

Video of a screen reader reading emoji characters on a web page

The example video above demonstrates how emojis are read in the context of the words on the page. They visually act like icons but are read aloud with the screen reader and may be distracting to the listener.

Task

Search your website for any emoji usage
Determine if the emoji is adding value to the content of the page or if it is for visual presentation only
Add the “aria-hidden” attribute to the items that are for presentation only
Alternatively, if you do what a specific label to read for the emoji you could change the role to be an image and supply an "aria-label"

Some text on the page 😁

Replace the emoji with image properties