Understanding WCAG SC 2.5.8 – Target Size (Minimum)

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.

The intent of this success criterion is to ensure the target of any UI element has 24 by 24 CSS PX target size  or there is enough spacing provided between two targets that have undersize targets.

Note that zooming or other style changes adopted by users with disabilities must not modify the target sizes. So, developers must provide room for zooming, magnifying and reflow while fixing the target sizes.

Undersize targets and spacing

If the target size is below 24 CSS Pixels for the elements, then there must be enough spacing between elements. To ensure there is enough spacing, it must be possible to draw a 24 by 24 diameter CSS Pixels circle over the undersized target, at the center of the bounding box. These circles must not intersect or cut across each other when drawn two undersized targets in a line or a row of elements. This does not mean that there must be a circle for undersized targets on web pages or apps. This just means that the designers and developers must ensure spacing between undersized targets to fit such a circle.

Other Exceptions:

• If the elements are part of sentences or paragraphs where the line height of the non-text content restricts the required target size
• If there is an equivalent control that meets required target size
• If the user agent sets the target size or
• if the elements are essential or part of legal requirement.

Who Benefits?

• Users with limited motor ability
• Users who have tremors but use mouse or a touch device
• Users who have large fingers or who operate with their knuckles
• Users who use touch devices as their primary devices

Points to Ponder

Related Reads

• Understanding SC 1.4.4 Resize Text
• Understanding SC 1.4.10 Reflow
• Understanding SC 2.5.8:Target Size (Minimum) (Level AA) by W3C