Skip to main content

Fix guides · WCAG 2.2

Fixing small click and touch targets

2.5.8 Target Size (Minimum) · Level AA W3C: Understanding 2.5.8

New in WCAG 2.2: a pointer target must be at least 24 by 24 CSS pixels, or be spaced so that a 24-pixel circle centred on it does not overlap another target. The sample uses 16-pixel pagination buttons that touch each other.

Who this affects: People with tremors or limited dexterity, and anyone using a touch screen.

The failing markup

<div class="pager">
  <button type="button" style="width: 16px; height: 16px;">1</button>
  <button type="button" style="width: 16px; height: 16px;">2</button>
  <button type="button" style="width: 16px; height: 16px;">3</button>
</div>

How to fix it

  1. Give the control a minimum width and height of 24 CSS pixels. Padding counts; the visible icon can stay small.
  2. If the target has to stay small, add space around it instead, so neighbouring targets are at least 24 pixels apart centre to centre.

The change

<div class="pager">Removed:   <button type="button" style="width: 16px; height: 16px;">1</button>Removed:   <button type="button" style="width: 16px; height: 16px;">2</button>Removed:   <button type="button" style="width: 16px; height: 16px;">3</button>Added:   <button type="button" style="min-width: 24px; min-height: 24px;">1</button>Added:   <button type="button" style="min-width: 24px; min-height: 24px;">2</button>Added:   <button type="button" style="min-width: 24px; min-height: 24px;">3</button></div>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • axe-core: target-size, WCAG 2.5.8
  • ibm-equal-access: ibm-target_spacing_sufficient, WCAG 2.5.8

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • Exceptions include links inside a sentence, controls whose size the browser sets, and cases where an equivalent larger control exists on the same page.
  • The stricter 44 by 44 pixel size is 2.5.5 Target Size (Enhanced), a Level AAA criterion, and not required for Level AA.