Techniques for WCAG 2.0

On this page:

-

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

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

## User Agent and Assistive Technology Support Notes

- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.

- Implementing this technique with the `title` attribute is only sufficient if the `title` attribute is accessibility supported. The content of the `title` attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.

- JAWS 6.2 and higher and WindowEyes 5.0 and higher support the abbr and acronym elements. They can all be set to speak the title attribute when these elements are encountered, but this is not the default setting and is often not turned on by users.

- Many graphical user agents render text enclosed within an `abbr` or `acronym` element with a dotted line below or surrounding it. In addition, when the mouse hovers over the element, the expansion is displayed as a tool tip.

- In Internet Explorer 7 and below, items marked using the `abbr` element are not displayed with any additional formatting. For IE 6 and below, the expanded version does not display as a tooltip when the mouse hovers over the item.

- Within a given user agent or assistive technology, `abbr` and `acronym` elements are presented to users in the same way.

## Description

Before graphics became widely used on the internet, ASCII characters were often arranged to form pictures or graphs. Although ASCII art is not used frequently on the Web anymore, it must be remembered that, when it is used, it is very confusing to people who are blind and accessing the internet using screen readers. If it is used it should also have a text explanation of what the picture is. It is also suggested that there be a link to skip over the ASCII art (although this is not required).

Emoticons are very popular. They include ASCII characters that form facial expressions and other ways to communicate an emotion. They can be confusing for screen reader users. When possible it is better simply to use a word like "smile" instead of an emoticon. But if emoticons are used they should have a text alternative. In some contexts, blog and forum software for example, plug-ins are available that automatically convert ASCII characters used as emoticons into HTML images with text alternatives.

Leetspeak uses various combinations of ASCII characters to replace Latinate letters. Leet has become a part of Internet culture and slang. Leet is frequently used to beat text and spam filters. It is often incomprehensible to blind people using screen readers, and therefore requires a text alternative in order to conform to Success Criteria 1.1.1.

Note: Because support for this technique is limited, it is recommended that authors provide the text alternative in text.

## Examples

### Example 1

The following shows three options for providing alternatives for an emoticon representing "fright," which is made out of an equal sign followed by the number eight, a hyphen and the number zero.

Example Code:

    =8-0 (fright)

    <abbr title="fright">=8-0</abbr>

    <img src="fright.gif" alt="fright"/>

### Example 2

Here is ASCII art with an explanation of the picture preceding it. It includes a link to skip over the ASCII art. Skip ASCII example.

Example Code:

     Figure 1: ASCII art picture of a butterfly.
     <a href="#skipbutterfly">Skip ASCII image</a>

                                                                    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
                                     ~~~~~~~~~
    <a name="skipbutterfly"></a>

### Example 3

The following is Leetspeak for "Austin Rocks".

Example Code:

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

## Tests

### Procedure

1. Open the page in a common browser.

2. Check to see that the content contains ASCII art, emoticons and/or leetspeak.

3. Check that there is a text alternative immediately before or after all ASCII art, emoticons and/or Leetspeak.

### Expected Results

- Test procedure #3 is true.

- Top
- Contents
- Intro
- Previous: Technique H85
- Next: Technique H87