- Spacing: The target offset is at least 24 CSS pixels from adjacent targets.
- Equivalent: The function can be achieved through a different control on the same page that meets the size requirement.
- Inline: The target is in a sentence or block of text.
- User Agent control: The size is determined by the user agent and not modified by the author.
- Essential: A particular presentation is essential.
Why It Matters
This AA criterion provides a minimum target size requirement, less strict than the AAA version (2.5.5 – 44x44px), but still crucial for usability. It helps users with motor impairments avoid accidentally hitting adjacent targets, especially on touchscreens or with imprecise pointing devices. Even 24x24px is significantly easier to hit than very small targets. The spacing exception allows for smaller targets if they are well-separated.
Fixing the Issue
Ensure interactive elements have a clickable area of at least 24×24 CSS pixels OR ensure there is sufficient space (at least 24px) between adjacent small targets. Use CSS width, height, min-width, min-height, and padding to achieve the target size. Use margin to ensure adequate spacing between targets if they are smaller than 24x24px. Test target sizes and spacing, especially in constrained environments like mobile views.
