Touch Target Size and Spacing

Small touch targets and insufficient spacing between interactive elements can make it difficult for users to accurately activate the desired control. This is particularly challenging for users with motor impairments, low vision, or those accessing the app in less-than-ideal conditions (e.g., small screens, bright sunlight). The Touch Target Size and Spacing rule ensures that all interactive elements in mobile apps are accessible. Each interactive element must have a minimum touch target size or be spaced to prevent accidental taps on nearby elements.

Impact on users with disabilities

• Motor impairments:
  Users with tremors or limited dexterity may struggle to tap small or closely spaced targets, leading to errors or accidental activations.
• Visual impairments:
  Users with low vision or who rely on screen magnification may find it difficult to accurately target small interactive elements.
• Cognitive impairments:
  Users may experience increased cognitive load when trying to distinguish and select small or densely packed controls.

How to fix?

Ensure each interactive UI element has:

• A minimum touch target size of 24dp x 24dp.
• If smaller, ensure enough spacing so that a circle of 24dp does not overlap with nearby elements.

This helps users accurately interact with elements, minimizing errors and frustration.

Example

The following screenshot highlights touch target size and spacing violation in a mobile app:

In this example, the observed size is 16dp (width) x 48dp (height) instead of the expected size of 24dp x 24dp. This shows the touch targets are too narrow, which could make them hard to tap for some users.

To resolve this violation, you must:

• Increase target size to 24dp x 24dp, or
• Adjust the spacing such that a 24dp circle does not intersect with other touch targets. This helps avoid accidental interactions.

Reference

• Learn more about Touch Target Size and Spacing WCAG 2.2 - 2.5.8 (Level AA) guideline.