Touch target smaller than 24x24px (WCAG 2.2 SC 2.5.8)

What’s actually happening

An accessibility audit (axe 4.8+, Lighthouse, or the WCAG 2.2 checks) flags small icon buttons, close (x) links, pagination numbers, or dense menu items. They're hard to hit accurately on a touchscreen, and users with tremors or large fingers tap the wrong thing. The rule checks both the rendered size and the gap to neighboring targets.

Common causes

• Icon-only buttons styled at their glyph size (16–20px) with no padding to pad out the hit area
• A close 'x' that's just a small <span> or character with a tight click region
• Pagination or tag lists where the numbers/chips sit so close that even 24px boxes would overlap their neighbors
• Inline text links packed into a row (footer link lists, breadcrumbs) where each link is short and lines are tight
• Sizing the visual icon instead of the interactive element — the SVG is small and the <button> shrink-wraps to it

How to fix it

1. Pad the control up to 24x24 minimumOn the actual interactive element (button/a, not the inner icon) set min-width: 24px; min-height: 24px and add padding so the clickable box, not just the glyph, meets the size. 44x44 is the friendlier mobile target if you have room; 24 is the WCAG 2.2 AA floor.
2. Use the spacing exception when you can't grow the targetSC 2.5.8 passes a small target if a 24px-diameter circle centered on it doesn't overlap any other target's circle. So if you can't enlarge it, add margin so neighbors sit ≥24px apart center-to-center. Useful for dense toolbars where bigger buttons would wreck the layout.
3. Extend the hit area without changing the visual sizeKeep the icon small visually but expand the tappable region with padding, or a ::before pseudo-element with position: absolute; inset: -6px to push the boundary outward. The user sees a 16px icon but taps a 28px box.
4. Re-test, including the spacing checkRe-run axe/Lighthouse and confirm in DevTools that the element's box (Computed → width/height including padding) is ≥24px and that adjacent targets clear the 24px spacing rule. Test on a phone, not just a mouse, because the failure is a touch problem.