Technique H86:Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak

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 said 
   <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>

Applicability

HTML

Tests

Procedure

  1. Check to see that the content contains emojis, emoticons, ASCII art, or leetspeak.
  2. Check that each emoji has a text alternative that serves an equivalent purpose.
  3. Check that each ASCII artwork, emoticon, and / or Leetspeak either:
    1. is marked up as an image with a text alternative that serves an equivalent purpose; or
    2. has a text alternative immediately before or after.

Expected Results

  • Checks 2 and 3 are true.
Back to Top