• Success Criterion 4.1.2
  • Conformance level A

Disabled Control That’s Only Disabled Visually, Not in Code

4.1.2 — Name, Role, Value

Scenario

Setting

A university's online course catalog

What’s wrong

Disabled conveyed visually only (class="disabled") while control stays enabled to assistive technology — state mismatch.

Example

Watch a university's online course catalog closely and you'll spot this: disabled conveyed visually only (class="disabled") while control stays enabled to assistive technology — state mismatch.

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes. In this case (a university's online course catalog), they hit a dead end with no way forward.

How to test

Inspect a 'disabled-looking' control in DevTools: check whether the disabled attribute (or aria-disabled) is actually set — if it's only styled to look disabled but remains enabled to AT, it fails.

How to fix

Disable the control for real (disabled/aria-disabled) so the announced state matches the visual.

Outcome

Once corrected, a university's online course catalog lets them get the same outcome as everyone else.

Who is affected

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

Learn more

Related scenarios