Ensure Content Adapts to User-Adjusted Text Spacing

Disabilities Affected: Cognitive, Visual

Success Criterion: 1.4.12

Level: AA

Content must remain readable and functional when users override text spacing styles. Specifically, no loss of content or functionality should occur when all of the following are set:

Line height (line spacing) to at least 1.5 times the font size.
Spacing following paragraphs to at least 2 times the font size.
Letter spacing (tracking) to at least 0.12 times the font size.
Word spacing to at least 0.16 times the font size.

Why It Matters

Users with low vision or cognitive disabilities like dyslexia may use custom stylesheets or browser extensions to increase spacing between lines, words, and letters to improve readability. If the website’s layout breaks or content overlaps/disappears when these spacing properties are adjusted, the content becomes unusable for these users.

Fixing the Issue

Use fluid layouts and avoid fixed heights on containers that hold text. Ensure containers can expand vertically to accommodate increased line and paragraph spacing. Avoid using CSS techniques that rely on precise character counts or pixel-perfect layouts that break when letter or word spacing changes. Test your pages using browser developer tools or extensions that allow overriding text spacing properties to verify that content reflows correctly and remains usable.

Good Code Example

CSS using relative units and avoiding fixed heights:

Markup

.text-container {
  max-width: 60em; /* Limits line length, good for readability */
  /* No fixed height - allows container to grow */
  padding: 1em;
  border: 1px solid #ccc;
}

.text-container p {
  font-size: 1rem; /* Use relative units */
  /* Default line-height, letter-spacing, word-spacing allows overrides */
  margin-bottom: 1em; /* Allows paragraph spacing overrides */
}

/* Good practice: Set a base line-height that's already reasonable */
body {
   line-height: 1.5;
}

Bad Code Example

Fixed height container that cuts off text when spacing increases:

Markup

.fixed-height-box {
  width: 300px;
  height: 100px; /* Fixed height */
  overflow: hidden; /* Content will be cut off if text spacing increases */
  border: 1px solid black;
  padding: 5px;
}

.fixed-height-box p {
  font-size: 14px;
  line-height: 1.2; /* Tight line height */
  letter-spacing: -0.5px; /* Tight letter spacing */
  margin: 0;
}
/* If a user applies custom styles to increase spacing, */
/* text within this box will likely get cut off. */

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