A person browsing with a screen reader often perceives the emoji through its name. The name is not necessarily identical to the figurative meaning the author intended. The 3W86H guide specifically draws attention to this. Source: W3C H86
Write out what you want to communicate
A short example:
On Friday ☕, then 📞, finally 📄.
The sentence is also open to multiple interpretations when seen. Does it mean coffee, a phone consultation, and sending documents? When do these happen, and what is whose task? Reading the names of the symbols aloud does not answer these questions on its own.
More precise version:
On Friday at 9 o'clock we meet for a coffee. After that, I will call the supplier, and in the afternoon I will send the summary.
If you want to add a cup to the coffee, the sentence should still remain complete. In announcements, the date, location, price, and task to be performed should also appear in text. Community accessibility recommendations also support this solution. Source: NCDIT, Social Media Content Accessibility
A long string of emojis read aloud can become a long list
In the “Congratulations! 🎉🎉🎉🎉🎉” message, the screen reader may read the same name multiple times. Try it with a single symbol: “Congratulations on your result! 🎉” The sentence can be listened to more briefly this way. It is worth placing the symbol at a natural stopping point, for example at the end of the paragraph. Source: Section508.gov, social media
In lists, use real lists where the interface supports it. If you place the same star, checkmark, or finger at the beginning of every line, consider what information the repeated symbol provides. Simple numbering or built-in lists often provide a more traceable structure.
However, in a comparison where the emojis themselves are the topics, it is justified to present multiple symbols. In such cases, write the name and an explanation of the difference next to them. This way, the reader has access to the essence even without distinguishing the images.
What can you do on your own website?
If an emoji carries a distinct meaning, an accessible name can be assigned to it in HTML. A custom example aligned with the method presented by W3C:
<span role="img" aria-label="Successfully sent">✅</span>
In this example, the accessible name announces the successful submission. The aria-label does not appear as a label to sighted users, so write out the important state in visible text as well. A button's label should name the action: for example, "Copy".
For an emoji inserted as an image file, determine the alternative text of the img element based on the image's function. If the same information is already fully present next to the image, and the graphic adds no new meaning, an empty alt="" may be justified. The W3C guide on images details this situation-dependent decision. Source: W3C, Decorative Images
The check should be performed on the final interface
In social media posts, your technical options are usually more limited, so a well-written sentence is particularly important. Handling accessible names may be system- and application-dependent. A single HTML solution or a successful test alone does not prove the accessibility of the entire page.
For practical checking, read the text without the symbols, then listen to it on the final interface with a screen reader. Observe where information is unnecessarily repeated, where the sentence breaks, and whether any unexplained references remain. After the fix, repeat the test in the same place.
To start, choose a frequently used post or client message. Shortening the unnecessary string of symbols and writing out missing words is an immediate, concrete, verifiable change.
Take the essence with you
Three-question knowledge quiz
Try how you would apply what you read. Mark one answer per question; every correct answer is worth one point. The evaluation provides feedback for these three situations; we do not store or send your answers.
First, rewrite the coffee–phone–document example as a full sentence, then read it back without the symbols.
First, rewrite the coffee–phone–document example as a full sentence, then read it back without the symbols.
Correct the pattern associated with the incorrect answer.
You examined the comprehensibility of the information in all three examples; listen to one of your own posts as well.
Solutions and explanations
- You write out the days and the exact opening hours. The opening hours are accessible without recognizing the graphic.
- The information conveyed by the image is already fully present in the text next to it. An empty alternative text can avoid reading out completely repetitive information.
- On the final interface, you listen to what repetitions it causes. The screen reader test shows the message actually heard.
Count your correct answers: each is worth one point. A skipped answer is worth zero points.
- 3 points: In all three examples, you examined the clarity of the information; listen to one of your own posts as well.
- 2 points: Correct the pattern associated with the wrong answer.
- 0–1 points: First, rewrite the coffee–phone–document example as a full sentence, then read it back without the symbols.
