• 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 

.icon-btn.close, .icon-btn.kebab { width: 18px; height: 18px; margin: 0 2px; }

Why it matters

A claimant trying to close one line item's detail panel instead opens the adjacent kebab menu by mistake.

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

Test with the 24px circle method: two adjacent targets' circles must not overlap.

.icon-btn.close, .icon-btn.kebab { width: 24px; height: 24px; margin: 0 8px; }

Outcome

A claimant closes the right panel on the first tap instead of opening the wrong menu.

Who is affected

People with reduced dexterity and older adults with less precise pointer control.

Learn more

Related scenarios