Target Size (Enhanced)

Who this affects

Users with motor impairments and tremor, and anyone on a touchscreen. Small targets mean repeated mis-taps and, in a checkout, costly mistakes.

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.

<h1>Your reading list</h1>

<!-- The difference:
       2.5.8 (AA)  targets at least 24 x 24 CSS px - OR smaller if the SPACING
                   exception is met (a 24px circle on each does not overlap).
       2.5.5 (AAA) targets at least 44 x 44 CSS px, with NO spacing exception.

     Everything below is 26 to 28 pixels with 6px gaps, so it clears the AA
     threshold comfortably and fails AAA. -->
<p class="row">
  <button type="button" aria-label="Bold">B</button>
  <button type="button" aria-label="Italic">I</button>
  <button type="button" aria-label="Underline">U</button>
</p>

<nav class="pager" aria-label="Pagination">
  <a href="#a">1</a><a href="#a">2</a><a href="#a">3</a><a href="#a">4</a><a href="#a">5</a>
</nav>

<p id="a">Page.</p>

<h1>Your reading list</h1>

<!-- FIX: every target is at least 44 x 44 CSS pixels. Note that the GLYPHS are
     barely larger than before - the growth is almost all padding, so the design
     does not have to look clumsy to conform.

     44px is not arbitrary. It is roughly the width of an adult fingertip
     contact patch, and it is the figure both Apple and Google use in their own
     platform guidelines - so meeting 2.5.5 usually means simply following the
     mobile design guidance you were already given. -->
<p class="row">
  <button type="button" aria-label="Bold">B</button>
  <button type="button" aria-label="Italic">I</button>
  <button type="button" aria-label="Underline">U</button>
</p>

<nav class="pager" aria-label="Pagination">
  <a href="#a">1</a><a href="#a">2</a><a href="#a">3</a><a href="#a">4</a><a href="#a">5</a>
</nav>

<p id="a">Page.</p>

<!-- The AAA exceptions, which are fewer than at AA:
       - INLINE targets, such as a link inside a sentence
       - an EQUIVALENT control of full size elsewhere on the page
       - a target whose presentation is ESSENTIAL, or is legally required
       - controls styled entirely by the user agent
     Crucially, the SPACING exception that 2.5.8 offers does not exist here:
     at AAA a small target with generous spacing around it still fails. -->

How to test it

Measure every interactive target. Icon-only buttons, close buttons, and dense toolbars are the usual failures. Padding counts toward the target, so a small icon in a large button passes.

• Automated

  Target dimensions are measurable from the rendered layout, but the exceptions require human judgement.

  This demo's failure is not machine-detectable. axe's target-size rule is written against the Level AA threshold of 24 x 24 CSS pixels (2.5.8). The targets on the failing page are 26 to 28 pixels, so the rule passes them. There is no rule for the AAA 44-pixel threshold at all, so a scan can never tell you whether 2.5.5 is met.

  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.

Related criteria

• 2.5.8 Target Size (Minimum) (Level AA)

In the specification

• Understanding 2.5.5 Target Size (Enhanced) — the W3C explanation, intent and exceptions
• 2.5.5 in the WCAG 2.2 Recommendation — the normative wording