Success Criterion 4.1.2
Conformance level A

Control Announcing a State That Contradicts Its Real Behavior

4.1.2 — Name, Role, Value

Scenario

Setting

A coworking-space booking app

What’s wrong

A control announces a false state that contradicts its actual behavior. 'read-only' on an interactive combobox, 'collapsed' while visibly expanded, 'disabled' while fully active, so assistive technology users skip or mistrust working controls.

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

Compare the control's announced state to its actual behavior with a screen reader: 'read-only' announced on a working combobox, or 'collapsed' while visibly expanded, is a false state and fails.

How to fix

Correct the state wiring so announced state always matches actual behavior (interactive ≠ read-only, expanded ≠ collapsed).

<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 coworking-space booking app, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can finish what they came here to do.

Who is affected