WCAG 2.2 Demo Suite

1.4.4 Level AA Guideline 1.4 Distinguishable Added in WCAG 2.0 Partly detectable automatically

Resize Text

Text can be resized up to 200% without assistive technology and without loss of content or functionality.

Who this affects

Users with low vision who enlarge text rather than use a full screen magnifier.

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.4

Open the failing example in a new tab

fail.html — the problem

<h1>This week</h1>

<div class="promo">
  <p>Spring reading festival: three days of events across both shops, 12 to 14 April.</p>
</div>

<p><span class="cta">Book festival tickets</span></p>

<p class="locked">Members save 20% on all festival tickets and get priority booking
   from 1 March.</p>

Meets 1.4.4

Open the passing example in a new tab

pass.html — the fix

<h1>This week</h1>

<div class="promo">
  <p>Spring reading festival: three days of events across both shops, 12 to 14 April.</p>
</div>

<p><span class="cta">Book festival tickets</span></p>

<p class="flexible">Members save 20% on all festival tickets and get priority booking
   from 1 March.</p>

<!-- The rules that prevent nearly every failure of this criterion:
       - never set font-size in px on body text; use rem or unitless ratios
       - never set a fixed height on anything containing text; use min-height
       - never set font-size on the html element in px, because that overrides
         the user's own browser font-size setting
       - never add maximum-scale or user-scalable=no to the viewport tag

     Note how this overlaps its neighbours: 1.4.10 Reflow tests the same
     layout at 400%, and 1.4.12 Text Spacing tests the same containers with
     increased leading. Build for one and you have largely built for all three. -->

How to test it

Zoom the browser to 200% and check for clipped text, overlapping elements, controls pushed off screen, and fixed-height containers that hide overflow. Also test text-only zoom where the browser supports it.

  • Automated

    A scanner can flag a viewport meta tag that blocks zoom. Whether content survives 200% requires actually rendering and looking.

    Relevant axe rules:

    • meta-viewport
    • meta-viewport-large

  • 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