• 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="custom-checkbox checked" onclick="toggleDeclaration()"></div>
<span>I declare the information above is accurate</span>
<!-- the checkbox is a styled div; "checked" is only a CSS class, with no role or aria-checked -->

Why it matters

A screen reader user cannot tell whether they have agreed to the declaration and may submit a return without confirming it.

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

Toggle the aria-checked value in the same function that toggles the CSS class.

<div class="custom-checkbox" role="checkbox" aria-checked="true" tabindex="0"
     aria-labelledby="declText" onclick="toggleDeclaration()" onkeydown="handleCheckboxKey(event)"></div>
<span id="declText">I declare the information above is accurate</span>

Outcome

A filer hears "checked, I declare the information above is accurate" before submitting the return.

Who is affected

Screen reader users filing taxes cannot verify or toggle the required declaration checkbox.

Learn more

Related scenarios