Web checklist

Checkpoint AA1.4.4: *WCAG 2.0 AA* Resize text

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.


Rationale

To view Web content, people with mild vision impairments must have the ability to resize Web content without the assistance of magnification technology. Typically, the user can change this setting in a browser. However, if a Web content user has an older version of a browser that does not support a zoom function, the development techniques in this checkpoint demonstrate how to make the Web content scalable to avoid overlapping or truncating the text.

Note for iOS platform: On iOS mobile devices, testing with the built-in Zoom feature is considered sufficient to meet the requirements of this checkpoint.

For more information, refer to the Intent of this Success Criterion section of Understanding WCAG 2.0 Level AA Success Criterion 1.4.4 (link resides outside of ibm.com).

Required development and unit test techniques


To comply with this checkpoint, you must meet at least one of the following techniques. These techniques are defined in WCAG 2.0 Level AA Success Criterion 1.4.4 (link resides outside of ibm.com).

  1. User agent zoom: Use a technology that has commonly available user agents that support zoom.
  2. Resizable content: Ensure that text containers resize when the text resizes and use measurements that are relative to other measurements in the content by using one or more of the following techniques:
  3. User controls: Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent.
  4. Preserve all content: Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize.

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

General examples

  1. User agent zoom: Use a technology that has commonly available user agents that support zoom.

    To comply with this technique, you must implement the following example.

    General example 1

    Browsers provide a zoom function that scales an HTML/CSS Web page content uniformly.

    Required unit tests for general development technique 1

    Refer to Required unit tests for general development techniques 1, 2 and 4.

  2. Resizable content: Ensure that text containers resize when the text resizes and use measurements that are relative to other measurements in the content.

    General example 2

    Use a liquid layout.

    For more information, refer to the WCAG 2.0 examples for using a liquid layout (link resides outside of ibm.com).

    There are also development technique 2 examples in the CSS and scripting sections below.

    Required unit tests for general development technique 2

    Refer to Required unit tests for general development techniques 1, 2 and 4.

  3. User controls: Provide controls on the Web page that enables users to incrementally change the size of all text on the page up to 200 percent.

    For more information, refer to the WCAG 2.0 examples for providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent (link resides outside of ibm.com).

    Required unit tests for general development technique 3

    Manually review the content to confirm that a mechanism is provided on the Web page to incrementally change the size of all text on the page up to 200 percent. Use the control to ensure that the text size can be increased to 200 percent of the original size and back. Ensure scaling to 200 percent does not cause any loss of content or functionality and does not cause the text, image or controls to be clipped, truncated or obscured.

  4. Preserve all content: Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize.

    For more information, refer to the WCAG 2.0 examples for ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize (link resides outside of ibm.com).

    Required unit tests for general development techniques 1, 2 and 4

    Resize the rendered text up to 200 percent using the text resize option in the browser and ensure that no content or functionality is lost and does not cause the text, image or controls to be clipped, truncated or obscured.


CSS examples

  1. User agent zoom: Use a technology that has commonly available user agents that support zoom.

    There is no CSS example for this technique. Refer to general example 1.

  2. Resizable content: Ensure that text containers resize when the text resizes and use measurements that are relative to other measurements in the content.

    To comply with this technique, you must implement one or more of the following examples.

    CSS example 1

    Specify the size of text containers using em units.

    For more information, refer to the WCAG 2.0 examples for specifying the size of text containers using em units (link resides outside of ibm.com).

    CSS example 2

    Use techniques for relative measurements.

    For more information, refer to the WCAG 2.0 examples for using percent for font sizes (link resides outside of ibm.com), using named font sizes (link resides outside of ibm.com) and using em units for font sizes (link resides outside of ibm.com).

    Required unit tests for CSS development technique 1 and 2

  3. User control: Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent.

    There is no CSS example for this technique. For more information, refer to the WCAG 2.0 examples for providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent (link resides outside of ibm.com).

  4. Preserve all content: Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize.

    There is no CSS example for this technique. For more information, refer to the WCAG 2.0 examples for ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize (link resides outside of ibm.com).


Scripting examples

  1. User agent zoom: Use a technology that has commonly available user agents that support zoom.

    There is no scripting example for this technique. Refer to general example 1.

  2. Resizable content: Ensure that text containers resize when the text resizes and use measurements that are relative to other measurements in the content.

    Scripting example 1

    Calculate the size and position of text containers in a way that scales with the text size.

    For more information, refer to the WCAG 2.0 examples for calculating size and position in a way that scales with text size (link resides outside of ibm.com).

    Required unit tests for scripting development technique

    Refer to the Required unit tests for general development techniques 1, 2 and 4.

  3. User control: Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent.

    There is no scripting example for this technique. For more information, refer to the WCAG 2.0 examples for providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent (link resides outside of ibm.com).

  4. Preserve all content: Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize.

    There is no scripting example for this technique. For more information, refer to the WCAG 2.0 examples for ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize (link resides outside of ibm.com).


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.4 (link resides outside of ibm.com) for a list of techniques and examples.


©2011 IBM Corporation

Last updated May 1, 2011.

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.