When you’re posting on social media or creating casual content for your business’s website, you might wonder: Are emojis accessible for people with disabilities?
If you’re asking that question, you’re on your way to building an accessibility-first mindset. By considering the needs, expectations, and preferences of users with disabilities when creating content, you’re doing your part to build a better internet.
Now for the bad news: There’s no simple answer here. Emojis can be translated by screen readers (software that converts text to audio or braille), so they’re not inherently inaccessible — people who are blind can still understand them, provided that they’re used appropriately (more on that in a moment).
Here’s everything you need to know when using emojis in your content.
Emojis have built-in alternative text, so they’re accessible for screen readers
Alternative text (also called alt text) describes the purpose and context of an image. That alt text is standardized by the Unicode Consortium. The problem is that in many cases, designers fail to consider the context of that alternative text.
For example, an arrow emoji might be announced as “black arrow pointing left.” If the designer has changed the orientation or the color of the arrow, that description is no longer accurate.
And if the designer is totally unaware of the alt text, they might send a completely inaccurate message to their audience. You might choose a clock emoji to show that your business keeps consistent hours — but that clock emoji might be announced as “eight thirty,” “eleven o’clock,” or another specific time!
Related: Using Emoji Could Be Excluding People From Your Conversation
While you can’t overwrite emoji alt text, you can use ARIA to change the emoji’s accessible name
ARIA labels can ensure that you’re sending the right message to AT users — though if you’re using ARIA, you’re making a commitment to test your markup. Learn about the best practices of using ARIA.
Here’s an example of ARIA markup for emojis, taken from the W3C’s guidance for Web Content Accessibility Guidelines (WCAG) 1.1.1, “Non-text Content:”
<p>I smiled at my friend and gestured
<span aria-label="you" role="img">👉🏾</span>
<span aria-label="rock" role="img">🤘🏾</span>!
</p>
The goal here is to prevent awkward output for screen reader users. Without the ARIA, the output might read:
I smiled at my friend and gestured: backhand index pointing right, sign of the horns.
Of course, different screen readers may output emoji in different ways. But using accessible names, designers can provide users with a more predictable experience.
Related: What Is the Best Browser for Testing Screen Reader Accessibility?
Follow these basic guidelines when using emoji in web content or on social media
Emoji are part of the language of the internet, and they don’t create immediate accessibility issues when used sparingly. If you overuse emoji — or use them without thinking about their built-in alt text — you may be confusing your audience.
Here are some basic tips to keep in mind:
- Try not to use too many emoji, particularly on social media (where you usually can’t assign accessible names). While there’s no WCAG rule here, we recommend a maximum of three emoji per post.
- Look up the Unicode description of each emoji before using it. There’s a full list of currently supported emoji on the Unicode website, but it’s usually easier to paste the emoji into your search bar. Make sure the description of the emoji matches with your intended message!
- On social media, put emoji towards the end of your post. This helps screen reader users skip the descriptions without missing important information.
- Avoid repeating emojis.
- If you use emojis to replace words, use ARIA to assign accessible names. We strongly recommend working with an accessibility partner when using ARIA.
- Pictures of emoji still need appropriate alt text. Learn the best practices for writing alt text.
One final note: Emoticons are not the same thing as emoji. Emoticons are ASCII characters that are used to create facial expressions or other images (for example, ;) for a winking face). Try not to use emoticons, since they’re not accessible for screen reader users. If you must use emoticons, apply ARIA labels to make them accessible.
The Bureau of Internet Accessibility can help you build a WCAG conformance strategy for your organization. Get started with a free website accessibility scan powered by AudioEye or send us a message to connect with an expert.
