WCAG 2.5.8 — Target Size (Minimum)

What this requires

Pointer input targets are at least 24×24 CSS pixels, except when the target has at least 24 CSS pixels of spacing between it and adjacent targets, when the target is in a sentence or block of text, when the target is determined by the user agent, or when a particular presentation is essential. Compared to 2.5.5 (AAA, 44px), the AA criterion is more forgiving and applies the spacing escape hatch.

How AI coding tools fail this

When asked to "make these icon controls compact", AI tools generate 16px or 20px buttons placed close together. Touch users miss the target; users with motor impairments are locked out.

The second pattern: pagination links with no padding around the digits — the hit area is the height of the digit characters and the spacing between numbers is also tight.

The third: navigation breadcrumbs separated by single-character spaces, where each crumb is a clickable link with no padding. The 24-pixel spacing escape doesn't apply when the targets are so close together.

Failing examples

Tight icon toolbar:

<div className="flex">
  <button className="h-5 w-5"><BoldIcon /></button>
  <button className="h-5 w-5"><ItalicIcon /></button>
  <button className="h-5 w-5"><LinkIcon /></button>
</div>

Passing examples

Use 24px buttons (or larger) with at least 24px spacing:

<div className="flex gap-1">
  <button className="flex h-6 w-6 items-center justify-center">
    <BoldIcon aria-hidden="true" />
    <span className="sr-only">Bold</span>
  </button>
  <button className="flex h-6 w-6 items-center justify-center">
    <ItalicIcon aria-hidden="true" />
    <span className="sr-only">Italic</span>
  </button>
  <button className="flex h-6 w-6 items-center justify-center">
    <LinkIcon aria-hidden="true" />
    <span className="sr-only">Link</span>
  </button>
</div>

If the design demands smaller visuals, separate the targets so the 24-pixel spacing exception applies:

<div className="flex gap-6">
  <button className="h-4 w-4">{/* ... */}</button>
  <button className="h-4 w-4">{/* ... */}</button>
</div>

Edge cases

Spacing exception. A target smaller than 24×24 passes if it has at least 24 CSS pixels of spacing to the next target. The spacing is measured edge-to-edge.
Inline text links are exempt — line height keeps them separated.
Native controls are exempt — user agent decides their size.
2.5.5 (AAA, 44px) is stricter and doesn't have the spacing exception in the same way.
Padding extends hit area without changing the visual. A 16-px icon with 4-px padding on each side is a 24-px hit target.

How Jeikin handles this

The scanner measures rendered button and link dimensions plus the edge-to-edge spacing to the nearest sibling target. Findings under 24×24 with insufficient spacing are mapped to WCAG 2.5.8. The dashboard tracks both dimensions and the surrounding spacing.

References

W3C — Understanding 2.5.8 Target Size (Minimum) (opens in new tab)