Touch targets
Touch targets are large enough (48x48dp) for reliable interaction of interface controls through click and touch.
Exceptions
- The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels.
- The target is in a sentence or block of text.
Why it matters
Ensuring that interactive elements have sufficiently large touch targets helps people with motor control issues use our website or application. Providing a too-small touch target may make it difficult or impossible for some people to be able to reliably reach the area required to activate the element.
WCAG 2.0 reference: 2.5.5 Target size
Example
Touch targets include the area that responds to user input and extend beyond the visual bounds of an element: an element like an icon may be 24x24dp but we can use additional padding surrounding it to bring the tap target size to 48x48dp. Make touch targets at least 48x48dp, separated by 8dp of space or more, to ensure balanced information density and usability. A touch target of 48x48dp results in a physical size of about 9mm, which is about the size of a person’s finger pad area, regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.
Example of visibly outlined touch target sizes
How to check for this
- Identify all clickable, touchable, or interactable elements within the interface. Manual
- Ensure that each of those elements is 48x48dp in size, or approximately 9mm in each dimension. Manual
Collaborators
- Designers