Understanding WCAG SC 1.4.4 Resize Text
Version and Level: 2.0/2.1/2.2 (Level AA)

This success criterion ensures that users can enlarge text up to 200 percent without assistive technology, ensuring improved readability without compromising the usability of the layout and content, except for captions and images of text.

Benefits:

  1. Improved Readability for Low Vision Users: Allows users with low vision to enlarge text for better readability without needing assistive technologies.
  2. Maintained Content Integrity: Ensures that text enlargement does not result in loss of content or functionality.

Main Objective:

To ensure that text can be resized up to 200% without assistive technology, without breaking the layout of the page.

Best Practices:

  • Ensure scalable content: Ensure that content is scalable to 200% without any loss of information or functionality.

  • Avoid text overlap when resized: Make sure text does not overlap or become unavailable when resized.

  • Maintain usability of UI components when resized: Ensure user interface components remain usable and active when text is resized.

  • Provide alternative CSS for scaling: Provide alternative CSS for scaling where browsers do not support zoom functionality.

  • Use relative measurements for consistent scaling: Use relative measurements such as percentages or ems for font sizes and other dimensions to ensure consistent scaling across different devices and screen sizes.

  • Avoid fixed pixel values for flexibility: Avoid using fixed pixel values for text and layout elements to allow for flexible resizing based on user preferences and device capabilities.

Examples & Explanation:

Example: A website allows users to resize text up to 200% without losing content or functionality.

What Should Be Avoided

HTML/CSS

              <div style="width: 300px;">
                <h1 style="font-size: 20px;">Welcome to Our Website</h1>
                <p style="font-size: 14px;">We provide a variety of services to meet your needs. Please contact us for more information.</p>
              </div>

Explanation:When the text is resized to 200%, it may overlap or extend beyond its container, making it difficult to read and interact with. There is no relationship between the elements and the container as the pixel unit is being used.

What Should Be Done

HTML/CSS

              <div style="width: 100%; max-width: 600px;">
                <h1 style="font-size: 1.25em;">Welcome to Our Website</h1>
                <p style="font-size: 1em;">We provide a variety of services to meet your needs. Please contact us for more information.</p>
              </div>

Explanation:Using relative units like ems to the text elements to ensures that the text scales properly within its container when resized, and percentage for the containers to maintain readability and functionality.

Next Up

Expand your understanding with SC 1.4.5 - Image of Text. Learn to make text in images accessible for all users.

Go to SC 1.4.5