• 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 

.editor-toolbar button { width: 20px; height: 20px; padding: 0; border: none; }

Why it matters

A patient adding notes for their doctor hits the italic button while reaching for bold, since they sit flush together.

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

Toolbar buttons need both a larger box and visible gaps; padding alone isn't enough if it sits inside the click target.

.editor-toolbar button { width: 24px; height: 24px; padding: 4px; }
.editor-toolbar button + button { margin-left: 4px; }

Outcome

A patient formats their note with the correct button every time, without misfires.

Who is affected

People with tremor and older adults with reduced fine motor precision.

Learn more

Related scenarios