Definition for WCAG 2.0 success criterion 1.4.5
1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
- Customizable: The image of text can be visually customized to the user's requirements;
- Essential: A particular presentation of text is essential to the information being conveyed.
Note: Logotypes (text that is part of a logo or brand name) are considered essential.
The intent of this Success Criterion is to encourage authors to use "real" text in their web pages, rather than making use of images of text (<img> elements, CSS background images, rendered dynamically on <canvas> elements, SVG path data, etc.), unless the particular way in which text is visually presented is essential and/or cannot be achieved using regular technologies like HTML/SVG/CSS (including, but not limited to, the use of text-shadow, web fonts, gradient backgrounds, rounded corners).
"Real" text (generally, text present in the actual document markup, marked up as headings, paragraphs, lists, etc.) can be zoomed by users without any pixelation (a problem which occurs with bitmap images). It further enables people who require a particular visual presentation of text (such as font size, foreground and background color, font family, line spacing or alignment) to be able to adjust the text presentation in their browser as needed, or to copy/paste text content into different applications such as word processors.
Text is exempt from this requirement, meaning that it is acceptable to use images of text, if the page offers users mechanisms to change the presentation of the text (for instance, through options/settings that let users modify font size, color, etc.) or if it is essential that text be presented in a very specific way, as its presentation is essential in conveying meaning.
An example of where a particular presentation of text is essential to the information being conveyed would be a page containing samples of different typefaces for the purpose of illustrating their visual differences - while modern browsers may be able to present these using regular HTML and web fonts, in older browsers these samples would be presented with fallback regular fonts installed on the user's machine, which would strip the samples of their intended purpose and meaning. In this case, the use of bitmap images to present these samples can be deemed appropriate and essential.
Note: this success criterion is concerned solely with whether or not text needs to be presented using anything other than "real" HTML/SVG text. Whether the text currently presented as an image provides the correct alternative text is covered by separate SCs (like 1.1.1 Non-text Content (level A), and, in case of interactive controls, 2.4.4 Link purpose (in context) (level A), and 4.1.2 Name, role, value (level A))
Testing success criterion 1.4.5
Input into spreadsheet
- Fail
- Text not presented using markup. Record the nature of the failure:
- The page contains text which is not marked up as actual text in markup.
- The way in which this text is presented is not essential (it would retain the same information/meaning if presented in a different way, such as with a plain fallback font).
- No text customization options are available.
- Pass
-
- All text presented to the user has been marked up as text (e.g. pure HTML or SVG text).
-
Any text that is conveyed using images is exempt because either:
- The way in which the text is presented is essential (any potential change in presentation would result in a loss of information/meaning), or
- Text customization options are available.
How to test
- Verify that any of the text presented to the user is "real" text (e.g. HTML text, SVG text). The simplest method in most cases is to try and see if the letters/characters of the text can be highlighted/selected using the mouse. Alternatively, using the browser's developer tools, inspect the markup of the page and verify that "real" text is present in the document's markup.
-
If there are text elements that cannot be selected because they are coded as images (
<img>elements, CSS background images, rendered dynamically on<canvas>elements, SVG path data, etc.):- Determine if the text could conceivably be presented using regular HTML text (if necessary styled using CSS to provide a particular visual presentation, web font, etc.)
- If doing so would potentially lead to loss of meaning or content (for instance if CSS styling were to be removed or otherwise not rendered by the browser).
- If there are alternative ways in which a user could customize the presentation of the text (for instance, through options/settings that let users modify font size, color, etc.)