Text spacing overrides and the ADA

Four settings, no loss

Some readers, especially people with dyslexia or low vision, load their own style sheet or extension that loosens the spacing of text. The criterion says no content or functionality may be lost when a user sets all four of these, changing nothing else:

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

Your page does not have to look like that by default. It has to survive it: no clipped words, no text spilling over other text, no controls pushed out of reach. The exception covers languages and scripts that do not use one or more of these properties; only the properties that exist for that script apply.

Where public pages lose content

The fragile patterns are consistent: accordion headers with a fixed height, labels placed over fields by absolute positioning, notice summaries cut to two lines, and inputs with a fixed pixel height. All of them look tidy in a design file and fall apart when spacing grows.

These are common on permit portals, school calendars and benefits screeners built from component kits. A deadline or eligibility sentence that gets cut off is more than cosmetic; the resident may never see the sentence that says the form closes on Friday.

Accordion headers with a fixed height

A fixed height plus a pixel line height leaves no room when letters spread out and words wrap.

.faq-head {
  height: 44px;
  line-height: 44px;
  overflow: hidden;
}

.faq-head {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}

Labels positioned over fields

A label absolutely positioned inside a field overlaps the typed text once the spacing grows. Keep the label in the flow.

.field { position: relative; height: 48px; }
.field label { position: absolute; top: 14px; left: 12px; }
.field input { height: 48px; padding-top: 18px; }

.field { display: grid; gap: 0.25rem; }
.field label { font-size: 0.875rem; }
.field input { min-height: 2.75rem; padding: 0.5rem 0.75rem; }

Clamped summaries and short inputs

Cutting a summary to two lines hides the end of the sentence when spacing increases. Show the full text, or give the reader a way to open it.

.notice-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
  overflow: hidden;
}

.notice-summary { max-width: 65ch; }
/* full text is visible; use a details element if it is long */

input[type="text"] { height: 30px; padding: 0; }

input[type="text"] { min-height: 2.25rem; padding: 0.25rem 0.5rem; }

What about native apps?

The criterion is written for content implemented with markup languages, and the major mobile platforms do not give users per-app overrides for these four properties in the same way a browser style sheet does. There is therefore no direct native test. The practical carry-over is to avoid fixed heights around text and to let containers grow, which is covered under the text resizing criterion.

A test routine

1. Apply the four values to the page with a text-spacing bookmarklet, a user style extension, or a rule added in developer tools that targets all elements: line height 1.5, paragraph spacing 2, letter spacing 0.12 and word spacing 0.16, all relative to the font size.
2. Do not change anything else. If the page needs other changes to survive, the test has failed.
3. Scroll through every template: home page, forms, tables, dialogs, menus, error messages.
4. Look for clipped words, overlapping text, truncated labels and controls you can no longer reach.
5. Repeat in the languages the site offers; longer words wrap sooner.

Common mistakes and a ship-it list

• Treating the four values as a design requirement instead of something the page must tolerate.
• Blocking user style sheets with !important on spacing properties; the user's rule has to win.
• Text in images or canvas, where spacing cannot be changed at all.
• Fixed heights on buttons, tabs, table rows and cards.

Ship it when:

• With all four values applied, no text is clipped or overlapped.
• Controls stay visible, reachable and labelled.
• Containers use min-height or content height, not fixed height, around text.
• No important spacing property is locked with !important.

Keep the neighboring criteria in mind: resizing text and reflow cover similar mechanics. For a plan to work through the findings, see first steps.

Sources

• Understanding SC 1.4.12: Text Spacing (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.