WCAG 2.2 Guideline “1.4.4 Resize Text” Level AA

Introduction

WCAG 2.2’s “1.4.4 Resize Text” requires that text can be resized up to 200% without the loss of content or functionality, even without assistive technologies. This ensures that users with visual impairments can comfortably read and interact with web content.

This article provides practical methods for meeting this standard using HTML, CSS, and JavaScript, aimed at beginners.

1. Why Text Resizing is Necessary

• For users with visual impairments or older adults: Small text may be hard to read.
• For different devices: Small screens often require zooming or resizing.
• Web pages must remain functional and readable even when users zoom in with browser settings or OS configurations.

2. How to Meet the Standard

a. Use Relative Units

Instead of fixed units (px), use relative units (%, em, rem) to make text flexible for resizing.

CSS Example

body {
  font-size: 100%; /* Based on the browser's default font size */
}

h1 {
  font-size: 2em; /* 2 times the base font size */
}

p {
  font-size: 1em; /* Same as the base font size */
}

• em: Relative to the parent element’s font size.
• rem: Relative to the root element (html) font size.

b. Ensure Containers Adapt to Resizing

When text is resized, ensure that content containers prevent text from overlapping or being clipped.

CSS Example

.container {
  width: 90%; /* Use relative width instead of fixed width */
  max-width: 800px;
  padding: 1em;
  border: 1px solid #ccc;
}

c. Implement Responsive Design

Use media queries to adjust text sizes for different screen sizes and resolutions.

CSS Example

@media (max-width: 600px) {
  body {
    font-size: 120%;
  }
}

@media (min-width: 601px) {
  body {
    font-size: 100%;
  }
}

d. Support Browser Zoom

Text resizing often occurs through browser zoom. Design your content to remain functional under zoomed conditions.

Viewport Setting

<meta name="viewport" content="width=device-width, initial-scale=1">

3. Providing Additional Support

a. Add Text Size Controls

Allow users to manually adjust the text size within the page.

HTML and JavaScript Example

<button id="increaseFont">Increase Text Size</button>
<button id="decreaseFont">Decrease Text Size</button>
<div id="content" style="font-size: 1em;">
  <p>This is sample text.</p>
</div>

<script>
  const content = document.getElementById("content");
  const increaseFont = document.getElementById("increaseFont");
  const decreaseFont = document.getElementById("decreaseFont");
  let fontSize = 1;

  increaseFont.addEventListener("click", () => {
    fontSize += 0.1;
    content.style.fontSize = fontSize + "em";
  });

  decreaseFont.addEventListener("click", () => {
    fontSize = Math.max(0.5, fontSize - 0.1); // Limit font size to a minimum of 0.5em
    content.style.fontSize = fontSize + "em";
  });
</script>

4. Common Mistakes and Solutions

a. Using Fixed Units for Text Size

Mistake

p {
  font-size: 16px; /* Fixed size */
}

• Fixed sizes can cause layout issues when zoomed.

Solution

p {
  font-size: 1em; /* Relative unit */
}

b. Overlapping Elements When Resized

Mistake

<div style="font-size: 1em; width: 200px; height: 50px; overflow: hidden;">
  <p>Text gets clipped.</p>
</div>

Solution

<div style="font-size: 1em; width: auto; height: auto;">
  <p>Text displays correctly.</p>
</div>

5. Accessibility Benefits

a. Improved Accessibility for Users with Visual Impairments

Text resizing allows users with visual impairments or presbyopia to comfortably read content.

b. Compatibility Across Devices

Responsive designs ensure proper display across various screen sizes, providing a better user experience.

Conclusion

WCAG 2.2’s “1.4.4 Resize Text” requires that text be resizable up to 200% without loss of functionality or content.

Key Implementation Points

1. Use relative units (%, em, rem) for flexible text sizing.
2. Adopt liquid layouts to prevent layout issues when text is resized.
3. Provide user controls for text size adjustments for added accessibility.

By implementing these practices, you can create content that is inclusive and usable for all users.

We offer UUU Web Accessibility, a tool designed to simplify the implementation of web accessibility. If you’re interested in improving accessibility, check it out!