Skip to content
StoreA11y

Shopify · 2.5.8 Target Size (Minimum) (Level AA, WCAG 2.2)

Tap targets are too small or too close together on Shopify

Some controls are smaller than 24x24 CSS pixels, or sit so close to a neighbour that the two overlap. Shoppers with a tremor, limited dexterity, or just a large thumb hit the wrong one. On mobile ecommerce this directly costs conversions as well as failing WCAG.

Which WCAG criterion this fails

  • Does not meet 2.5.8 Target Size (Minimum) (Level AA, WCAG 2.2)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Give every interactive control a minimum of 24x24px, and aim for 44x44px on touch layouts — Apple and Google both recommend 44–48px.
  2. Do not resize the icon; add padding to the control so the hit area grows while the icon stays the same size.
  3. The usual failures on a store: quantity +/- steppers, colour swatches, pagination numbers, footer social icons, and the close X on the cart drawer.
  4. Where controls sit in a row, add at least 8px of spacing so their hit areas do not touch.
  5. Test at 375px width — the desktop layout usually passes while mobile does not.

Where this usually lives

assets/base.css, assets/component-cart.css, snippets/quantity-input.liquid, sections/footer.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

.quantity__button,
.footer__social a,
.pagination__item {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__social { display: flex; gap: 8px; }

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: medium. Rule id: target-size (axe-core).