Loading...
Loading content...
Loading content...
Touch targets should be at least 44x44 pixels.
Why it matters: Larger targets are easier to tap for everyone.
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: (Equivalent) The target is available through an equivalent link or control on the same page that is at least 44 by 44 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 44x44 CSS pixels in size. This is larger than the Level AA requirement of 24x24 pixels, making targets easier to tap for users with motor disabilities.
Why It's Important: Larger targets are easier to tap accurately, especially for users with motor disabilities, tremors, or limited dexterity. Small targets increase the likelihood of mis-taps and user frustration. On mobile devices, larger targets are essential for comfortable interaction. Even on desktop, larger targets benefit users with motor impairments.
Use CSS to ensure buttons, links, and form controls are at least 44x44 pixels. Padding counts toward the size, so you can have a small icon (like 24x24) with 10px padding on all sides to reach 44x44. The key is that the clickable/tappable area must be large enough, even if the visual element is smaller.
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 button is only 20x20 pixels, too small to tap easily.
<button style="width: 20px; height: 20px;">X</button>A button is 44x44 pixels, meeting the AAA requirement.
<button style="width: 44px; height: 44px; padding: 8px;">X</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.5.5 Target Size 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:
44x44 pixels is too large and will break my design.
Padding counts toward the size, so you can have a small icon (24x24) with 10px padding on all sides to reach 44x44. This often doesn't change visual appearance much.
This only applies to mobile devices.
Large targets benefit all users, including desktop users with motor disabilities. It's good practice regardless of device.
Small icon buttons (16x16 or 20x20 pixels) without adequate padding.
Add padding to reach 44x44px minimum. Use CSS padding or min-width/min-height. The icon can be small, but the clickable area must be large.
Links in text that are too small to tap easily.
While inline links are exempt, make them as large as possible. Consider making important links into buttons with adequate size.
Targets that are close together, causing mis-taps.
Ensure adequate spacing between targets (at least 8px). Consider increasing spacing on touch devices.
Note: These are official W3C resources for 2.5.5. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.5.5 Target Size 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