Understanding WCAG SC 2.5.8 Target Size (Minimum)
Version and Level: 2.2 (Level AA)

WCAG SC 2.5.8 requires that the size of the target for pointer inputs is at least 24 by 24 CSS pixels. If the target is less than 24 by 24 CSS pixels, then it’s considered undersized, and at least one of the following is met:

Spacing: Undersized targets (less than 24x24 pixels) must be positioned with enough space around them to avoid touching other target areas. To ensure this, create a circle with a diameter of 24 pixels centered on each undersized target. If none of these circles intersect with any adjacent target input or its circle if it’s also undersized, then the undersized target meets the success criterion.

Equivalent: The function can be achieved through an alternative 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 (like the browser), and is not modified by the author of the website

Essential: A particular presentation of the target information might be essential for clear communication or even legally required. For example, consider a map where pins represent the locations of specific bank branches. Many pins representing branches located very close together might overlap on the map, making them difficult to distinguish. Unfortunately, since these represent real locations, we can't simply move the pins.

Benefits:

  1. Accessibility for Users with Motor Disabilities: Ensures that users with limited motor abilities can accurately target and interact with UI elements.
  2. Enhanced Usability for Touch Devices: Improves usability for users with touch devices, particularly those with larger fingers or who are in shaky environments.
  3. Reduced Errors: Minimizes accidental clicks or taps by providing adequately sized targets or sufficient spacing between undersized targets.

Main Objective:

To ensure that all interactive elements have a minimum target size of 24 by 24 CSS pixels or if it’s undersized, at least one of the following is met: Spacing,Equivalent, inline,User agent control, or essential.

Best Practices:

  • Ensure Minimum Target Size: Design interactive elements with a target size of at least 24 by 24 CSS pixels.

  • Provide Adequate Spacing: For elements smaller than 24 by 24 CSS pixels, ensure there is sufficient spacing so that a 24 by 24 CSS pixel circle centered on each target does not intersect with another.

  • Consider Alternative Controls: If an additional mechanism exists to achieve the same result as the control, then the success criterion is met.

  • Exceptions: Be aware of exceptions, such as targets in sentences where target size is controlled by the user agent, or when the nature of the target is essential, such as pins in a geographical map.

Examples & Explanation:

Example: Mobile Navigation Menu

What Should Be Avoided

A mobile website has a vertical navigation menu with small touch targets for menu items. The menu items are smaller than 24 by 24 CSS pixels and are closely spaced, making it difficult for users to select the correct item. Each menu item is 16 by 16 CSS pixels. Menu items are closely spaced, with minimal padding between them.

Explanation:Since the items are considered undersized, they may still meet this success criterion if there is sufficient space between them. To verify this, we select the center point of each list item and draw a circle with a vertical and horizontal diameter of 24px. This process is repeated for all list items. In the example provided, the circles intersect with each other, resulting in a failure to meet the success criterion. Small touch targets and closely spaced items increase the risk of users accidentally selecting the wrong menu item, particularly for those with motor disabilities or larger fingers.

What Should Be Done

Increase the size of each menu item to at least 24 by 24 CSS pixels. Ensure adequate padding between menu items so that they do not overlap or cause misclicks.

Explanation:By increasing the size of touch targets and ensuring sufficient spacing between them, users can more easily and accurately select the desired menu item. This helps ensure that clicks and taps occur as expected, without any overlaps or unintended selections.

Next Up

Expand your understanding with SC 3.1.1 - Language of Page. Learn to make language settings accessible for all users.

Go to SC 3.1.1