Target Size (Minimum)

Why it matters

Small targets get missed, and on a touchscreen a miss is a tap that lands on something else. W3C publishes the complaint in a user's own words. The buttons are so close that she hits Cancel going for Submit, and then has to start again. The passing version of the same page is described just as plainly, which is that the space between the buttons means she does not hit the wrong one even on a bumpy bus. That is the whole argument. Bigger and better spaced targets take the accidental tap out of the interaction for people with hand tremors, spasticity or quadriplegia, and for everybody using a phone one-handed while standing up.

Who this rule protects

This affects people using a touchscreen phone, people with hand tremors, spasticity or quadriplegia using a mouse, stylus or touch, people in a moving vehicle or on public transport, people who find fine mouse movements difficult, people operating a device one-handed, and people with large fingers or those tapping with part of a finger or a knuckle.

How to check it yourself

1. 1Measure the small stuff first, meaning modal close buttons, quantity steppers, pagination links, icon toolbars and menu items. Menu item height is the most checkable number in the whole rule, since 24 pixels passes and 18 does not.
2. 2Run the size test properly. It asks whether a 24 by 24 square, aligned to the page, fits entirely inside the target, so rounded corners and clipped shapes can fail at a nominal 24 by 24.
3. 3If a target is undersized, draw a 24 pixel circle on the centre of its bounding box. Confirm it does not touch another target, then separately confirm it does not touch the circle drawn on another undersized target. Both have to be true.
4. 4Do not report undersize on its own. A 16 pixel control with nothing near it passes this rule, and it is still worth growing.
5. 5Rule out the exceptions before measuring. Links inside a sentence are exempt because reflow moves them around, browser-drawn controls are exempt until you restyle them, and map pins are exempt because their positions carry the information.

Failures we see most often

• Quantity plus and minus buttons 20 pixels wide with no gap between them. The same buttons with a 4 pixel gap pass.
• Pagination links 8 pixels wide with 4 pixels between them, where every circle overlaps its neighbour's.
• A 16 pixel icon button pushed hard against a large adjacent target, so its circle runs straight into it. Four pixels of space fixes it.
• A scrollbar restyled to look thinner and sitting tight against the links beside it, since restyling it gave up the browser's exemption.
• Navigation menu items 18 pixels tall in an expanded dropdown, on a site whose collapsed menu passes at 24.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely

How to fix it

• Grow the hit area with padding, so the icon stays visually small and the target itself reaches 24 by 24.
• Or size the container instead and let the small link sit centred inside it. Putting min-height and min-width of 24px on the list items around pagination links is the documented technique, and it passes on spacing rather than on size.
• Space small controls apart rather than growing them, where the design needs them small. Twenty pixels wide with four pixels between them conforms.
• Remember that zoom does not rescue anything. Zooming does not change the CSS pixel size of an element, so a target that fails at 100% fails at 400%.
• For anything important, aim at 44 by 44 instead, which is the AAA rule. That one has no spacing route at all, so the target itself has to be big enough.

Passes vs. fails