• Success Criterion 2.5.8
  • Conformance level AA

Slider Thumb Target Smaller Than the Required Minimum Size

2.5.8 — Target Size (Minimum)

Scenario

Setting

A nonprofit's donation form

What’s wrong

Sliders' thumb targets under 24px with nothing equivalent elsewhere.

Example 

.amount-slider::-webkit-slider-thumb { width: 14px; height: 14px; }

Why it matters

A donor trying to set a specific amount by dragging the thumb keeps missing it, since there's no larger tap zone.

How to test

Measure a slider's draggable thumb: if it's under 24px with no equally-sized equivalent control elsewhere, it fails.

How to fix

Enlarge the thumb to 24px and add a linked number input as a precise, drag-free alternative.

.amount-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
<input type="number" id="amountInput" aria-label="Donation amount" value="25">

Outcome

A donor either grabs the larger thumb easily or types the exact amount they want to give.

Who is affected

People with tremor and limited fine motor control who need a bigger, more forgiving thumb target.

Learn more

Related scenarios