Emoji and Accessibility
How screen readers handle emoji, and practical techniques for accessible implementation
How Screen Readers Announce Emoji
When a screen reader encounters an emoji, it reads out the name defined by the Unicode CLDR. The CLDR is an internationalization database that covers date formats, currency symbols, and emoji annotations (short names and keywords) across many languages. In English, 😂 is registered as "face with tears of joy," 🔥 as "fire," and 💯 as "hundred points."
If VoiceOver reads "Had a great time today 😂," you hear "Had a great time today, face with tears of joy." Every emoji in a message triggers its name, so the more emoji a text contains, the noisier the audio experience becomes.
CLDR annotations are maintained by the Unicode Consortium's CLDR Technical Committee. Contributors propose and revise translations through an online tool called the Survey Tool, and new releases follow a six-month cycle independent of the Unicode Standard itself. Because of this, there is always a delay between a new emoji appearing and its name being available through an OS update to screen readers.
Differences Between Screen Readers
VoiceOver, NVDA, JAWS, and TalkBack all retrieve emoji names through their host OS, but they handle the reading differently.
NVDA reads each emoji individually. If the same emoji appears three times in a row, it announces the name three times. A feature to group repeated emoji (e.g., "party popper x3") has been requested, but emoji are represented as surrogate pairs in UTF-16, which makes simple repeat detection difficult, and the feature has not been implemented.
JAWS uses CLDR names but can be inconsistent. When a flag emoji is not properly rendered by the OS font and falls back to a generic glyph, JAWS may announce the Welsh flag as "black waving flag" instead of "flag: Wales."
These differences mean that testing with a single screen reader and declaring "no issues" is not reliable. Testing with both VoiceOver and NVDA is a practical starting point.
Common Problems
Consecutive Emoji Create Repetitive Announcements
A social media post like "Congratulations 🎉🎉🎉✨✨" gets read as "Congratulations, party popper, party popper, party popper, sparkles, sparkles." The writer meant visual emphasis, but in audio the repeated names bury the actual message.
Writer's Intent and CLDR Name Don't Match
The way people use emoji in daily communication often diverges from official CLDR names.
- 🙏 → used to mean "please" or "thank you," but CLDR says "folded hands"
- 💀 → used to mean "dying of laughter," but CLDR says "skull"
- 🙃 → used to express irony, but CLDR says "upside-down face"
Screen readers speak the CLDR name verbatim, so the intended nuance is lost. Context-dependent emoji usage becomes a communication barrier when the audience is listening instead of looking.
Verbosity of ZWJ Sequences and Skin Tone Modifiers
Emoji joined with a Zero Width Joiner (ZWJ), such as the family emoji (👨👩👧👦) or the woman technologist (👩💻), tend to have long CLDR names. 👨👩👧👦 is announced as something like "family: man, woman, girl, boy."
Skin tone modifiers also lengthen announcements. The default 👋 is announced as "waving hand," but selecting a skin tone changes it to "waving hand: light skin tone." Emoji skin tones use the five-level Fitzpatrick Scale, and every level appends a tone description to the CLDR name. From an accessibility standpoint, using the default yellow keeps announcements shorter when there is no specific reason to choose a tone.
Emoji-Only UI Elements
Some websites use 🔍 as a search button and 🏠 as a home link, with no text labels. A screen reader announces "magnifying glass" and "house," which describes the pictures but not their function as navigation. WCAG 2.1 Success Criterion 1.1.1 "Non-text Content" (Level A) requires that interactive elements have a text alternative describing their purpose. An emoji's CLDR name describes appearance, not function, so it does not satisfy this criterion.
Rendering Differences Across Platforms
The same Unicode codepoint looks different on Apple, Google, Samsung, and Microsoft. A study by the University of Minnesota (2018) demonstrated that these differences cause miscommunication. The "grinning face with smiling eyes" emoji appeared to be grimacing on Apple, while Google, Samsung, and Microsoft rendered it as clearly cheerful.
The study reported that at least 25% of Twitter users did not know that the emoji they posted could appear differently on their followers' devices. After being shown how the same tweet rendered across platforms, 20% of respondents said they would have edited or not sent the tweet.
Screen readers announce the CLDR name regardless of visual rendering, so they are not affected by these differences. Still, the fact that sighted users can interpret the same emoji as different emotions illustrates the risk of relying on emoji as the primary carrier of meaning. A separate study of 436 participants (2017) confirmed that age, gender, and culture all influence how people interpret emoji, and that iOS emoji tended to be rated as more approachable and clearer in meaning than Android emoji.
Accessibility Beyond Screen Readers
Low Vision
Emoji accessibility is not limited to screen readers. For people with low vision, emoji displayed on small screens can be hard to distinguish. Similar face emoji like "pensive face," "relieved face," and "disappointed face" look nearly identical without magnification. When emoji carry meaning, this difficulty in distinguishing them becomes a communication barrier.
Cognitive Accessibility
Emoji also affect users with cognitive disabilities and neurodivergent users. Using emoji in place of words increases cognitive load for everyone. Dense clusters of emoji make messages harder to process, especially for neurodivergent users. Uncommon emoji and emoji whose meaning shifts with context can be particularly confusing for people with cognitive disabilities.
On the other hand, using emoji alongside text can help people with cognitive disabilities or limited language proficiency understand information more easily. Adding sun and rain emoji to a weather forecast provides visual cues that complement the text. Whether emoji help or hinder depends on how they are used.
For autistic people, emoji can help express emotions. One accessibility consultant reported that using emoji helped reduce anxiety and build rapport with colleagues. However, cumulative use of colorful emoji and sarcastic emoji usage are generally recommended against. Preferences vary from person to person, so respecting individual preferences is important.
Emoji in Chat Tools
In chat tools like Slack and Microsoft Teams, you cannot add ARIA attributes yourself. The platform controls how emoji are announced, leaving users with limited ways to intervene. Screen readers read emoji in messages by their Unicode name.
Slack officially recommends keeping emoji to one or two per message, placing them at the end, conveying meaning through text, and using emoji as supplementary decoration. Microsoft similarly advises against trying to communicate entire messages through emoji, suggesting they be used occasionally for emphasis.
Slack and Discord support custom emoji, but custom emoji have no CLDR name. Screen readers announce the internal alias instead. For example, a custom emoji registered as :shipit: is read as "shipit," so the name chosen at registration directly determines what gets communicated. Discord stickers include a description field at upload time that can provide context for screen reader users.
Accessible Implementation on the Web
When using emoji in HTML, match the implementation to the emoji's role. The W3C's H86 technique recommends combining role="img" with aria-label on a span element. Because span does not support the alt attribute, this combination is the way to give an accessible name to an inline emoji.
| Purpose | Problematic markup | Accessible markup |
|---|---|---|
| Decorative emoji | Bare emoji in text | <span aria-hidden="true">🎉</span> |
| Meaningful emoji | Bare emoji in text | <span role="img" aria-label="celebration">🎉</span> |
| Emoji button | <button>🔍</button> | <button aria-label="Search">🔍</button> |
Hide decorative emoji from screen readers with aria-hidden="true". Give meaningful emoji a role="img" and aria-label that matches your intended meaning. For buttons and links, use aria-label to state the function.
When building an emoji picker in a web application, the picker itself needs to be accessible. Use the tab panel pattern (role="tab" and role="tabpanel") for category switching, and support arrow key navigation between emoji.
Guidelines for Content Authors
- Use emoji to supplement text, never as the sole carrier of meaning
- One emoji is enough. Don't repeat the same one in a row
- Place emoji at the end of a sentence or message. Inserting them mid-sentence interrupts the reading flow
- Check the CLDR name before using an emoji. On macOS, the Character Viewer shows names; on Windows, the emoji panel does the same
- Be aware that ZWJ sequences and skin-toned emoji produce longer announcements
- When registering custom emoji, choose a name that communicates the meaning
- Keep emoji per message to a few at most
If the text still makes sense with all emoji removed, it will work for people listening to it too.