Ensure interactive targets are large enough to activate easily
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If users need to aim precisely, the target is too small.
Why this matters and how to fix it
Why this matters
Small or tightly packed interactive elements require precision that many users do not have. People using touch screens, users with motor disabilities, tremors, or low vision can struggle to select small controls. Providing adequate target size and spacing reduces accidental activation and improves usability for everyone.
How to fix this issue
Make interactive targets at least 24×24 CSS pixels, or provide equivalent spacing of 8px between targets. The visible element does not need to be visually large — you can expand the clickable area using padding or a larger invisible hit zone.
Developer guidance
This issue frequently appears in icon-only buttons, close icons, pagination controls, table toolbar buttons, and mobile UIs. Apply padding to increase the interactive area without changing the visual design. Avoid placing multiple small touch targets directly adjacent to each other.
Code examples
Incorrect Implementation
<a href="#" style="display:inline-block; padding:2px;">×</a>Correct Implementation
<a href="#" style="display:inline-block; padding:10px;">×</a>Real-World Examples
Before
<button class="icon-btn"><svg width="12" height="12">...</svg></button>After
<button class="icon-btn" style="padding:8px;"><svg width="12" height="12">...</svg></button>CSS Example (Guidance)
/* Ensure interactive targets meet minimum size */
.icon-btn {
padding: 8px; /* Increases hit area without changing visual size */
min-width: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}Manual testing
- 1. Open DevTools and inspect the element's clickable area (not just the visible icon).
- 2. Confirm the clickable area is at least 24×24 CSS pixels OR has at least 8px spacing from adjacent elements.
- 3. Test using a trackpad or touch device — can you reliably tap/activate the target without mis-clicking?
- 4. If using a screen reader, ensure that the increased target size does not create overlapping focus outlines.
Trusted by organizations across Europe working toward WCAG and EAA conformance