How big do buttons and links need to be under WCAG 2.5.8?

Under WCAG 2.5.8 Target Size (Minimum), buttons, links and other things people click or tap must be at least 24 by 24 CSS pixels, unless one of five exceptions applies.¹ The criterion is level AA and was added in WCAG 2.2. The most useful exception is spacing: a smaller target can pass if a 24 pixel circle centred on it does not overlap another target or another small target's circle.¹ Links inside a sentence are exempt too. For an online store, the usual failures are colour swatches, quantity steppers, close buttons and rows of small icons.

Who this helps

W3C says the intent is to let people activate a target without accidentally hitting the one next to it.¹ It names people with hand tremors, spasticity or other fine-motor limits; people on touch screens, especially one-handed or with large fingers; mouse and pen users with reduced precision; people using less precise alternative pointing devices; and anyone using a phone on a moving bus.¹ In a store, a mis-tap can mean adding the wrong size, removing an item from the cart or leaving the page by accident.

The rule and its five exceptions

The requirement is that the target for pointer inputs is at least 24 by 24 CSS pixels, except when:¹

The stricter 2.5.5 Target Size (Enhanced) asks for 44 by 44 CSS pixels, but it is level AAA.² W3C suggests considering the larger size for important links and controls.¹

How the spacing test works

W3C describes a simple procedure:¹

1. Check whether a 24 by 24 CSS pixel square fits inside the target. If it does, the target passes.
2. If it does not, the target is undersized. Draw a circle 24 CSS pixels across, centred on the target's bounding box.
3. Do the same for every undersized target nearby.
4. The target passes if its circle does not touch another target or another undersized target's circle.

W3C's own examples make this concrete. Toolbar icons of 24 by 24 pixels pass. Icons of 20 by 20 pixels with 4 pixel gaps pass on spacing. The same 20 pixel icons with no gaps fail. Two rows of 16 pixel buttons with a 1 pixel gap fail.¹ Zoom does not change the result, because CSS pixel sizes stay the same when people zoom.¹

A slider counts as one target when values are chosen by position along it.¹ That is about size; whether the slider can be used without dragging is a separate requirement, 2.5.7 Dragging Movements.²

Where stores usually fail

• Colour and pattern swatches. Small circles packed tightly together. Make each one at least 24 pixels, or add space between them.
• Quantity steppers. Tiny plus and minus buttons beside the number field, especially in the cart drawer.
• Close buttons on pop-ups, cart drawers and banners. W3C notes that targets in new content shown on top of the page, such as a modal, are assessed.¹ See accessible pop-ups and modals.
• Carousel dots. Small indicator dots in a tight row.
• Footer social icons and payment links in a dense row.
• Pagination numbers on collection pages, set in small text with no padding.
• Filter checkboxes that have been restyled smaller than the browser default. Once you change the size, the user agent exception no longer applies.¹
• "Remove" links in the cart set in small text right next to the quantity field.

How to fix small targets

W3C's sufficient technique for this criterion is to use min-height and min-width on the target's container to make sure there is enough size or spacing.¹ In practice:

• Grow the clickable area, not the icon. Add padding to the button or link so its clickable box is at least 24 by 24 pixels. A 16 pixel icon can sit inside a 24 or 44 pixel button.
• Make the label part of the target. For checkboxes and radio buttons, wrap the text in the label element so tapping the words also works.
• Add gaps. If a design really needs small targets, space them so the 24 pixel circles do not overlap.
• Remove duplicates. If a tiny icon repeats something a larger control already does, the equivalent exception may apply, but removing the tiny one is often simpler.

Shopify and WordPress

Shopify's Theme Store requires themes to meet this criterion: "The size of the touch target for pointer inputs must be at least 24 by 24 CSS pixels," with inline body text and WCAG's other exceptions excluded.³ That covers the theme as submitted. Apps, custom sections and CSS tweaks added later can still introduce small targets, so check swatch and review apps in particular. On WordPress and WooCommerce, targets depend on the theme and plugins, so test the product page, cart and checkout of your actual site. Where a fix is a few lines of CSS in a theme, Website Mechanic can propose it as a pull request or a fixed WordPress theme.

How to check target size

1. Run an automated check. axe-core, which Jralo's free check runs in a real browser, has a rule that checks the unobscured size of touch targets and their distance to other targets.⁴ The check covers your homepage and up to five linked pages against WCAG 2.2 A and AA, and also reads your terms, privacy and contact pages to suggest which countries' accessibility laws are likely relevant, with a link to a guide for each (general information, not legal advice).
2. Inspect the suspects. Use your browser's developer tools to read the size of swatches, steppers and close buttons. Remember the spacing exception before you redesign anything.
3. Use the site on a phone. Try to change quantity, pick a colour and close the cart drawer with your thumb. Every mis-tap is worth a look.

Automated tools find many target size problems, not all, and they cannot judge whether a mis-tap is likely in practice. A quick pass on a real phone covers the rest. For the other WCAG 2.2 additions, see what changed in WCAG 2.2.