WCAG 2.5.8 — Target Size (Minimum)
Interactive controls must be at least 24 by 24 CSS pixels, unless they have enough spacing around them or an equivalent larger control exists elsewhere on the page.
What this means for a store
New in WCAG 2.2, so a site audited before 2023 has almost certainly never been checked against it. On a store it hits the quantity stepper, the colour swatch row, the star rating input, the close control on the cookie banner and the pagination numbers — all of which tend to be drawn small and packed tightly. On mobile, where most storefront traffic now sits, an undersized quantity control means the customer taps 'remove' when they meant 'decrease'. That is a lost basket, not an inconvenience.
The failures we see most often
Quantity plus and minus buttons drawn at 16 or 20 pixels and placed flush against each other.
Why it happens: The stepper is styled to match the input height, which is set by the design system rather than by the touch requirement.
Colour and size swatches rendered as small circles in a tight row.
Why it happens: Dense swatch rows look good in a product grid. Each swatch is a control and each needs the size or the spacing.
The close control on a cookie banner, newsletter popup or promo bar drawn as a small icon.
Why it happens: The close affordance is deliberately made unobtrusive. When it is also below the minimum size it becomes genuinely hard to dismiss.
Pagination and breadcrumb links spaced tightly.
Why it happens: These are inline text links; the exception for inline text in a sentence does not extend to a row of pagination numbers.
How to check it yourself
- Open developer tools, select the control, and read its rendered box in CSS pixels — not its icon size.
- If a control is under 24 by 24, measure the gap to its neighbours; sufficient spacing can satisfy the criterion instead.
- Check the quantity stepper, swatch row, rating input and every popup close control specifically.
- Test at mobile viewport width, where controls are often smaller than on desktop.
Fixing it, by platform
- Shopify — Target Size (Minimum) Theme stylesheet: the quantity and swatch rules in assets/base.css; plus any promo bar or popup app.
- WooCommerce — Target Size (Minimum) Theme quantity input styles; variation swatch plugin styles; cookie consent plugin.
- Webflow — Target Size (Minimum) Designer element sizing; any custom quantity or swatch component.
- Wix — Target Size (Minimum) Element sizing in the editor; third-party app widgets.
- Squarespace — Target Size (Minimum) Product page quantity control; promotional pop-up settings; custom CSS.
What this page covers
What follows is the practical meaning of a WCAG 2.2 success criterion. Automated tests catch only a portion of accessibility issues, so a clean scan result does not mean compliance. Platform paths vary by version and theme.
Source
The formal definition of this criterion: W3C — Understanding Target Size (Minimum)