WCAG A/AA requirement Priority: Moderate
Buttons and links are too small to tap easily
Some buttons or links are smaller than 24 by 24 pixels and too close to their neighbours.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Shoppers on phones, and people with tremor or limited hand control, tap the wrong colour, size or quantity button. This leads to wrong orders and frustration.
Who is affected
- mobile shoppers
- people with motor disabilities
- older customers
- people using one hand
How to fix it
Make interactive targets at least 24×24 CSS pixels, or leave enough space so a 24px circle centred on each small target does not touch another target. Check swatches, quantity buttons, close icons and pagination. Links inside sentences are exempt.
On Shopify
Usually variant swatches, quantity buttons or icons in the theme. Increase sizes or padding in the theme's CSS; check app widgets too.
On Shoptet (CZ)
Usually swatches or icons in the template. Increase size or padding through custom CSS code.
On PrestaShop
Usually attribute swatches, quantity buttons or icons in the theme. Increase size or padding in the theme's custom CSS.
On WooCommerce
Usually variation swatches, quantity inputs or icons from the theme or plugins. Increase size or padding in child-theme CSS.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 2.5.8 (AA) Target Size (Minimum) |
| EN 301 549 4.1.1 | 9.2.5.8 |
Automated check: axe-core rule target-size.
dequeuniversity.com, github.com, www.w3.org, www.etsi.org
Related checks
-
Some headings are only bold or large text
WCAG 1.3.1 A
-
Some vector graphics have no text description
WCAG 1.1.1 A
-
Some links do not say where they go
WCAG 2.4.4 A
-
Embedded content has no name
WCAG 4.1.2 A