Photo by Domingo Alvarez E on Unsplash

Accessible content design for emojis

by Jason Fox

  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.

  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.
An alert from Chime that shows emojis being used in the middle of the sentence, which makes it harder for screen readers to translate the meaning.
An app alert that reads, “Want your money instantly? Link your Chase debit card and transfer money to your Chime Spending Account instantly.”
An email example from Chime that shows each sentence starting with an emoji used as a bullet point.

Aha! Emojis can be confusing or difficult to understand for some users

After chatting for a bit, we realized that Chime members who rely on assistive reading technology may have a difficult time understanding content that relies on emojis to communicate its core message.

  • There are 326 million people in the US (source)
  • 88.5% of the US population uses the Internet (source)
  • 2.3% of the US population have a visual impairment (source)
  • 54% of those that are disabled go online (source, source)
  • 89.2% of people that use screen readers are disabled (source)

The problem goes beyond inconvenience

The impact of a poorly-designed emoji content experience has the potential to cause significant pain points for our members. Here are the three scenarios we surfaced:

  • Written example: 🚫 No fees
  • Read by a screen reader: Prohibited no fees
  • Written example: Make sure to 🧐 your Direct Deposit details for ⚡️ payments.
  • Read by a screen reader: Make sure to face with monocle your Direct Deposit details for zap payments.

Build emoji considerations into your design process

There’s a range of potential solutions to the problem of inaccessible emojis. Start a conversation with your design, product, research, and engineering partners to understand the best approach for your team.

  • Ensure the emoji isn’t being used to replace words
  • Ensure that the emoji isn’t the only way emotion is being expressed
  • Use popular, widely-recognized emojis
  • Use emojis that translate well across devices
  • Put emojis at the end of sentences, and don’t repeat them or use too many
  • Use emojis, not emoticons
  • Avoid emojis that are not visible in both dark and light mode

Accessibility in the details

All of the explorations and solutions in this article represent just a small sliver of the work to be done through accessible content design. After all, this is just about emojis! But it can take time to get the details right, so start now! Taking every possible step toward more accessible content ensures that people with a range of abilities can use our digital products.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store