Technique H86:Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
About this Technique
This technique relates to 1.1.1: Non-text Content (Sufficient).
This technique applies to HTML.
Description
Emojis are very popular and are frequently used online to help provide more context and expression to text-based communication. Emojis come with their own pre-defined names that might not always match what the author is intending to communicate. For example, the emoji of a black right-facing triangle (►) is described by default as black right-pointing pointer, which would be confusing if a designer had changed its rotation or color, or if it was being used to give the accessible name to a "play" button in a multimedia player.
Emoticons pre-date emojis, are still used but are much less popular than they once were. Emoticons use ASCII characters to create facial expressions and other ways to communicate an emotion. Because emoticons are made from many text characters, they can be confusing for screen reader users. When possible it is better simply to use a word like "smile" or a suitable emoji instead of an emoticon. If emoticons are used they should have a text alternative.
ASCII art was common on the internet before graphics became widely used. ASCII characters were arranged to form pictures, pictures of text, or graphs. Although ASCII content is not used frequently on the Web anymore, it must be remembered that, when it is used, it can be very confusing to people who are accessing the internet using screen readers. If ASCII art is used, it should also have a text explanation of what the picture is. It is also suggested that, if the ASCII picture isn't marked up as an image using ARIA, that there is a link to skip over the art (although this is not required).
Leet used to be a fairly-common part of Internet culture and slang, but is now hardly used. Leetspeak uses various combinations of characters, including numerals and special characters, to replace standard characters. Leet is often incomprehensible to people using screen readers, and therefore requires a text alternative in order to conform to Success Criterion 1.1.1 (Non-Text Content).
Examples
Example 1: Marking up emojis in a sentence
This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.
<p>I smiled at my friend and gestured
<span aria-label="you" role="img">👉🏾</span>
<span aria-label="rock" role="img">🤘🏾</span>!
</p>Example 2: Four options for providing alternatives for an emoticon representing "smile"
The following shows four options for providing alternatives for an emoticon representing "smile", which is consists of a colon followed by a closing parenthesis.
:) (smile)
<abbr title="smile">:)</abbr>
<span aria-label="smile" role="img">:)</span>
<img alt="smile" src="smile.gif">
Example 3: Using the aria-label and role="img" properties
Adding the role="img" property to the ASCII content's containing element defines it as an image, and the aria-label property gives it the required text alternative. Skip to the next ASCII example.
<div aria-label="WCAG" role="img">
oooooo oooooo oooo .oooooo. .o. .oooooo.
`888. `888. .8' d8P' `Y8b .888. d8P' `Y8b
`888. .8888. .8' 888 .8"888. 888
`888 .8'`888. .8' 888 .8' `888. 888
`888.8' `888.8' 888 .88ooo8888. 888 ooooo
`888' `888' `88b ooo .8' `888. `88. .88'
`8' `8' `Y8bood8P' o88o o8888o `Y8bood8P'
</div>Example 4: ASCII art with an explanation of the picture preceding it
This example includes a link to skip over the ASCII art. Skip to the Leetspeak example.
<figure>
<figcaption>
<p>Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII butterfly image</a>
</p>
</figcaption>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
</figure>
<p id="skipbutterfly">New content after the ASCII image.</p>Example 5: Marking up Leetspeak
The following is Leetspeak for "Austin Rocks".
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>Related Resources
No endorsement implied.
Tests
Procedure
- Check to see that the content contains emojis, emoticons, ASCII art, or leetspeak.
- Check that each emoji has a text alternative that serves an equivalent purpose.
- Check that each ASCII artwork, emoticon, and / or Leetspeak either:
- is marked up as an image with a text alternative that serves an equivalent purpose; or
- has a text alternative immediately before or after.
Expected Results
- Checks #2 and #3 are true.