How to Make Emojis Accessible in HTML
Tags: a11y, html, frontend
Published: 2020-09-25 21:15:52

This post originally appeared on my blog, [DevYarns](https://devyarns.com/), in August 2020. I post all my writing there first. Make sure to [subscribe to my DevYarns newsletter](https://devyarns.com/#subscribe) for all my latest tips--emails no more than once a week.

[Follow me on Twitter](https://twitter.com/rleggos) for accessibility tips and cats.

---

When I recently rewrote the bio on my [personal website](https://rachelleggett.com), I added some emojis to add some personality and visual interest.

![Screenshot of my personal website bio, which includes a waving hand emoji.](https://dev-to-uploads.s3.amazonaws.com/i/geiyd75hvsl7qr3qq3oo.png)

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:

```html
<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&mdash;as opposed to something like `<em>`, which specifies emphasis&mdash;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:

```html
<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](https://emojipedia.org/waving-hand/) 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](https://blog.easterseals.com/emojis-and-accessibility-the-dos-and-donts-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](https://unsplash.com/@markuswinkler?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText).