Features
Start a free trial

Ensure touch targets have sufficient size and space

Rule ID: target-size User Impact: serious Guidelines: WCAG 2.2

Touch targets, such as buttons and links, should be large enough and adequately spaced to facilitate easy activation without accidental presses, enhancing usability for all users, especially those with mobility impairments.

About This Rule

This guideline ensures that touch targets are appropriately sized and spaced, enhancing accessibility for users with mobility impairments. Adhering to this practice aligns with the following standards:

  • WCAG 2.2 (AA): 2.5.8 Target Size (Minimum)

Why It Matters

Appropriately sized and spaced touch targets are crucial for users with mobility challenges, including hand tremors or limited dexterity. Small or closely positioned targets can lead to accidental activations, causing frustration and hindering navigation. Ensuring sufficient target size and spacing aligns with accessibility best practices and improves the user experience for everyone.

How to Fix

To enhance touch target accessibility:

  • Ensure Minimum Target Size: Design touch targets to be at least 24 by 24 CSS pixels. This dimension provides a reasonable area for users to interact with controls without difficulty.
    Copy code
    <button style="width: 24px; height: 24px;">Submit</button>
  • Provide Adequate Spacing Between Targets: If maintaining the minimum size is not feasible, ensure that smaller targets have sufficient spacing from adjacent elements. A virtual circle with a 24-pixel diameter centered on the target should not intersect other touch targets.
    Copy code
    <button style="margin-right: 10px;">Option 1</button>
<button>Option 2</button>
  • Avoid Overlapping or Obscured Targets: Ensure that touch targets are fully visible and not overlapped by other elements, which could impede user interaction.

Examples

Incorrect

A small touch target with insufficient spacing:

Copy code
<button style="width: 20px; height: 20px;">OK</button>
<button style="margin-left: 5px;">Cancel</button>

Correct

A sufficiently sized touch target with adequate spacing:

Copy code
<button style="width: 24px; height: 24px; margin-right: 10px;">OK</button>
<button>Cancel</button>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: