Accessible Touch Target Size Compliance
Rule ID: target-size
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.2 (AA)
How to Fix the Problem
To ensure that all users can easily interact with buttons and links—especially on mobile devices or for those with motor impairments—you must implement sufficient touch target size or spacing.
Correct Markup Solutions
Ensure that:
-
The target (e.g., a button or link) is at least 24×24 CSS pixels, or
-
There is enough space between adjacent targets to compensate for a smaller target size.
Example of sufficient touch size:
Example of appropriate spacing between targets:
Incorrect Markup Solutions
The following markup places buttons too close together and can result in user interaction issues:
This example violates the minimum size or spacing requirements because the touch targets are either too small or placed too close together.
Why it Matters
Touch targets that are too small or too close together pose a serious usability issue, especially for:
-
Users on mobile devices
-
People with motor impairments or hand tremors
-
Individuals using a stylus or mouse with limited precision
-
People accessing devices with one hand
-
Users with larger fingers or using a knuckle or part of a finger
If targets are not properly sized or spaced, users may accidentally activate the wrong control, leading to frustration, mistakes, or inability to use essential functions.
Meeting the 24×24 CSS pixel minimum size—or alternatively providing sufficient space between smaller targets—enhances accessibility and usability for all users.
More details can be found in Understanding Success Criterion 2.5.8: Target Size (Minimum).
Rule Description
Touch targets must either:
-
Be at least 24 x 24 CSS pixels in size, or
-
Be surrounded by sufficient spacing to prevent accidental activation of adjacent controls.
The measurement considers the unobscured area of the element. If a target is smaller than the minimum, a virtual circle of 24-pixel diameter must be drawable around it without overlapping with another interactive element or its corresponding virtual circle.
The Algorithm (in Simple Terms)
-
Measure the visible (unobscured) area of the touchable element.
-
Determine if this area is at least 24×24 CSS pixels.
-
If not, check spacing: Ensure there’s a clear, circular area of 24 pixels around the target that doesn’t overlap with any other interactive element.