Emoji Accessibility Guide
Emoji present a unique accessibility challenge. Screen readers announce emoji by reading their Unicode name — 😂 becomes "face with tears of joy" — which can make emoji-heavy text exhausting to listen to. At the same time, emoji carry real meaning, and hiding them entirely from assistive technology leaves blind users out of the conversation.
This guide covers how screen readers handle emoji, and how to write accessible markup when emoji are part of your interface.
How Screen Readers Handle Emoji
Screen readers read emoji by their Unicode description. The exact announcement varies by reader and language:
| Emoji | NVDA (Windows) | VoiceOver (macOS) | TalkBack (Android) |
|---|---|---|---|
| 😂 | "face with tears of joy" | "face with tears of joy emoji" | "rolling on the floor laughing" |
| 👋 | "waving hand" | "waving hand emoji" | "waving hand sign" |
| 🔥 | "fire" | "fire emoji" | "fire" |
| 🇺🇸 | "flag: United States" | "flag of United States emoji" | "flag: United States" |
The descriptions come from the Unicode CLDRCLDR (CLDR)
100以上の言語での絵文字名や検索キーワードを含むロケール固有のデータを提供するUnicodeプロジェクト「共通ロケールデータリポジトリ」。 data and vary by language locale. In some languages, the descriptions are more or less verbose.
The Problem with Emoji Stacks
Content like this is common on social media:
Great job team!!! 🎉🎉🎉🔥🔥💪💪💪
A screen reader reads: "Great job team exclamation mark exclamation mark exclamation mark party popper party popper party popper fire fire flexed biceps flexed biceps flexed biceps" — which is verbose and disruptive to comprehension.
Patterns for Accessible Emoji
Pattern 1: Decorative Emoji (Hide from Screen Readers)
When an emoji is purely decorative and adds no information, hide it:
<!-- The text "Success" already conveys the meaning; emoji is decorative -->
<p>
Success
<span aria-hidden="true">✅</span>
</p>
<!-- Bullet points with decorative emoji -->
<ul>
<li><span aria-hidden="true">🚀</span> Deployment pipeline</li>
<li><span aria-hidden="true">🔒</span> Security scanning</li>
<li><span aria-hidden="true">📦</span> Artifact publishing</li>
</ul>
The aria-hidden="true" attribute prevents the element from being read aloud, but the emoji remains visible.
Pattern 2: Meaningful Emoji (Provide Alt Text via ARIA)
When an emoji carries meaning not present in surrounding text, provide a label:
<!-- Emoji as a rating or status indicator -->
<span role="img" aria-label="five stars">⭐⭐⭐⭐⭐</span>
<!-- Emoji as a status badge -->
<span role="img" aria-label="Warning">⚠️</span>
API rate limit approaching.
<!-- Emoji replacing a word -->
<p>
I <span role="img" aria-label="love">❤️</span> this library.
</p>
role="img" signals to the screen reader that this span represents an image-like element, and aria-label provides the accessible name.
Pattern 3: Emoji as Icon Buttons
When an emoji is interactive, always provide a text label:
<!-- WRONG: emoji-only button with no label -->
<button onclick="like()">👍</button>
<!-- CORRECT: hidden text or aria-label -->
<button onclick="like()" aria-label="Like this post">👍</button>
<!-- Also correct: visually hidden text -->
<button onclick="like()">
<span aria-hidden="true">👍</span>
<span class="sr-only">Like this post</span>
</button>
/* Visually hidden but accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
Pattern 4: Repeated Emoji
Avoid repeating the same emoji for emphasis. If you must use repetition, wrap the sequence:
<!-- WRONG: reads "fire fire fire fire fire" -->
<span>🔥🔥🔥🔥🔥</span>
<!-- CORRECT: group with a label -->
<span role="img" aria-label="Very popular">🔥🔥🔥🔥🔥</span>
Framework Implementation
React Component
function Emoji({ char, label, decorative = false }) {
if (decorative) {
return <span aria-hidden="true">{char}</span>;
}
return (
<span role="img" aria-label={label}>
{char}
</span>
);
}
// Usage
function StatusBadge({ status }) {
const statusMap = {
success: { emoji: '✅', label: 'Success' },
warning: { emoji: '⚠️', label: 'Warning' },
error: { emoji: '❌', label: 'Error' },
};
const { emoji, label } = statusMap[status];
return <Emoji char={emoji} label={label} />;
}
// Decorative use
function FeatureList() {
return (
<ul>
<li><Emoji char="🚀" decorative /> Fast performance</li>
<li><Emoji char="🔒" decorative /> Secure by default</li>
</ul>
);
}
Vue Component
<template>
<span
v-if="decorative"
aria-hidden="true"
>{{ char }}</span>
<span
v-else
role="img"
:aria-label="label"
>{{ char }}</span>
</template>
<script setup>
defineProps({
char: { type: String, required: true },
label: { type: String, default: '' },
decorative: { type: Boolean, default: false },
});
</script>
Text Processing: Annotating Emoji in Plain Text
When rendering user-generated content that may contain emoji, you need to decide which emoji are meaningful. A simple heuristic: emoji that appear alone or at the end of a message may be expressive; emoji embedded in text likely serve a specific semantic role.
import emojiRegex from 'emoji-regex';
const rx = emojiRegex();
function annotateEmoji(text, getLabel) {
// Replace each emoji with an accessible span
return text.replace(rx, (match) => {
const label = getLabel(match);
if (!label) return `<span aria-hidden="true">${match}</span>`;
return `<span role="img" aria-label="${label}">${match}</span>`;
});
}
// Example: use a CLDR lookup for labels
import emojiData from 'emojibase-data/en/data.json';
const labelMap = Object.fromEntries(emojiData.map(e => [e.emoji, e.label]));
const html = annotateEmoji(
"Deploying to prod 🚀 — wish me luck 🤞",
(e) => labelMap[e]
);
// Produces accessible HTML with aria-labels
Content Guidelines
Beyond technical implementation, follow these editorial guidelines:
Use emoji to supplement, not replace, text
Bad: "Meeting ➡️ 3pm 📅 bring laptop 💻 coffee ☕ required" Good: "Meeting at 3pm — bring your laptop. Coffee will be provided. ☕"
Avoid emoji in headings and links
Screen readers announce heading and link text with their role. Emoji in headings create confusing announcements like "heading level 2 rocket ship emoji launch plan". Place emoji before or after headings as decorative elements:
<!-- Avoid -->
<h2>🚀 Launch Plan</h2>
<!-- Prefer -->
<h2>Launch Plan <span aria-hidden="true">🚀</span></h2>
<!-- Or -->
<span aria-hidden="true">🚀</span>
<h2>Launch Plan</h2>
Avoid skin-tone modifier ambiguity
When using person emoji with skin tone modifiers, the screen reader will announce both the person type and the skin tone: "thumbs up: medium skin tone". This is appropriate — do not suppress it.
Test with real screen readers
Run through your content with: - NVDA (free, Windows) + Firefox - JAWS (Windows) + Chrome - VoiceOver (macOS/iOS, built-in) + Safari - TalkBack (Android, built-in)
Pay attention to how emoji sequences and ZWJゼロ幅接合子（ZWJ） (ZWJ)
複数の絵文字を1つの複合絵文字に結合するために使われる不可視のUnicode文字（U+200D）。人物と物体を組み合わせた職業絵文字などに使用される。 sequences are announced. A family emoji like 👨👩👧 might be read as three separate emoji or as "family: man, woman, girl" depending on the screen reader version.
WCAG Compliance
WCAG 2.1 does not have an emoji-specific criterion, but several apply:
- 1.1.1 Non-text Content: Images (including emoji used as images) need text alternatives. Use
role="img"+aria-labeloraria-hidden="true"for decorative emoji. - 1.4.5 Images of Text: Emoji used to replace words should have text alternatives.
- 2.4.6 Headings and Labels: Headings with emoji need to be clear and descriptive.
Explore More on EmojiFYI
- Analyze how emoji sequences are read and described: Sequence Analyzer
- Find accessible alternatives or descriptors: Glossary
- Convert text descriptions to emoji: Text to Emoji
- Search for specific emoji by name: Search