Skip to main content

target-size

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

Severity: Serious

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.

Incorrect sample - small margin between buttons
Copy icon Copy snippet

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.

Correct sample - large buttons with wide margin
Copy icon Copy snippet

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy