Using Emojis is so fun! But how to make them accessible? 

Yes, we are talking about “Smiling, Laughing, Kissing, Heart Eyes, Thinking, Angry” emojis. The ones that have become a part of our daily messages/emails. No matter if the messages are sent to friends, family, colleagues, or business stakeholders. Emojis help to add feelings to the messages. It’s also a great way to keep the tone of your message light.

Something like: “Happiest Birthday! Let’s plan a party at 21.00 today!”

Such an eye-pleasing birthday wish [Awww]. But is it the same for screen reader users? Let’s find out!

Screen reader users announce the birthday wish text as “Happiest Birthday! Cake Cake Cake Let’s plan a party at 21.00 today! Grinning face with big eyes”.

Oops! The message is not the same as I want to convey and also not enjoyable to hear all those unwanted expressions multiple times.

As we know screen reader announces the alt text of the image, we should try and use the most meaningful emojis (as per the context) along with the fact that it should be best to use them at the end of the statement or at the part that does not break the meaning of the message.

How are emojis generally used?

Everyone uses emojis differently such as someone would replace the text with emoji, someone will add many emojis along with the text, or someone will add an emoji that represents their emotions. Let’s have a deeper look at the emojis used.

Using emojis to convey messages

Sometimes emojis are too easy to use to convey a message. Like the feature to react to a particular text using emojis such as “thumbs up”, “thumbs down”, “Shocked”, and many more.

In the above bad example, the message that was to be conveyed was ‘Hey, I called you. Call me back once available’ but unfortunately, this is not coming out of the emojis. Instead, it announces “Hey, I ‘Telephone receiver’ you. ‘Telephone receiver’ me ‘Back arrow’ once available.”

Using emojis without text

Do you think using just emojis without any text is accessible to all users?

Nope, it’s not. Avoiding text and using only emojis impacts users with cognitive impairments users when the emojis are not the commonly used ones they in fact are confusing for all users.

Punctuation, Letters, Numbers! Oh yes, Emoticons!

:),  :-),  :-(,  :(,  :|,  these are a few examples of punctuation emoticons used across. These are announced as “colon right parenthesis”, “colon dash right parenthesis”, “colon dash left parenthesis”, “colon left parenthesis” and “colon vertical bar”. It will be annoying to listen to such announcements and the exact information will not be conveyed to users.

In the above bad example, the expression ‘speechless’ could not be communicated using emoticons.

Emoticons or Emojis is also = Unicode

Yes, emojis and emoticons look like images or icons, but they are characters from the UTF–8 character set.

‘128525’ will just mean some random numbers. However, using this random number along with the combination of ‘&#’ & ‘;’ in the HTML code will display smiling face with heart eyes emoji.

The unicode that will be used displays the same emoji/emoticons but with a different visual appearance on different platforms and with a different description of the emoji/emoticons. For example, an emoji can be called “Slightly smiling”, “Smiling face”, “Happy face” and so on.

To know more about emoticons/emoji Unicode check out the Unicode List. Let’s find out how different screen readers render emojis created using Unicode and <img> tag in HTML.

Emojis created using Unicode in HTML:

Using the code <p>&#128525;</p> in HTML, the generated emoji is announced as below by different commonly used screen readers:

But what if we want the accessible name to be uniformly identified on all platforms?
We can mark the emojis using <img> element and provide an appropriate and descriptive name. But yes this is only to enhance the user experience.

Emojis created using <img> tag in HTML:

When using a <img> tag along with an appropriate alternate text will render to all screen readers uniformly.

For example, creating an emoji as an image and providing an alternate text as below will announce as ‘Smiling face with heart shaped eyes’ to all screen readers on all platforms.

<img src="smiling-hearteyes.png" alt="Smiling face with heart shaped eyes">

This helps us to conclude creating emojis as images will help users render the same meaning across the platforms.

How to make emojis accessible?

Let’s check different ways to make the emojis accessible for all users.

Alternate text

Alternate text is important for understanding the emojis to assistive technology users. That does not mean providing alternate text when the emojis are used for decorative purposes on a webpage.

When the emojis are informative or/and interactive they should have an alternate text that describes them which will help the user to select the suitable emojis.

Alternative text should be concise and unique. For example, Happy face, Sad face, Angry face and so on.

<img src="angry.png" alt="Angry face">

<img src="angry.png" alt="Red circle with two dots and a brace bracket">

In the above bad example, the emoji is described per its visual appearance, however, it is difficult to conclude it indicates an angry face.

Colour Contrast

Emojis are presented using different colours like default, white, black and brown, giving users more options to select emojis. This adds up a task to ensure the emojis are visible in different modes like high contrast, dark mode and light mode. The emojis should meet the required contrast to help all users to identify the emojis.

Colour contrast requirements as per Success Criterion 1.4.11 Non-text Contrast:

• Identify all the key parts of a graphical object i.e., Emojis.
  • For example, in the case of a crying face emoji, the yellow circle face, the blue tears, black eyes and mouth are key parts of the emoji for a user to identify it as a crying face.
• Ensure that all the key parts meet the color contrast requirement of 3:1 with their adjacent colours.

Check out the Decoding WCAG 1.4.11 Non-text Contrast blog that explains the Non-text content requirements in layman’s language.

Note: Meeting Success Criterion 1.4.11 is only required when the emoji does not have any alternative to convey the same information in the surrounding.

Good Example:

In the above good example, the ‘heart’ emoji is clearly visible due to its sufficient contrast with background.

Bad Example:

In the above bad example, the ‘speechless’ emoji is not clearly visible due to its insufficient contrast with background.

Moving and Blinking Emojis

Many emojis move continuously like a clinking wine glass, a smiley with a thumb moving to indicate a like, moving eyes, and so on emojis. We must have seen such emojis on different platforms and even used some of these.

Watching them all move is delightful, but will it be the same for users with reading impairments, vestibular disorders and users with attention deficit disorders I guess NO.

One should avoid the auto movement of emojis. Even if auto movement is required it should only appear on keyboard focus or mouse hover. Also, the movement should be slow and stop within 5 seconds.

Good Example:

Using a Gif that stops within 5 seconds.

In the above good example, the Gif will be stoped after 5 seconds, not distracting users from page content or even having severe consequences.

Bad Example:

Using a Gif that cannot be stopped.

In the above bad example, the Gif will be played continuously, distracting users from page content or even having severe consequences.

CSS @prefers-reduced-motion media query

Use CSS @prefers-reduced-motion media query that ensures the page is displayed as per the user’s device setting for displaying animated content.

Animation can be displayed using the user’s device setting:

• On Windows to reduce the motion use Show animations in Windows
  • Steps: Settings > Display > Ease of Access
• On MacOS to reduce the motion use Reduce Motion
  • Steps: Settings > Accessibility > Display.
• On Android to reduce the motion use Remove animations
  • Steps: Settings > Accessibility > Text and display.

Hello!

Try the user’s device setting to turn off the animation.

Visual tooltip

(Again something that helps enhance user experience)

Yes, you read that correct! There are so many emojis that we have interpreted it wrong even today there are emojis that we do not know the real meaning of.

One of the best examples is folded hands emoji that many have thought of and used as a High Five emoji.

To avoid such misunderstanding for all the visual users it’s best to add a visual tooltip conveying the meaning of the emo

The tooltip does not have to be too descriptive or extra fancy. The tooltip text should be available on keyboard focus and on mouse hover. The requirement of 1.4.13: Content on Hover or Focus should be considered.

Do’s!

• Use colour combination for emojis that have sufficient contrast against all background modes like Default, Dark and High contrast modes.
• Provide concise alternate text that describe the emojis if you want all users to get an identical description.
• Use emojis instead of Emoticons to help the user understand the meaning of it.
• Use emojis in the statement where it makes the most meaning, preferably at the end of the statement.
•  Animated emojis should stop the motion within 5 seconds. If this is not achievable then the best solution is to provide a single play/stop button at the beginning of the page to control the animations. Alternatively, animated emojis should adhere to user device settings of controlling the animation.

Yippee! We have successfully understood the requirement to create accessible emojis for all users.

So, I hope now after understanding the requirement we all will be careful in which context to use emojis and how to ensure they will be accessible.

Let’s use accessible emojis and create delightful reading experiences for all!