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
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
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!