All touch targets must be 24px large, or leave sufficient space
Need accessibility training?
Compliance Data & Impact
How to Fix the Problem
Correct markup solutions
Touch target has sufficient size or spacing
<button style="font-size: 24px">Submit</button>
<button>+</button>
<button style="margin-left: 10px">Adjacent Target</button>Incorrect markup solutions
Touch target unobscured size is too small and is too close to another touch target
<button id="target">+</button>
<button style="margin-left: -10px">Adjacent Target</button>Why it Matters
Touch targets must have sufficient size and spacing in order to "be easily activated without accidentally activating an adjacent target." When touch targets are too small or too close together, it becomes difficult for users to activate them.
Having targets with sufficient size - or failing that, sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:
- People who use a mobile device where the touch screen is the primary mode of interaction;
- People using mouse, stylus or touch input who have mobility impairments such as hand tremors;
- People using a device in environments where they are exposed to shaking such as public transportation;
- Mouse users who have difficulty with fine motor movements;
- People who access a device using one hand;
- People with large fingers, or who are operating the device with only a part of their finger or knuckle.
See
Understanding Success Criterion 2.5.8: Target Size (Minimum)
for more information, examples, and exceptions.
Rule Description
Touch targets must be at least 24 by 24 CSS pixels in size. Size is computed by taking the largest unobscured area of the touch target. If the size of the target is insufficient, then it must be at least 24 CSS pixels away from any other touch target.
The Algorithm (in simple terms)
Check the unobscured size of the touch target and distance to other touch targets.
Resources
Deque University Course Pages (subscription required)
No related course information available.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: