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.
Overview
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 24x24 CSS pixels, or separate adjacent small targets so their 24x24 activation areas do not overlap. Expand hit area with padding or wrapper hit zones without changing visual icon size.
Developer Guidance
This issue frequently appears in icon-only buttons, close icons, pagination controls, table toolbar buttons, and mobile UIs. Add hit-area tokens in your design system (for example min target size and spacing). Remember WCAG 2.5.8 has defined exceptions (inline, user-agent controlled, essential, equivalent), but default components should still meet 24x24.
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 Implementation
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. Inspect interactive controls in DevTools and measure effective hit area, not only visible icon size.
- 2. Confirm each target is at least 24x24 CSS pixels, or verify adjacent small targets have non-overlapping 24x24 activation zones.
- 3. Test on a touch device and trackpad for accidental taps on neighboring controls.
- 4. Verify enlarged hit areas do not overlap unrelated controls or obscure focus indication.
- 5. Document any exception cases (inline text links, essential constraints) in QA notes.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance