WCAG 2.2 Demo Suite

2.5.8 Level AA Guideline 2.5 Input Modalities Added in WCAG 2.2 Partly detectable automatically

Target Size (Minimum)

Targets are at least 24 by 24 CSS pixels, unless spacing, inline position, an equivalent control, or essential presentation applies. Undersized targets can pass if a 24px circle centred on each does not overlap its neighbours.

Who this affects

Users with motor impairments and tremor. Unlike 2.5.5 at AAA, this is a realistic AA baseline that most interfaces can meet.

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 2.5.8

Open the failing example in a new tab

fail.html — the problem

<h1>Your basket</h1>

<!-- FAILURE 1: a toolbar of 16x16 buttons packed 2px apart. Both the size and
     the spacing exception fail: 24px circles centred on adjacent targets
     overlap heavily. -->
<p class="toolbar">
  <button type="button" aria-label="Bold">B</button>
  <button type="button" aria-label="Italic">I</button>
  <button type="button" aria-label="Underline">U</button>
  <button type="button" aria-label="Strikethrough">S</button>
</p>

<!-- FAILURE 2: an 18x18 close button - the single most commonly undersized
     control on the web, and the one with the worst consequence when missed,
     because the surrounding area is usually a link. -->
<div class="card-ish">
  <button type="button" class="closer" aria-label="Remove Tidal Flats from basket">×</button>
  Tidal Flats, by A. Marsh — £12.99
</div>

<!-- FAILURE 3: 20x20 quantity steppers, tightly packed. -->
<p class="stepper">
  <button type="button" aria-label="Decrease quantity">−</button>
  <input type="text" class="qty" value="1" aria-label="Quantity">
  <button type="button" aria-label="Increase quantity">+</button>
</p>

Meets 2.5.8

Open the passing example in a new tab

pass.html — the fix

<h1>Your basket</h1>

<!-- FIX 1: 24x24 minimum via padding, with 2px of margin. The glyphs are the
     same size; only the hit area grew. -->
<p class="toolbar">
  <button type="button" aria-label="Bold">B</button>
  <button type="button" aria-label="Italic">I</button>
  <button type="button" aria-label="Underline">U</button>
  <button type="button" aria-label="Strikethrough">S</button>
</p>

<!-- FIX 2: the close button is 44x44 - above the 24px AA floor and also
     meeting 2.5.5 Target Size (Enhanced) at AAA. Destructive controls deserve
     the larger target. -->
<div class="card-ish">
  <button type="button" class="closer" aria-label="Remove Tidal Flats from basket">×</button>
  Tidal Flats, by A. Marsh — £12.99
</div>

<!-- FIX 3: steppers at 44x44. -->
<p class="stepper">
  <button type="button" aria-label="Decrease quantity">−</button>
  <input type="text" class="qty" value="1" aria-label="Quantity">
  <button type="button" aria-label="Increase quantity">+</button>
</p>

<!-- The five exceptions, worth learning because they come up constantly:
       1. Spacing  - a smaller target passes if a 24px circle centred on it
                     does not overlap the circle of any adjacent target.
       2. Equivalent - the same action is available elsewhere at full size.
       3. Inline   - a link inside a sentence is exempt, because you cannot
                     resize it without breaking the line. -->
<p class="inline-note">Read our <a href="#p">delivery policy</a> for details —
   this inline link is exempt under the inline exception.</p>
<!--   4. User agent control - you did not style it.
       5. Essential - the exact size is required, as on an interactive map.

     2.5.8 at AA is 24px; 2.5.5 at AAA is 44px. Note the AA rule counts
     SPACING as an alternative to size, which the AAA rule does not. -->

<p id="p">Delivery policy.</p>

How to test it

Measure each target. If under 24×24, check the spacing exception by testing whether 24px circles centred on adjacent targets overlap. Tightly packed icon rows and small close buttons are the usual failures.

  • Automated

    Size and spacing are computable, and axe covers a good share of cases, but the exceptions still need review.

    Relevant axe rules:

    • target-size

  • 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