How to fix: Tap targets must be big enough
Buttons, links and other controls should be at least 24×24 CSS pixels, or be spaced so that a 24px circle centred on each does not overlap another target, so people with limited dexterity or on a touchscreen do not hit the wrong one. New in WCAG 2.2.
The fix
Make clickable targets at least 24×24 CSS pixels, or space smaller ones so that a 24px circle centred on each does not overlap another target (WCAG 2.2).
Who this affects
Someone with a hand tremor, or anyone tapping one-handed on a moving bus, aims for a 16px close icon and lands on the link beside it. The result is a page they now have to navigate back from, a row deleted when they meant to edit it, or a dialog dismissed before they had read it. The same thing happens on desktop for people driving the pointer with a head tracker, a joystick or a stylus they cannot grip steadily, because the pointer overshoots and settles on the neighbouring control.
Before and after
<a href="/x" style="display:inline-block;width:16px;height:16px">↗</a><a href="/x" style="display:inline-block;width:24px;height:24px">↗</a>Where this usually comes from
- Icon-only buttons sized to the glyph, so a 16px SVG with no padding around it becomes a 16×16 target.
- Row actions in a data table (edit, duplicate, delete) drawn as 16px icons and packed 4px apart, so the targets are both under 24px and too close together to earn the spacing exception.
- A design-system icon button whose `sm` or `xs` variant lands under 24px once the icon size and padding are added together.
- Close buttons on toasts, cookie banners and modals where the × is sized by font-size alone.
- Custom checkboxes and radios styled with `appearance: none` down to a fixed 16px box, with no padding and no clickable label wrapping them.
Checking it yourself
Open Chrome DevTools, hover or select the control in the Elements panel and read the dimensions shown in the highlight overlay, or select it and run $0.getBoundingClientRect() in the console; both report CSS pixels at 100% browser zoom. Anything under 24 in either direction then needs the exceptions checked before you call it a failure: a link sitting inside a sentence of body text is exempt, and so is a control whose size the browser sets and the CSS never overrides. For everything else, apply the spacing exception: a 24px diameter circle centred on the target's bounding box must not overlap another target, or the circle of another undersized target. Finish at a phone width on a real device, re-measuring the controls that move or shrink at that breakpoint, which is where clustered row actions and close buttons fail first.
A scanner finds this one automatically. What it cannot judge, and how the score is built, is on how we test.
Related fixes
Check your site for this issue
Scan any page free against WCAG 2.2 AA and get every automatically detected issue with its fix.