Ensure interactive targets are large enough to activate easily
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Small or tightly packed touch targets are difficult to activate for users with limited dexterity or tremors. Increasing target size and spacing improves usability for all users, especially on mobile devices.
How to fix this issue
Make interactive elements at least 24×24 CSS pixels in size. Add sufficient spacing between adjacent controls to prevent accidental taps. Combine small icons with larger clickable regions where appropriate.
Developer guidance
Measure button and link hit areas with browser dev tools. Avoid placing small icons or text links too close together. Use padding instead of increasing visual size if you need to preserve layout proportions.
Code examples
Incorrect Implementation
<a href='#' style='padding:2px;'>x</a>Correct Implementation
<a href='#' style='padding:12px 16px;'>Close</a>
Trusted by organizations across Europe working toward WCAG and EAA conformance