WCAG 2.2 (AA) SC 2.5.8 Target Size (Minimum) (w3.org)
Issue description
WCAG 2.5.8, “Target Size (Minimum)” aims to improve the usability of interactive elements for people with motor impairments who may have difficulty with precise mouse or touch interactions. It builds upon the WCAG (Level AAA) SC 2.5.5 Target Size by setting a minimum target size requirement for most interactive elements.
Many websites have interactive elements with small target sizes, making them difficult to:
- Click with a mouse: Users with tremors or limited dexterity might find it challenging to accurately click on small targets.
- Tap on a touchscreen: Users with large fingers or who use touchscreens with low accuracy might accidentally tap on the wrong element or miss the target altogether.
WCAG requirements
This guideline requires that the size of target areas for pointer inputs be at least 24 by 24 pixels, except when:
- The target is in a sentence or block of text: The target is part of a sentence or block of text, such as a link within a paragraph.
- The target is inline: The target is presented inline and the size is determined by the content, such as a small icon within a line of text.
- Essential: A particular presentation of the target is essential to the information being conveyed, such as a small icon in a diagram.
- User agent control: The user agent (e.g., the web browser) provides the ability to resize the target.
24 pixels by 24 pixels example
The purple block below is the minimum size of 24px by 24px:
Benefits
- Improved accuracy: Larger targets are easier to acquire and activate, reducing errors and frustration.
- Enhanced usability: It makes interaction easier for users with motor impairments and those using touchscreens.
- Increased comfort: Larger targets reduce the need for precise movements, which can be tiring or painful for some users.
Essentially, WCAG 2.2 (AA) SC 2.5.8 Target Size (Minimum) promotes a more accessible and user-friendly experience by ensuring that most interactive elements are large enough to be easily activated by everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.5.8 “Target Size (Minimum)” involves ensuring that your interactive elements are large enough to be easily acquired and activated by users with motor impairments. Here’s how:
Increase target size
- Minimum size: Make sure that clickable targets (buttons, links, form controls) have a minimum size of 24 by 24 CSS pixels.
- Padding and margins: Use padding and margins to increase the clickable area around the visual element, even if the visual element itself is smaller.
- Touchscreen considerations: For touchscreens, consider even larger target sizes to accommodate users with larger fingers or less precise touch control.
Exceptions
- Text targets: If the target is part of a sentence or block of text, the 24×24 rule doesn’t apply. However, ensure sufficient spacing between links to avoid accidental clicks.
- Inline targets: For targets presented inline, the size is determined by the content, but ensure they are still large enough to be easily clicked or tapped.
- Essential targets: If a specific presentation of the target is essential (e.g., for visual consistency or branding), ensure alternative ways to activate the same functionality are available.
- User agent control: If the user agent (e.g., web browser) provides the ability to resize the target, you might not need to meet the minimum size requirement.
Spacing and positioning
- Adequate spacing: Provide sufficient space between interactive elements to prevent accidental clicks on adjacent targets.
- Avoid crowding: Don’t crowd interactive elements together, especially in menus or toolbars.
Alternative input methods
- Keyboard support: Ensure all interactive elements are keyboard accessible. This allows users to navigate and activate targets using the keyboard instead of relying solely on a mouse or touchscreen.
- Voice control: If possible, provide voice control as an alternative input method.
Testing
- Mouse and touch testing: Test the interactive elements using a mouse and touchscreen to ensure they are easy to acquire and activate.
- Assistive technology testing: Test with assistive technologies to ensure that users can interact with all targets effectively.
Examples
- Small buttons: Increase the size of buttons by adding padding or adjusting the font size.
- Close icons: Make close icons larger and easier to click, especially on touchscreens.
- Menu items: Ensure sufficient spacing between menu items to prevent accidental clicks.
By implementing these techniques, you can make your website more accessible to users with motor impairments, ensuring that everyone can easily interact with the interactive elements, regardless of their input method.
