2.5.8 Target Size (Minimum)
Official description of the success criterion
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
- User agent control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
What to do?
Ensure targets meet a minimum size or have sufficient spacing around them.
The easiest way is to have the targets be at least 24x24 pixels. That way you don't have to calculate anything. And the targets will be easier to activate.
For any under 24x24 pixel targets, ensure there is enough white space around them to make them at least 24x24 pixels when the white space is counted in. But remember that white space is not clickable, so it doesn't help as much as the target size.
Why is it important?
Some people with physical impairments cannot click small buttons that are close together.
Common pitfalls
Having small targets close to each other without much space between them.
How to test for it?
Some automated tools can catch these issues.