WCAG 2.5.8 Target Size (Minimum): The 24px Rule, Its Five Exceptions, and the Dragging Fix Most Teams Skip

Tiny close buttons, cramped pagination links and icon rows with no breathing room are among the most common usability problems on the web. WCAG 2.2 finally put a number on them. Success Criterion 2.5.8 Target Size (Minimum), Level AA, requires pointer targets to be at least 24 by 24 CSS pixels, unless an exception applies. Its companion, 2.5.7 Dragging Movements, requires that anything operated by dragging can also be done with a simple single-pointer action.

Both are new in WCAG 2.2. They are not yet the EAA's legal floor, but they are cheap to meet now and expensive to retrofit later.

Where this sits in EAA compliance

Today most EAA programmes benchmark against WCAG 2.1 AA via EN 301 549. Taylor Wessing reported in March 2026 that the revised EN 301 549 v4.1.1 will likely reference WCAG 2.2, with approval expected in the second half of 2026. EqualWeb's August 2026 review recommends building and testing to WCAG 2.2 AA so you satisfy the current citation and absorb the update. Target size is a good example of why: it is a small, mechanical change that benefits touch, tremor, and low-dexterity users immediately.

What 2.5.8 actually requires

The size of the target, including its padding, must be at least 24 by 24 CSS pixels. Note that the target is the clickable or tappable area, not the visible icon. A 16px icon inside a 24px button passes.

There are five exceptions:

1. Spacing. Undersized targets pass if a 24 CSS pixel diameter circle centred on the target's bounding box does not intersect another target or the circle of another undersized target. In plain terms, small targets are fine if they are spaced far enough apart.
2. Equivalent. The function is available through another control on the same page that does meet the size requirement.
3. Inline. The target sits inside a sentence or its size is constrained by the line height of surrounding text. Links within a paragraph are the standard case.
4. User agent control. The size is determined by the browser and not modified by the author, such as a native checkbox left at default.
5. Essential. A particular presentation is legally or functionally required.

A frequent misreading: the spacing exception does not mean 24px of margin. It is about the circle geometry, so two 16px icons need enough gap between them that their 24px circles do not overlap.

This is the minimum level. The stricter Level AAA criterion 2.5.5 asks for 44 by 44 CSS pixels, which is a sensible design target for primary actions.

The usual failure patterns

• Close "X" buttons on banners, modals and cookie notices.
• Pagination numbers and carousel dots.
• Tag chips and filter pills with tight gaps.
• Table row action icons (edit, delete, more).
• Date picker day cells on mobile.
• Footer link lists with minimal line spacing, where links are standalone and not inline.
• Star ratings and quantity steppers in checkout.

CSS patterns that pass

Set a minimum size on the interactive element itself:

.icon-button {
  min-inline-size: 24px;
  min-block-size: 24px;
  padding: 4px;
}

For a small visual element with a larger hit area, extend the target with a pseudo-element rather than changing the layout:

.chip-close {
  position: relative;
  inline-size: 16px;
  block-size: 16px;
}
.chip-close::after {
  content: "";
  position: absolute;
  inset: -4px; /* 16px + 8px = 24px hit area */
}

Check that the expanded area does not overlap a neighbouring target, since overlapping hit areas create new problems. Use gap on flex and grid containers to satisfy the spacing exception where the visual design needs small controls.

Dragging Movements: 2.5.7

If a function uses dragging, a single-pointer alternative must exist unless dragging is essential. Typical offenders are sortable lists, kanban boards, range sliders, image croppers, map panning and drag-to-upload. Alternatives include up and down buttons on list items, a number input beside a slider, arrow-key support, or click-to-place patterns.

For native mobile apps, Deque's guidance on WCAG 2.2 and native mobile accessibility interprets single pointer as a single-finger tap and translates 24 CSS pixels to 24pt on iOS and 24dp on Android. Platform design guidance is more generous (commonly 44pt on iOS and 48dp on Android), so following those conventions will comfortably clear the WCAG minimum.

A five-minute test

1. Run an automated check. axe-core includes a target-size rule that flags undersized, closely spaced targets; treat it as a first pass and not a verdict.
2. In browser DevTools, inspect the computed box of icon buttons, links in lists and form controls.
3. Draw the 24px circle mentally, or use an overlay bookmarklet, for any target under 24px and check neighbours.
4. Tab through the page at 320 CSS pixels wide, where layouts compress and targets crowd.
5. For every drag interaction, complete the task using only single clicks or taps and the keyboard.
6. On a real phone, try the primary journey one-handed.

Making it stick

Fix target size in the design system once, in the button, icon button, chip and pagination components, and every product using them inherits the fix. That is far cheaper than finding hundreds of instances in an audit.

Document exceptions you rely on (inline, equivalent, essential) in your conformance notes, since authorities expect sellers to be able to show how they meet requirements rather than simply claim it.

The bottom line

The 24px rule is one of the easiest WCAG 2.2 criteria to meet and one of the most noticeable to users with motor impairments. Set minimum sizes in your components, replace drag-only interactions with simple alternatives, and test at narrow widths. You will be ahead of the standards update rather than behind it.