Web checklist

Checkpoint AA1.4.5: *WCAG 2.0 AA* Images of Text

Use text to convey information rather than images. An image of text may be used if it is essential to the information being conveyed or if the image of text can be visually customized to the user's requirements.


Rationale

Developers must use text, not images of text, to allow people with disabilities to adjust the text presentation according to their preferences. For example, a user may require a particular text font size, font family, foreground and background color.

There are two exceptions:

Required development and unit test techniques


To comply with this checkpoint, you must meet the following technique. The guidance provided is based on WCAG 2.0 Level AA Success Criterion 1.4.5 (link resides outside of ibm.com).

  1. Separate presentation: Distinguish information and structure from presentation to enable different presentations.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

General examples

  1. Separate presentation: Distinguish information and structure from presentation enable different presentations.

    General example 1

    The visual presentation of a Web page contains headings, lists, tables and paragraphs, which are coded with HTML heading, list, table and paragraph structural elements. Embedding presentation markup, such as a font change, in the HTML structural elements is avoided. Instead, CSS classes are embedded in the structural elements to achieve the desired presentation. Assistive technologies may choose to ignore the CSS and interact with the HTML structural elements directly or extend the CSS classes to present a more accessible user interface to people with disabilities. In doing so, there is no need to provide an image of text since the text presentation is controlled by CSS.

    For additional information, refer to WCAG 2.0 examples for separating information and structure from presentation to enable different presentations (link resides outside of ibm.com) .

    Required unit tests for general development technique 1

    Use available tools to disregard the style of the content. Manually review the content to confirm that no meaningful text is removed from the content.

    Mobile Safari:

    Mobile Safari does not support disabling style sheets. Therefore, use a desktop browser and user agent switcher to perform the required unit tests.


CSS examples

  1. Separate presentation: Distinguish information and structure from presentation enable different presentations.

    CSS example 1

    Use CSS to control the visual presentation of text. For additional information, refer to the WCAG 2.0 examples for using CSS to control visual presentation of text (link resides outside of ibm.com) .

    CSS example 2

    Use CSS to replace text with images of text and provide user interface controls to switch. For additional information, refer to the WCAG 2.0 examples for using CSS to replace text with images of text and providing user interface controls to switch (link resides outside of ibm.com) .

    Required unit tests for CSS development technique 1

    Use available tools to disregard the style of the content. Manually review the content to confirm the following:

    • Any styling and color of the text reverts to the default user agent/system to ensure that CSS properties were used to control the visual presentation of text.
    • When images of text were placed in the content by CSS, one of the following is true:
      • Text now appears in place of the image
      • The Web page includes a control that enables users to select an alternate presentation. Confirm that when the control is activated, the resulting page includes text (programmatically-determined text) where images of text are inserted.

    Mobile Safari:

    Mobile Safari does not support disabling style sheets. Therefore, use a desktop browser and user agent switcher to perform the required unit tests.


Recommended development techniques

Although you are not required to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application. See WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 1.4.5 (link resides outside of ibm.com) for a list of techniques and examples.


Copyright 2011, 2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.