Touch Target Size

The Touch target size rule checks whether interactive UI elements meet a minimum size requirement to ensure they are easily operable by all users, especially those with motor impairments or those using assistive devices. Adhering to this minimum target size requirement promotes greater usability for everyone.

Success criteria

The specific criterion for success is:

• Each interactive element in the app must have a touch target size of at least 44dp x 44dp.
• If an element is smaller than the minimum touch target size, it must be spaced so that minimum touch target size circle around it does not overlap with adjacent elements.
• Touch targets must remain operable across screen sizes, orientations, and zoom levels.

How to fix

To prevent insufficient touch target size violations:

• Increase the target size: Make interactive elements at least 44dp x 44dp on Android or 44 points x 44 points on iOS.
• Use padding: If increasing the element size is not possible, add sufficient padding around the element to increase the touch target area to 44dp x 44dp.
• Implement adjustable settings: Consider providing a setting that allows users to enlarge touch targets throughout the app to accommodate their individual needs.

Example

The following screenshot highlights a touch target size violation in an Android mobile app:

Errors

In this example, several touch elements are too small:

• Element #2: The touch target size is 57dp x 17dp, which is below the WCAG requirement of 44dp x 44dp. This makes activating the button difficult for users with motor challenges.
• Element #3: The touch target size is 286dp x 38dp, which is below the WCAG requirement of 44dp x 44dp.

Fix

To resolve this violation:

• Increase the touch target size: Change the touch target size to meet or exceed 44dp x 44dp.
• Add padding: Surround the touch target with enough padding to increase the touchable area without altering the visual design.
• Implement adjustable settings: Provide a setting that allows users to enlarge touch targets throughout the app.

References

• 2.5.5 Target Size (Enhanced) (Level AAA): WCAG 2.1 · WCAG 2.2