• Success Criterion 2.5.8
  • Conformance level AA

Tap Target Smaller Than the Required 24×24 Pixel Minimum

2.5.8 — Target Size (Minimum)

Scenario

Setting

A subscription box service's account settings

What’s wrong

The toggle switches in account settings render at 16 by 16 pixels with no spacing between them, well under the 24-by-24-pixel minimum target size the criterion requires.

Example 

.toggle-switch { width: 16px; height: 16px; margin: 0; }

Why it matters

A subscriber trying to turn off email notifications repeatedly hits the wrong toggle in the tightly packed settings list.

How to test

Measure the target's clickable area in DevTools: it must be at least 24x24 CSS px, or have enough spacing that a 24px circle centered on it doesn't touch another target, or have an equally-sized equivalent elsewhere.

How to fix

Meeting 24x24 CSS pixels with a few pixels of margin around each toggle prevents most accidental taps.

.toggle-switch { width: 24px; height: 24px; margin: 4px 0; }

Outcome

A subscriber taps the correct toggle on the first try and stops the emails they meant to stop.

Who is affected

People with limited fine motor control, tremor, and larger fingers using a touchscreen.

Learn more

Related scenarios