By AltGrade Editorial · Reviewed by AltGrade · Last updated

Fix small touch targets

Controls smaller than 24 pixels are easy to miss on a phone.

Cart and close icons are the usual failures.

Steps

  1. Measure the hit area, not only the icon graphic.
  2. Add padding if the icon is small.
  3. Check the header and quantity steppers.

Failing example

A close icon of 12 pixels.

Better example

The close button is 32 pixels.

Shopify

Pad Shopify header icons and quantity buttons to at least 24 CSS pixels.

WooCommerce

Increase WooCommerce cart and quantity hit areas in the theme CSS.

WordPress

Pad icon buttons in the WordPress theme.

Wix

Resize Wix icon buttons above 24 pixels.

WCAG

Shopify steps · Shopify · Missing alt text