Tap targets: the size WCAG requires, and what thumb studies found

Text contrast gets the attention, but a control can be perfectly readable and still hard to hit. WCAG 2.2, the W3C’s accessibility standard, has two success criteria on the size of things you tap or click.

The two numbers

• 2.5.8 Target Size (Minimum), level AA. A pointer target should be at least 24 by 24 CSS pixels. This is the level most accessibility requirements point to.
• 2.5.5 Target Size (Enhanced), level AAA. At least 44 by 44 CSS pixels.

A CSS pixel is the unit your stylesheet uses. It is not a physical measure, because phones scale it, so the two numbers cannot be turned into millimetres here.

The exceptions at the AA level

A target smaller than 24 by 24 can still pass in these cases, according to W3C:

• Spacing. The target is positioned so that a 24 pixel circle centred on it does not overlap another target, or another undersized target’s circle. In plain terms, small controls are acceptable if there is enough space around them.
• Equivalent. The same function is available through another control on the page that does meet the size.
• Inline. The target sits in a sentence, or its size is limited by the line height of the surrounding text. A link inside a paragraph is not held to 24 pixels.
• User agent. The browser sets the size, and you did not change it.
• Essential. A particular presentation is essential or legally required.

W3C says the purpose is to help people activate targets without hitting a neighbouring one. It names people with dexterity limits or hand tremors, and adds that larger targets also help people using one hand and people on touchscreens in general.

What a thumb study found

Parhi, Karlson and Bederson (MobileHCI) tested one-handed thumb use on small touchscreens. Speed improved as targets grew, and error rates did not differ significantly among the larger sizes they tested. From those results and from users’ ratings they concluded that 9.2 mm targets for single taps (buttons, checkboxes) and 9.6 mm for sequences of taps, such as typing, were large enough for one-handed thumb use.

Two limits apply. The study is older, and its handhelds were small screens of that period, so it supports the direction more than the exact number. It also measured physical millimetres, not CSS pixels. We are not converting between the two.

Where stores tend to fall short

We have not measured any particular theme, so we make no claim about one. These are the places worth measuring on your own store, because they are small and close together:

• the quantity plus and minus buttons
• the remove link in the cart
• the close icon on a drawer or pop-up
• colour swatches and size buttons that sit side by side
• filter checkboxes and links in a footer menu

What to do this week

1. Open your store in Chrome on a desktop. Right-click a control, choose Inspect, and hover the element in the Elements panel. The browser shows its width and height in pixels.
2. Measure the five places above. Write down any that are under 24 by 24 and have another control within 24 pixels.
3. Fix the worst ones with padding or a minimum height and width in your theme’s custom CSS, so the tappable area grows without changing the look. Try 44 by 44 for the controls people use most.
4. Test with your own thumb on a real phone, one-handed, in the cart and on a product page with several variants.