Annex

Fixing Target Size (Minimum) on Shopify (WCAG 2.5.8)

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.

Why it matters

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.

Shopify — where to look

Theme stylesheet: the quantity and swatch rules in assets/base.css; plus any promo bar or popup app.

What to do

Grow the hit area with padding rather than enlarging the icon, so the control stays visually small while meeting the minimum. 44 by 44 is a better mobile target than the 24 minimum.

Verification status

Checked by reading the platform’s own source code. Dawn sets an explicit min-width of 44px only on the announcement bar slider arrows. The quantity stepper buttons carry no min-width or min-height of their own — their size comes from container padding and a 1rem icon — so measure them rather than assuming they pass.

Source: https://github.com/Shopify/dawn/blob/main/assets/base.css

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Open developer tools, select the control, and read its rendered box in CSS pixels — not its icon size.
  2. If a control is under 24 by 24, measure the gap to its neighbours; sufficient spacing can satisfy the criterion instead.
  3. Check the quantity stepper, swatch row, rating input and every popup close control specifically.
  4. Test at mobile viewport width, where controls are often smaller than on desktop.

Other platforms

The full criterion

Read the full explanation of WCAG 2.5.8 Target Size (Minimum), or the formal W3C definition.