Identify and describe text-based imagery so that assistive technologies do not ignore, or attempt to read out, the text they contain.
- Use the
imgto identify text-based images. [[WCAG-1.3.1]]
- Provide alternative text and/or an extended description. [[WCAG-1.1.1]]
- Ensure sufficient contrast between text and background. [[WCAG-1.4.3]]
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.
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
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
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
img elements. For text-based images, the
aria-labelledby attribute can be used to provide the alternative text (see
For complex image, descriptions can be provided using the
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.