• Success Criterion 2.5.8
  • Conformance level AA

Tiny Carousel Dots Clustered With No Spacing Between Them

2.5.8 — Target Size (Minimum)

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Carousel dots ~8–10px clustered together.

Example 

.template-dot { width: 8px; height: 8px; margin: 0 1px; }

Why it matters

Someone browsing chart templates can't reliably jump to template 5 without hitting template 4 or 6 by mistake.

How to test

Measure carousel dot indicators in DevTools: clusters of ~8-10px dots with insufficient spacing fail.

How to fix

Keep the small visible dot, but give it a full 24px invisible tap area around it.

.template-dot { width: 24px; height: 24px; margin: 0; }
.template-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: block; margin: auto; }

Outcome

A user taps the fifth dot and the matching template preview appears every time.

Who is affected

People with tremor and users of styluses or adapted pointers who need more forgiving target sizes.

Learn more

Related scenarios