Summary

Identify and describe text-based imagery so that assistive technologies do not ignore, or attempt to read out, the text they contain.

Techniques

Examples

Example 1 — ASCII drawing with alt text

The aria-label attribute provides the alternative text description. This attribute serves the same purpose as the alt attribute as that attribute is only allowed on img elements.

<pre
    role="img"
    aria-label="Winnie the Pooh with Hunny pot">
    _
 __( )_
(      (o____
 |          |
 |      (__/
   \     /   ___
   /     \  \___/
 /    ^    /     \
|   |  |__|_HUNNY |
|    \______)____/
 \         /
   \     /_
    |  ( __)
    (____)
</pre>
Example 2 — Emoticon with alt text
<span role="img" aria-label="shrug">¯\_(ツ)_/¯<span>
Example 3 — Redacted text
<p>In the case of
   <span
         class="redacted"
         role="img"
         aria-label="redacted text">_____<span>
   it is clear that the crime of
   <span
         class="redacted"
         role="img"
         aria-label="redacted text">_____<span>
   …
<p>
Example 4 — ASCII drawing with description

The aria-describedby attribute is used to provide a description for the ASCII image.

<pre
    role="img"
    aria-label="Skeleton in graveyard"
    aria-describedby="skeleton-desc">
           _..--""---.
          /           ".
          `            l
          |'._  ,._ l/"\
          |  _J<__/.v._/
           \( ,~._,,,,-)
            `-\' \`,,j|
               \_,____J
          .--.__)--(__.--.
         /  `-----..--'. j
         '.- '`--` `--' \\
        //  '`---'`  `-' \\
       //   '`----'`.-.-' \\
     _//     `--- -'   \' | \________
    |  |         ) (      `.__.---- -'\
     \7          \`-(               74\\\
     ||       _  /`-(               l|//7__
     |l    ('  `-)-/_.--.          f''` -.-"|
     |\     l\_  `-'    .'         |     |  |
     llJ   _ _)J--._.-('           |     |  l
     |||( ( '_)_  .l   ". _    ..__I     |  L
     ^\\\||`'   "   '"-. " )''`'---'     L.-'`-.._
          \ |           ) /.              ``'`-.._``-.
          l l          / / |                      |''|
           " \        / /   "-..__                |  |
           | |       / /          1       ,- t-...J_.'
           | |      / /           |       |  |
           J  \  /"  (            l       |  |
           | ().'`-()/            |       |  |
          _.-"_.____/             l       l.-l
      _.-"_.+"|                  /        \.  \
/"\.-"_.-"  | |                 /          \   \
\_   "      | |                1            | `'|
  |ll       | |                |            i   |
  \\\       |-\               \j ..          L,,'. `/
 __\\\     ( .-\           .--'    ``--../..'      '-..
   `'''`----`\\\\ .....--'''
              \\\\                           -nabis  ''

</pre>
<p id="skeleton-desc" hidden="">
   A skeleton is posing next to a grave marker …
</p>

Frequently Asked Questions

Are fill in the blank fields text-based images?

Yes, the use of underscores to identify where to write answers is a type of text-based image. If these fields are not identified, users typically get no indication either that an answer is needed or what length it should be.

The alternative text for the field can be used to describe the expected input.

For example, a free-form input field could be expressed like this:

<p>The US capital
   <span role="img" aria-label="answer field">__________<span>
   is located on the Potomac River.</p>

While a field that expects a specific number of characters could be expressed like this: 

<p>The quick brown 
   <span role="img" aria-label="answer field - 3 letters">_ _ _<span>
   jumped over the lazy dog.</p>

Ideally, publishers should use the native HTML form fields for text input, but this is not always possible when the digital edition must exactly replicate the print.

Explanation

Although the name "ASCII art" is commonly used to describe text-based images, it is no longer the case that such artwork is composed solely of printable characters from the ASCII set. Support for Unicode on modern computers means that all printable characters from the Unicode planes are now usable.

The requirements for text-based images are largely the same as those for raster and vector images, but the implementation differs slightly. One key difference is that text-based images are indistinguishable from the surrounding text by default (i.e., they are not a separate format or have unique tagging, like JPEGs and SVGs).

To identify that a series of characters represent a text-based image, add the ARIA role attribute with the value "img" to a tag around the image (refer to Example 1). Text-based images are often wrapped in pre tags to retain their layout, but single-line images may, for example, be wrapped in span tags.

If you do not identify the text-based image with a role, assistive technologies will try to announce the text they contain. For images composed of punctuation, this may mean nothing is announced to users (they may only hear a pause). For images with alphanumeric characters, users may hear gibberish as the characters are read out.

With the image identified, the requirements become familiar to those for any image. Alternative text is typically required but cannot be provided by an alt attribute as it is only allowed on img elements. For text-based images, the aria-label or aria-labelledby attribute can be used to provide the alternative text (see Example 1).

For complex image, descriptions can be provided using the aria-describedby or aria-details attribute (see Example 4). For more information about describing images, refer to the Image Descriptions page.

It is also important to consider contrast issues with text-based images. Although not strictly required by WCAG that images have sufficient contrast (except where they contain actual words), the use of text characters allows authors control over the contrast between the text used to create the image and the background the images appear on. Using sufficient contrast ensures readers will be able to perceive the image.

Related Links