Success Criterion 4.1.2
Conformance level A

Custom Checkbox or Toggle With No Role or Checked State

4.1.2 — Name, Role, Value

Scenario

Setting

A government tax-filing portal

What’s wrong

Custom checkbox/toggle/radio with no role and no aria-checked (the on/off state in code) — state invisible to assistive technology.

Example

<div class="checkbox" onclick="toggle()"></div>

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

How to test

Inspect a custom checkbox/toggle/radio in DevTools: check for the correct role (checkbox/switch/radio) and a live aria-checked value — either missing fails.

How to fix

Add the proper role (checkbox/switch/radio) and a live aria-checked (the on/off state in code) state.

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On a government tax-filing portal, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can complete the task without hitting this wall.

Who is affected