Loading...
Loading content...
Loading content...
Touch targets must be at least 24x24 pixels to be easily tappable.
Why it matters: Small targets are difficult to tap for users with motor disabilities or on mobile devices.
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when: (Spacing) The target offset is at least 24 CSS pixels to every adjacent target; (Equivalent) The target is available through an equivalent link or control on the same page that is at least 24 by 24 CSS pixels; (Inline) The target is in a sentence or block of 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 to the information being conveyed.
What This Means: This success criterion requires that touch targets (interactive elements like buttons, links, form controls) are at least 24x24 CSS pixels in size. This ensures targets are large enough to be easily tappable, especially on touch devices. Padding counts toward the size, so small icons with adequate padding can meet the requirement.
Why It's Important: Small targets are difficult to tap accurately, especially for users with motor disabilities, tremors, or limited dexterity. On mobile devices, small targets increase the likelihood of mis-taps and user frustration. Even on desktop, larger targets benefit users with motor impairments or those using touch screens.
Use CSS to ensure buttons, links, and form controls are at least 24x24 CSS pixels. You can use padding to increase the clickable area without changing the visual size of the element. For example, a 16x16 icon with 4px padding on all sides creates a 24x24 target. Ensure adequate spacing (at least 8px) between targets to prevent mis-taps.
This criterion ensures that users with motor disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that mobile users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that older users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A 16x16 pixel icon button is too small to tap accurately.
<button style="width: 16px; height: 16px;">
<img src="icon.png" alt="Delete">
</button>A button with at least 24x24 pixels is easily tappable.
<button style="min-width: 24px; min-height: 24px; padding: 8px;">
<img src="icon.png" alt="Delete">
</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.5.8 Target Size (Minimum) are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
24x24 pixels is the maximum size I need.
24x24 is the minimum. Larger targets (44x44px) are better for accessibility and easier for all users to tap.
This only matters on mobile devices.
Large targets benefit all users, including desktop users with motor disabilities or those using touch screens.
Small icon buttons without adequate padding to reach 24x24px.
Add padding to reach minimum size. Use CSS min-width and min-height. The icon can be small, but clickable area must be adequate.
Links or buttons that are too close together, causing mis-taps.
Ensure adequate spacing (at least 8px) between interactive elements. Increase spacing on touch devices.
Form controls that are too small to tap easily.
Ensure checkboxes, radio buttons, and other form controls have adequate target size. Use padding to increase clickable area.
Note: These are official W3C resources for 2.5.8. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.5.8 Target Size (Minimum) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.5 Input Modalities