Look at the smallest clickable things in your product: the x on a filter chip, the three-dot menu at the end of a table row, the page numbers under a results list, the dismiss button on a cookie banner. In a design file they look tidy. In the browser they are often 16 pixels wide and a few pixels from their neighbours. A person with a hand tremor, limited dexterity, or just a thumb on a moving train then has a good chance of activating the wrong one.
WCAG 2.2 added Success Criterion 2.5.8, Target Size (Minimum), at Level AA to deal with exactly this. It is easy to fail without noticing, and easy to fix once you know where to look.
What 2.5.8 actually requires
The criterion says the size of the target for pointer inputs must be at least 24 by 24 CSS pixels, unless one of five exceptions applies. The target is the area that responds to activation. Padding that is part of the clickable control counts, and empty margin around it does not.
The exceptions are narrower than they first look. Spacing lets an undersized target pass if a 24 pixel circle centred on it does not intersect another target or the circle of another undersized target. Equivalent applies when the same function is available through a different control on the page that does meet the minimum. Inline covers targets within a sentence, or whose size is constrained by the line height of surrounding text. User agent control covers targets the browser sizes and the author has not modified. Essential covers cases where the size is essential to the information conveyed, or is legally required.
This is a minimum. Target Size (Enhanced), SC 2.5.5, is a Level AAA criterion that asks for 44 by 44 CSS pixels, and W3C’s Understanding document points to it for important controls. For anything people hit repeatedly, treat 24 as the floor and not the goal.
Where it fails in real interfaces
Row actions in data tables
Icon-only edit, delete and overflow buttons are the most common failure. A 16 by 16 pixel icon with no padding, sitting 4 pixels from the next icon, fails twice. It is undersized, and it is too close to its neighbour for the spacing exception.
Close buttons on chips, banners and dialogs
Dismiss icons are usually tiny and sit right beside something else clickable, such as the chip label, a link in the banner or a Save button. Banners add a second problem, because the dismiss control also has to stay visible and reachable. We covered that side of it in Sticky Headers and Cookie Banners Are Hiding Your Keyboard Focus.
Pagination and carousel dots
Numbered pagination styled as a row of small links, and carousel indicator dots, are classic cases. Each target can be 8 to 12 pixels across with a few pixels between them.
Stacked link lists
Footer and sidebar link columns are not inline, because they are not inside a sentence. The Inline exception does not rescue them. With a tight line height each link is shorter than 24 pixels, and its neighbours sit too close for the Spacing exception.
Custom form controls
A restyled 16 pixel checkbox or radio with no associated label is a small target on its own. A properly associated label is also a target, which is one more reason to wire labels correctly.
Fixing it without a redesign
Add padding to the control rather than enlarging the icon, so the visual design stays the same:
css
.icon-button { box-sizing: border-box; display: inline-grid; place-items: center; min-inline-size: 24px; min-block-size: 24px; padding: 4px;}.icon-button svg { inline-size: 16px; block-size: 16px;}
When the visible control has to stay small, such as in a dense table, extend the hit area with a pseudo-element:
css
.row-action { position: relative;}.row-action::after { content: ""; position: absolute; inset: -4px;}
That turns a 16 pixel control into a 24 by 24 pixel target. Leave enough room that neighbouring hit areas do not overlap, or you trade one problem for another.
If you cannot enlarge a target, use spacing. Each undersized target gets a 24 pixel circle, so two circles only avoid each other when their centres are at least 24 pixels apart. For two 16 pixel icon buttons side by side, that works out to a gap of at least 8 pixels. Check the same circle against every other target nearby, including the row link next to the icons.
For link lists, set the links to display: block and give them block padding so the clickable area fills the row. If you also have drag interactions, WCAG 2.5.7 asks for a single-pointer alternative, which we cover in If Your Interface Needs Dragging, It Needs a Second Way In.
The exceptions people misuse
Equivalent only works if the other control also meets the minimum and is on the same page. Inline covers a link inside a paragraph, not a link in a list. Essential rarely applies to interface chrome, and “our design system uses 16 pixel icons” is not essential. User agent control applies to an unstyled native control, but once you restyle it, the size is yours to answer for.
How to test it
Use your browser’s inspector to look at the clickable element itself, not the icon inside it. Check its rendered width and height including padding. Then look at the neighbours, because the Spacing exception depends on what sits next to the target. Test on a real touch device as well, on your busiest screens first: tables, filters, banners, pagination and footers.
Some automated checkers flag undersized targets, which helps with triage. They cannot judge the spacing exception reliably or decide whether something is essential, so a person still has to review the flagged items. Our piece on why a 100 Lighthouse score does not mean you are compliant makes the same point more broadly.
Aim above the minimum
On touch screens, primary actions deserve more than 24 pixels. Our mobile accessibility guide recommends larger touch targets, and 44 by 44 pixels, the SC 2.5.5 figure, is a sensible target for anything central to a task. Bigger targets help people with tremors, but they also help everyone who is walking, holding a child or using one hand.
Next step
Target size is one of the cheaper accessibility fixes: a few lines of CSS, and usually no redesign. The hard part is finding every undersized control in a large product. If you want a WCAG 2.2 AA review of your key flows, or want to audit, fix and document a defined scope on a fixed timeline through the 30-Day Sprint, you can book a call with an accessibility expert.