Reviewed November 9, 2026

Touch Targets on Mobile Menus: 24x24 Is the WCAG 2.2 Floor

WCAG 2.2 added a minimum target size of 24 by 24 CSS pixels for Level AA, under criterion 2.5.8. Mobile menu links, icon buttons and close controls that render at 16 or 20 pixels fail it. The user cost is mistaps: the wrong menu item, the wrong product, the cart opening when the shopper wanted the menu.

Open a storefront on a phone and try to tap the close button on the menu. It is a small X, maybe 16 pixels across, sitting next to the search icon. Your thumb covers it three times over. You tap, and the search opens instead. You tap again, and the menu closes. That is not a clumsy thumb. That is a target size failure.

WCAG 2.2, the current version in most consent decrees and demand letters, added criterion 2.5.8 Target Size (Minimum), Level AA: targets must be at least 24 by 24 CSS pixels. The old WCAG 2.1 had no minimum target size at AA, which is why so many stores ship with 16-pixel icon buttons and never notice. The standard moved. The themes did not.

What 2.5.8 actually requires

The rule is simple: every target must be at least 24 CSS pixels wide and 24 CSS pixels tall, unless an exception applies. The exceptions matter. Spacing counts: if targets are less than 24 pixels, they can still pass if the space between them is enough that a 24-pixel circle centered on one does not overlap another. Inline links in a paragraph are exempt, because you cannot resize text links without breaking the text. And a target that is essential, like a control whose size is fixed by the platform, gets a pass.

The spacing exception is the one teams misunderstand. It does not mean small targets are fine if they are far apart in a vague sense. It means a 24-pixel circle around each target must not overlap another target. Two 16-pixel icons 8 pixels apart fail. Two 16-pixel icons 24 pixels apart pass, because the circle around one does not touch the other. Measure the circles, not the gaps.

The 24-pixel floor is the AA minimum. AAA raises it to 44 by 44 under 2.5.5, which is the size Apple and Google recommend for touch targets in their own guidelines. AA is the legal floor in most decrees. AAA is the usability target, and the gap between them is the gap between a store that passes an audit and a store that is pleasant to use on a phone.

Where storefronts fail it

Mobile menu links are the worst offenders. A hamburger menu with links at 14 pixels, tightly stacked, is a row of targets that are individually too small and collectively too close. The fix is padding, not font size: add vertical padding to each link until the hit area reaches 24 pixels, even if the text stays small. The visible text and the tappable area are different things, and the standard measures the tappable area.

Icon buttons are the second failure. Search, account, cart, wishlist, close: a row of 20-pixel icons with 4 pixels between them. The fix is the same: increase the hit area with padding or an invisible larger button, and increase the spacing until the 24-pixel circles do not overlap. The icons can stay visually small. The targets cannot.

The cart drawer close button deserves special attention. It is the control a user reaches for when they want out, and it is usually the smallest button on the page. A close button that is hard to hit traps the user in the drawer, which is a failure that feels like a bug even when the code is working as written.

Testing target size without guessing

The browser's developer tools can measure it. Inspect the element, read the rendered size, and check the spacing to the next target. Automated checkers catch some target size failures now, but the spacing exception is hard to compute, so manual measurement is still the reliable method.

Test on a real phone, not an emulator, with your thumb. The emulator shows the pixels. The phone shows the experience. Tap the menu links, the close button, the quantity steppers. If you mistap twice in a minute, the targets are too small, whatever the measurement says.

Record the sizes. A target size audit that lists each control, its rendered size, and the spacing to its neighbors is the evidence that the fix happened. The standard is new enough that many stores have never been measured against it, which is exactly why it shows up in current demand letters.

Frequently asked questions

What is the minimum target size under WCAG 2.2?

WCAG 2.2 criterion 2.5.8 requires targets to be at least 24 by 24 CSS pixels at Level AA. The older WCAG 2.1 had no minimum at AA, which is why many themes ship with smaller targets. The AAA criterion 2.5.5 raises the minimum to 44 by 44 pixels.

Does the spacing exception mean small buttons are fine if they are far apart?

Only if the spacing is enough that a 24-pixel circle centered on one target does not overlap another target. Two 16-pixel icons 8 pixels apart fail. The same icons 24 pixels apart pass. Measure the circles, not the gaps.

Do inline links in a paragraph need to be 24 pixels tall?

No. Inline links are exempt from 2.5.8, because resizing them would break the text flow. The criterion applies to discrete controls: buttons, menu items, icon buttons, checkboxes and similar targets that stand on their own.

How do I make a target bigger without changing how it looks?

Add padding. The visible icon or text stays the same size, and the tappable area grows around it. A 16-pixel icon inside a button with 4 pixels of padding on each side is a 24-pixel target that looks exactly the same as before.