WCAG (Level AAA) SC 2.5.5 Target Size (W3.org)
Issue description
WCAG 2.5.5, “Target Size” focuses on the size of clickable targets, like buttons, links, and other interactive elements. It aims to make these targets easier to acquire and activate for users with motor impairments who may have difficulty with precise mouse movements or touch interactions. View more documentation on the higher recommendation size of WCAG 2.2 (AA) SC 2.5.8 Target Size (Minimum).
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.
- Activate with assistive technology: Some assistive technologies might have difficulty interacting with small targets.
WCAG requirements
This Level AAA criterion sets a minimum target size for pointer inputs:
44 by 44 CSS pixels: The target size should be at least 44 by 44 CSS pixels, except when:
- Target is in a sentence or block of text: The target is part of a sentence or block of text, such as a link.
- Target is inline: The target is presented inline and the size is determined by the content, such as a link.
- Essential: A particular presentation of the target is essential to the information being conveyed, such as a small icon in a diagram, with alternative ways to activate the same functionality.
44 pixels by 44 pixels example
The purple block below is the minimum size of 44px by 44px:
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, this guideline promotes a more accessible and user-friendly experience by ensuring that 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.5, “Target Size” involves ensuring that 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 44 by 44 CSS pixels.
- Padding and margins: Use padding and margins to increase the clickable area around the visual element.
- 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 44×44 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.
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.
- User testing: Conduct user testing with people with motor impairments to get feedback on the usability of the target sizes.
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 WCAG (Level AAA) SC 2.5.5 Target Size, 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.
