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
- I added a brief but descriptive
So, to insert my waving emoji, I used the following code:
<span role="img" aria-label="hand waving">👋</span>
Let's break it down.
<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.
<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.
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.
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.
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."
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.
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.