Accessible content design for emojis

Emojis have changed the way we convey emotion in the digital world—especially as brands adopt them to relate to customers. But people who rely on assistive reading technology might have a difficult time understanding content that relies on emojis to communicate its core message. So how can we make emojis accessible through our content design?

There’s a range of ways to approach this accessibility consideration, some of which involve a more significant effort than others. Let’s start with three key issues:

1. When rendered as speech, an emoji’s default description may change the core message of its accompanying text.
2. When spoken, an emoji’s default description may cause the message to omit critical information.
3. Emojis with similar colors and shapes may be indistinguishable to people with varying levels of vision ability, even when using screen magnification.

Bumping into emojis

I started thinking about emojis during my first few weeks as a content design lead at Chime. The consensus was clear: Chime loves emojis and we were eager to learn more about using them as an element of content design.

So I started a conversation on Slack about Content Design London’s emoji guidelines:

1. Never use emojis to replace words.
2. Do not use emojis as the only way to express an emotion you intend to communicate.
3. Use popular emojis that are widely recognized.
4. Use emojis that translate well across devices.
5. Put emojis at the end of sentences, and do not use repeated or too many emojis.
6. Use emojis, not emoticons.
7. Avoid emojis that are not visible in both dark and light modes.

As a group, we tried our hand at evaluating some moments when Chime uses emojis in-product against Content Design London’s guidelines.

Just glancing at that message, the use of emojis deviates from guideline #5: Put emojis at the end of sentences, and do not use repeated or too many emojis. This consideration will have an impact when it comes to accessibility because of how the emojis might be read by screen readers. What is the alt text of these emojis and how would a screen reader speak this notification?

I personally love the lightning bolt emoji example simply for how evocative it is and how consistently it’s used. That said, it could be deviating from guideline #2 about not using emojis as the only way to express emotions. If we could put words or an utterance to that emotion, what would it sound like? Oomph? Pow?

Emojis as bullet points is such a widely adopted content pattern that I’m surprised Content Design London’s guidelines don’t address it. How would a screen reader reading the alt text