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

WCAG 2.2 SC 2.5.8 (Target Size, Minimum) is easy to overlook in compact storefront controls. Social icons, header controls, quantity steppers, and variant chips are useful places to inspect, but the result depends on the rendered hit area, spacing, theme version, settings, and apps. This guide shows targeted CSS patterns and the checks needed before and after applying one.

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. Those design-system recommendations are not interchangeable units, but both encourage targets larger than the WCAG 24-CSS-pixel baseline. Compact mobile customizations are a useful place to focus review.

Per-pattern CSS fixes

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

A common pattern to inspect:

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

A theme may place a 16-pixel icon inside a larger link or button. Inspect the computed hit area rather than inferring it from the SVG dimensions; custom mobile breakpoints can reduce padding.

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 another useful pattern to inspect. Example 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>

If the rendered control is compact, inspect both its target dimensions and its distance from adjacent controls.

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 broad CSS starting point — use with caution

The following illustrates a broad 44-pixel floor. Do not paste it into production unchanged: generic selectors can alter navigation, inline links, form controls, app UI, and component layout. Prefer selectors scoped to controls you measured, review theme diffs, and test representative states.

/* 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;
  }
}

The two example opt-out classes are not a complete model of the criterion's exceptions. Adapt them to the actual markup and avoid changing third-party app output you do not own.

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. Review targets below 24×24 against the criterion's spacing and exception rules; if you used the example 44×44 pattern, confirm it did not create overlaps or obscure content.

Automated tooling may surface target-size candidates, depending on the tool and configuration, but manual inspection is still needed for spacing, exceptions, overlapping hit areas, zoom, and dynamic controls.

What automation can and cannot establish

Rendered target dimensions are measurable, but a complete result also depends on spacing exceptions, equivalent controls, overlap, responsive states, and usability. AccessComply can report eligible automated findings in public states it reaches. A safely source-mapped first-party CSS candidate may be offered for merchant approval through a supported theme path, followed by a post-change check; manual testing remains necessary.

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