WCAG 2.2 Demo Suite

1.4.12 Level AA Guideline 1.4 Distinguishable Added in WCAG 2.1 Not detectable automatically

Text Spacing

No loss of content or functionality when the user sets line height to 1.5× the font size, paragraph spacing to 2×, letter spacing to 0.12×, and word spacing to 0.16×.

Who this affects

Users with dyslexia and low vision who apply their own spacing overrides through a browser extension or user stylesheet.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.4.12

Open the failing example in a new tab

fail.html — the problem

<div class="spaced">
  <h1>Delivery</h1>

  <!-- With the user's spacing applied, the last line of this card is cut off
       and there is no way to reach it. -->
  <div class="card">
    <p>We deliver across the county on Tuesdays and Fridays. Orders placed
       before noon are usually dispatched the same week.</p>
  </div>

  <!-- The label no longer fits inside its fixed-width pill. -->
  <p><span class="pill">Track your delivery</span></p>
</div>

Meets 1.4.12

Open the passing example in a new tab

pass.html — the fix

<div class="spaced">
  <h1>Delivery</h1>

  <div class="card">
    <p>We deliver across the county on Tuesdays and Fridays. Orders placed
       before noon are usually dispatched the same week.</p>
  </div>

  <p><span class="pill">Track your delivery</span></p>
</div>

<!-- The four values a page must survive, set by the USER through a browser
     extension or user stylesheet:
       line-height:    at least 1.5 x the font size
       paragraph gap:  at least 2 x the font size
       letter-spacing: at least 0.12 x the font size
       word-spacing:   at least 0.16 x the font size

     You do not have to PROVIDE these controls. You have to not break when
     someone else applies them.

     The rule of thumb that prevents almost every failure: never put a fixed
     height on anything that contains text. Use min-height, or let the content
     size the box. -->

How to test it

Apply the four spacing overrides via a bookmarklet or devtools and look for clipped text, overlapping elements, and text escaping its container. Fixed heights on text containers are the usual cause.

  • Automated

    Requires applying the overrides and visually inspecting the result.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification