Interface · 02 of 04
Make controls easy to hit
Design the interactive area and spacing, not just the visible icon.
The idea
A small icon can sit inside a larger clickable area.
Give controls enough room to activate without accidentally hitting a neighbour, especially on touch screens. Check the real hit area rather than judging the artwork alone.
WCAG 2.2 Level AA specifies a minimum target size of 24 by 24 CSS pixels, with exceptions including qualifying spacing and inline targets. A 44 by 44 target can be a useful touch design goal, but it is not a universal AA requirement. Review the applicable criterion and test the finished controls in context.
How to see it
Terms used in this lesson
The parts
- Hit area
- The area that responds to pointer or touch input.
- Icon
- The visible symbol within a control.
- Separation
- Space that helps prevent activation of a neighbouring control.
In practice
- Inspect the actual interactive area
- Leave enough separation between controls
- Test touch use on a real device
Avoid
- Hit areas that overlap neighbouring controls
- Confusing icon size with target size
- Presenting a design goal as a universal standard
The test
Use the interface on a phone and inspect each control's hit area. Can you activate neighbouring actions reliably without overlap or accidental selection?
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.