Robust · 4.1 Compatible
For all user interface components, including form controls, links, and custom scripted widgets, the name and role must be programmatically determinable, user-settable states, properties, and values must be programmatically settable, and changes to them must be exposed to assistive technologies.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Tab through each version: press Space on the order email option and Enter on Delivery options. Then compare what the screen reader preview says for each control.
Standard delivery takes three to five working days.
Express delivery arrives the next working day.
Standard delivery takes three to five working days.
Express delivery arrives the next working day.
The tools follow the version you last used.
What happened
Why it passes
A real checkbox is announced as a checkbox with its checked state, and Space changes it. Delivery options says whether its section is expanded or collapsed.
Why it fails
The order email option is a styled div: a screen reader hears plain text, not a checkbox, and Space does nothing. Delivery options opens its section but never says whether it is open.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<span class="checkbox is-checked" tabindex="0" onclick="this.classList.toggle('is-checked')">Keep me signed in</span>It looks checked and changes when clicked, but assistive technology gets no checkbox role and no checked state, so a screen reader reads it as plain text.
Passes
Live preview
<button type="button" role="switch" aria-checked="true" id="remember">Keep me signed in</button><script> const toggle = document.getElementById("remember"); toggle.addEventListener("click", () => { const on = toggle.getAttribute("aria-checked") === "true"; toggle.setAttribute("aria-checked", String(!on)); });</script>role="switch" gives the role, the text gives the name, and aria-checked changes on every press, so screen readers announce on or off. A native checkbox does the same with no script.
Fails
Live preview
<button type="button" class="accordion">Delivery options</button><div class="accordion-panel" hidden> <p>Standard delivery takes three to five working days.</p></div>Script shows and hides the panel, but the button never exposes aria-expanded, so a screen reader user cannot tell whether the section is open.
Passes
Live preview
const button = document.querySelector(".accordion");const panel = document.querySelector(".accordion-panel");button.setAttribute("aria-expanded", "false");button.addEventListener("click", () => { const open = button.getAttribute("aria-expanded") === "true"; button.setAttribute("aria-expanded", String(!open)); panel.hidden = open;});The button's state changes together with the panel, so a screen reader says expanded or collapsed each time it is pressed.
Why it matters
Screen reader, voice control, and switch users depend on assistive technology knowing what each control is, what it is called, and what state it is in. Without this, custom buttons, toggles, and menus are unusable or misleading.
W3C: Understanding 4.1.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures