- Success Criterion 2.5.8
- Conformance level AA
Small Icon Buttons Packed Too Close Together to Tap
2.5.8 — Target Size (Minimum)
Scenario
Setting
An insurance company's claims form
What’s wrong
Icon buttons (close ×, kebab menus) rendered ~16–20px with adjacent targets inside the 24px circle test.
Example
A QA pass on an insurance company's claims form turns this up: icon buttons (close ×, kebab menus) rendered ~16–20px with adjacent targets inside the 24px circle test.
Why it matters
People with tremor or larger touch contact areas, and anyone tapping on a moving vehicle. The practical effect on an insurance company's claims form: they lose track of where they are on the page.
How to test
Measure icon buttons (close ×, kebab/three-dot menus) in DevTools: if rendered around 16-20px with adjacent targets falling inside the 24px circle test, it fails.
How to fix
The target must be at least 24x24 CSS px, or have enough spacing that a 24px circle around its center overlaps no other target, or a compliant equivalent control must exist.
Outcome
That one change on an insurance company's claims form means they keep track of where they are on the page.
Who is affected
People with tremor or larger touch contact areas, and anyone tapping on a moving vehicle.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tap Target Smaller Than the Required 24×24 Pixel Minimum
- Pagination Numbers Packed Too Tightly Below 24 Pixels
- Tiny Carousel Dots Clustered With No Spacing Between Them
- Calendar Day Cells Too Small to Tap in Compact View
- Toolbar Icons Packed Edge to Edge With No Gap
- Checkbox Hit Area Limited to Its Tiny Visible Glyph