Mobile Tap-Target Fix for Shopify Themes (WCAG 2.5.8 Target Size)

WCAG 2.2 SC 2.5.8 (Target Size, Minimum) is the most-failed new criterion from the WCAG 2.2 update. Most Shopify themes ship social icons at 16-20 px, header icons at 20 px, quantity steppers at 18 px, and variant chips at 20-22 px on mobile — all below the 24×24 CSS-pixel floor. This guide gives you the exact CSS to fix every common pattern without resizing the visual icon.

What 2.5.8 actually measures

The criterion measures the clickable bounding box, not the visible icon. A 16×16 SVG icon centered inside a 24×24 padded button passes. Three things matter:

1. The CSS box model. width + height + padding determines the clickable area. margin does not.
2. The 24-pixel direction. Both dimensions must be ≥ 24. A 12 × 100 strip fails even though the 100-pixel dimension is over.
3. The exception clause. Inline body-text links are exempt; navigation links and standalone buttons are not.

Apple HIG recommends 44 pt; Material Design recommends 48 dp. WCAG's 24-pixel minimum is below both — most well-designed mobile UIs already pass without changes. The Shopify themes that fail are typically the ones that aggressively shrink mobile chrome to maximize content area.

Per-pattern CSS fixes

1. Header icon buttons (cart, search, account)

The most common failure. Default theme markup:

<a href="/cart" class="header__icon">
  {% render 'icon-cart' %}
</a>

Default CSS often ships with padding: 0.5rem (8 px) on a 16 px icon → 32×32 (passes). But many themes drop padding to 0.25rem (4 px) on mobile breakpoints to compress the header → 24×24 (right at the threshold) or below.

Fix:

.header__icon,
.header__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}

@media (max-width: 749px) {
  .header__icon,
  .header__icon-link {
    /* Don't shrink below the WCAG 2.5.8 24×24 floor */
    min-width: 44px;
    min-height: 44px;
  }
}

Setting min-width and min-height to 44 px hits both WCAG 2.5.8 (24×24 minimum) and Apple HIG (44 pt minimum) in one pass.

2. Footer social icons

Footer social-icon strips are the second most common failure. Default markup:

<ul class="footer__social">
  <li><a href="..."><svg width="20" height="20"></svg></a></li>
  ...
</ul>

Default CSS:

.footer__social a {
  display: inline-block;
  /* Implicit: padding: 0 — fails 2.5.8 */
}

Fix:

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}

.footer__social li + li {
  /* Visual spacing without shrinking targets */
  margin-left: 0.5rem;
}

The margin-left keeps the icons visually spaced without shrinking the click region.

3. Quantity steppers (+ / − buttons)

Variant pickers and cart-line quantity controls:

<button class="qty-decrement">−</button>
<input class="qty-value" />
<button class="qty-increment">+</button>

Default CSS frequently ships at 18×18 or 20×20.

Fix:

.qty-decrement,
.qty-increment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
}

4. Variant chip pickers

Color and size chips:

<input type="radio" id="variant-red" />
<label for="variant-red">Red</label>

Default CSS:

.variant-chip label {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  /* Often ~20×24 on mobile — fails the 24-px width minimum */
}

Fix:

.variant-chip label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}

5. Pagination links

Numbered pagination on collection pages:

Fix:

.pagination a,
.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}

A single CSS block that fixes the whole storefront

If you don't want to touch theme files individually, drop this into the top of assets/base.css. It applies the 44-pixel floor to every interactive element on mobile breakpoints:

/* WCAG 2.2 SC 2.5.8 — Target Size (Minimum). 24×24 floor; we use 44×44
   per Apple HIG / Material Design which exceeds the WCAG floor. */
@media (max-width: 749px) {
  a:not(.skip-to-content-link):not(.text-link),
  button,
  input[type="checkbox"],
  input[type="radio"],
  [role="button"],
  [role="checkbox"],
  [role="radio"] {
    min-width: 44px;
    min-height: 44px;
    /* For inline elements that can\'t honor min-width without inline-block */
  }

  a:not(.skip-to-content-link):not(.text-link),
  button,
  [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

Two opt-out classes — .skip-to-content-link and .text-link — allow the skip-to-content link (intentionally hidden until focus) and inline text links (covered by the body-text exception) to skip the rule.

How to verify the fix worked

1. Load your storefront on a phone or in browser DevTools at 375×667 viewport.
2. Open the browser DevTools and use the element inspector.
3. Click each interactive element and read the computed width × height values.
4. Every clickable element except inline body-text links should be at least 24×24 pixels (44×44 if you used the recommended pattern).

Lighthouse and axe-core both flag 2.5.8 violations automatically. Run a Lighthouse Accessibility audit on mobile mode to verify after the fix.

Why this is deterministic

Tap-target size is a measurable property of the rendered DOM. There is no judgment. Either the bounding box meets 24×24 — or it does not. AccessComply's deterministic target-size agent measures every interactive element at the mobile viewport, computes whether the bounding box meets the threshold, and writes the CSS padding patch directly into the theme stylesheet via the Theme GraphQL themeFilesUpsert mutation. No runtime overlay; the fix is auditable theme source code.

Further reading

• WCAG 2.2 SC 2.5.8 Target Size (Minimum) — full understanding doc
• Apple Human Interface Guidelines — touch targets
• Material Design — touch targets
• AccessComply: WCAG 2.5.8 Target Size reference
• AccessComply: Glossary — target size
• AccessComply: Dawn theme accessibility audit