target-size

Ensure that targets for pointer inputs are large or have sufficient distance from other targets.

Description

When a target for pointer inputs is too small or is too close to another target, several users find it difficult to access it. These users include people with hand tremors, people with larger fingers, people who access content using small screens, etc.

The target-size rule gets flagged if any target is less than 24 pixels wide and long unless it is positioned sufficiently far from other targets. If a 24 CSS pixel diameter circle is centered on the bounding box of each target, these circles must not overlap with any other target or the circle of another target.

Success criteria

For this accessibility check to pass, all targets on your website must either be at least 24 pixels wide and 24 pixels long or be positioned far enough from other targets such that a 24 CSS pixel diameter circle centered on each target’s bounding box does not overlap with any other target or circle.

Example

In the following example, the buttons are small (10 pixels wide and 20 pixels long). Also, the buttons are too close to each other (small margin of 2 pixels). This approach can cause difficulty for users with hand tremors, people with larger fingers, people who access content using small screens, etc. Hence, this code snippet breaks the target-size rule.

In the following example, the buttons are larger (15 pixels wide and 30 pixels long). Also, the buttons are far from each other (large margin of 15 pixels). If a 24 CSS pixel diameter circle is centered on the bounding box of each of these buttons, these circles will not overlap with each other.

Hence, this code snippet does not break the target-size rule.

How to fix?

You can follow these options to fix issues if this rule gets flagged:

• Increase the size of the targets.
• Increase the distance between multiple targets.

Reference

• WCAG 2.5.8: Target Size (Minimum)
• WCAG - Target Size