• Success Criterion 2.5.8
  • Conformance level AA

Checkbox Hit Area Limited to Its Tiny Visible Glyph

2.5.8 — Target Size (Minimum)

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Checkbox/radio hit areas limited to the 13–16px native glyph with label not part of the target.

Example 

<label><input type="checkbox" style="width:14px;height:14px;"> Manual transmission</label>
<!-- clicking the label text does nothing because it isn't wrapped in <label for> -->

Why it matters

A buyer filtering by transmission type has to hit a 14-pixel box exactly, since the surrounding text does nothing.

How to test

Measure a checkbox/radio's actual clickable hit area: if it's limited to just the 13-16px native glyph and the adjacent label text isn't part of the clickable target, it fails.

How to fix

Wrapping the input in its label makes the whole row, not just the glyph, a valid click target.

<label class="filter-option" for="manual">
  <input type="checkbox" id="manual">
  Manual transmission
</label>
.filter-option { display: flex; align-items: center; min-height: 24px; padding: 4px 0; }

Outcome

A buyer taps anywhere on the words 'Manual transmission' and the filter applies.

Who is affected

People with limited fine motor control and touchscreen users who expect to tap anywhere on a filter's label.

Learn more

Related scenarios