Allow Text Resizing Without Loss of Content or Functionality

Disabilities Affected: Visual

Success Criterion: 1.4.4

Level: AA

Content must remain readable and functional when text size is increased up to 200 percent. This means text shouldn’t overlap, get cut off, or require horizontal scrolling when zoomed.

Why It Matters

Users with low vision often need to enlarge text to read it comfortably. If the layout breaks or content becomes unusable when text is resized, these users cannot access the information.

Fixing the Issue

Use relative units like em, rem, or percentages for text container widths and heights, font sizes, and spacing, rather than fixed pixel values. Use fluid layouts that adapt to different content sizes. Test your pages by using the browser’s text zoom feature (Ctrl/Cmd + ‘+’) up to 200% and ensure no loss of information or functionality occurs, and horizontal scrolling is not introduced.

Good Code Example

Using relative units helps containers adapt to text size changes:

Markup

/* Using relative units for layout and text */
body {
  font-size: 100%; /* Base font size */
}

h1 {
  font-size: 2.5rem; /* Relative to root font size */
  margin-bottom: 1rem;
}

p {
  font-size: 1rem; /* Relative to root font size */
  line-height: 1.5; /* Relative to element's font size */
  margin-bottom: 1rem;
}

.container {
  width: 90%; /* Percentage-based width */
  max-width: 60em; /* Max width in relative units */
  margin: 0 auto; /* Centering */
  padding: 1rem;
}

.sidebar {
    width: 25%; /* Percentage-based width */
    float: left; /* Example layout technique */
    padding: 1rem;
}

.main-content {
    width: 70%; /* Percentage-based width */
    float: right; /* Example layout technique */
    padding: 1rem;
}

/* Consider using flexbox or grid for more robust fluid layouts */

Bad Code Example

Using fixed pixel values can cause layout issues when text is resized:

Markup

/* Using fixed pixel units - likely to break on zoom */
body {
  font-size: 16px; /* Fixed base */
}

h1 {
  font-size: 30px; /* Fixed size */
  margin-bottom: 15px; /* Fixed spacing */
}

p {
  font-size: 14px; /* Fixed size */
  line-height: 20px; /* Fixed line height */
  margin-bottom: 10px; /* Fixed spacing */
}

.container {
  width: 800px; /* Fixed width */
  height: 600px; /* Fixed height - text might overflow */
  overflow: hidden; /* Content could be hidden */
  border: 1px solid black;
}

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult