How to Make Emojis Accessible in HTML

This post originally appeared on my blog, DevYarns, in August 2020. I post all my writing there first. Make sure to subscribe to my DevYarns newsletter for all my latest tips--emails no more than once a week.

Follow me on Twitter for accessibility tips and cats.

When I recently rewrote the bio on my personal website, I added some emojis to add some personality and visual interest.

To make sure screen readers could read the emojis in my bio in a way that made sense, I did the following three things:

1. I wrapped each emoji in a <span>.
2. I added role="img" to each <span>.
3. I added a brief but descriptive aria-label to each <span>.

So, to insert my waving emoji, I used the following code:

<span role="img" aria-label="hand waving">👋</span>

Let's break it down.

The span Element

<span> is an inline HTML element that can be used to format the inline content it surrounds. Since <span> doesn't inherently represent any type of content—as opposed to something like <em>, which specifies emphasis—it is the perfect blank canvas for telling a screen reader what it will see inside.

Since <span> isn't self-closing, we'll have to remember to add a closing </span> tag after our emoji.

We'll mark up our <span> to tell screen readers how to interpret it.

The role="img" Attribute

The role HTML attribute defines a user interface element. That is, what type of element should the screen reader tell the user they have encountered?

Here, we use the img role to tell the screen reader that the emoji should be treated as an image.

The aria-label Attribute

The aria-label attribute defines some text that labels the current element. In other words, it tells the screen reader how to describe that element to the user.

It is important to use a descriptive and meaningful label here. I chose "hand waving" for my emoji because it is brief and describes my meaning.

What it Sounds Like When a Screen Reader Reads This

When you put it all together, the screen reader will read your aria-label and identify the role of the content to the user.

Take the following HTML as an example:

<p>
  Hi, I'm Rachel!
  <span role="img" aria-label="hand waving">
    👋
  </span>
</p>

VoiceOver, the screen reader software that comes with macOS, reads that as follows: "Hi, I'm Rachel! Hand waving, image."

What if We Leave Off the Role and/or the Label?

VoiceOver happens to read emojis using their names, so it isn't the worst. With all my extra markup removed, it reads the line as follows: "Hi, I'm Rachel! Waving hand."

However, my goal is to give blind and visually impaired users the best possible experience. I prefer to indicate to the user that this is an image and I have not in fact written "waving hand," which could mean something else. I also don't want to assume that every screen reader interprets emojis without roles and labels the same way.

The Emojipedia page on the waving hand emoji says it is known by five other names, including "goodbye," which is the opposite of my meaning! I don't want to hope the user's screen reader reads the right description that makes sense in the context. Specifying a label guarantees I am conveying what I actually mean.

Recommended Reading by a Screen Reader User

In researching how to make emojis accessible, I came across an article by screen reader-user Beth Finke: Emojis and Accessibility: The Dos and Don’ts of Including Emojis in Texts and Emails.

I highly recommend reading her article for helpful tips on how many emojis to use, whether to use them at all, and what it is like to use a screen reader when emojis are misused.

Featured image by Markus Winkler on Unsplash.