Images of Text

Category:

Summary

Avoid images of text whenever possible, but ensure the text is perceptible and available to assistive technologies when their use is unavoidable.

Techniques

Provide the image text in the alt attribute. [WCAG 1.1.1 - A]
Ensure minimum contrast. [WCAG 1.4.3 - AA]

Examples

Example — Image heading

The alt attribute provides the text in the image.

<h2><img src="images/xl-hd.jpg" alt="Canto XL"/></h2>

Example — Image input button

The alt attribute on the input element provides the label for the image button text.

<input
    type="image"
    name="submit"
    src="enter.jpg"
    alt="Enter to Win!"/>

Explanation

Images of text are sometimes used in publications to ensure the presentation. For example, a specialized font the author cannot embed may be required for a heading, or the text is stylized in a way that can only be duplicated by an image.

Best practice is to use CSS to style the text whenever possible, as doing so allows users to change the font properties to best suit their needs. It also ensures that when users apply a theme, like a high-contrast reading mode, that the image text does not break the effect.

If images of text must be used, ensure that the alt attribute provides the full text of the image.

Note that using an image of text does not exclude the text from meeting WCAG contrast requirements. The foreground and background colors must still meet the minimum contrast requirements of 4.5:1 to meet success criterion 1.4.3.

Applies To

EPUB 3	EPUB 2	Audiobooks
Yes	Yes	Partial *

* Applies to the table of contents and any supplementary HTML resources.