How to Make Emojis Accessible in HTML

#a11y #html #frontend

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:

I wrapped each emoji in a .
I added role="img" to each .
I added a brief but descriptive aria-label to each .

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

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

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

We'll mark up our  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.