Success Criterion 2.5.8
Conformance level AA

Toolbar Icons Packed Edge to Edge With No Gap

2.5.8 — Target Size (Minimum)

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

Toolbar icon rows (rich text editors) at 20px with zero gap.

Example

.icon-button { width: 16px; height: 16px; }

Why it matters

People with tremor or larger touch contact areas, and anyone tapping on a moving vehicle.

How to test

Measure toolbar icon buttons (e.g., in a rich text editor) in DevTools: 20px icons with zero gap between them fail.

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. .icon-button { width: 24px; height: 24px; } Interactive targets need at least 24 by 24 CSS pixels, or enough spacing that adjacent targets don't overlap that minimum.

Outcome

On a hospital's patient portal appointment scheduler, this barrier is gone for people with tremor or larger touch contact areas — they no longer have to work around this.

Who is affected