# Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak

ID: H86

Technology: html

Type: Technique

## When to Use

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

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

### 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">

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

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

### Marking up Leetspeak

The following is Leetspeak for "Austin Rocks".

    <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>

## 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.

## Resources

- ARIA Recommendation.
- Accessible Name and Description Computation.