• 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 

<button class="register-btn disabled" onclick="register(courseId)">Register</button>
<!-- CSS grays it out and blocks pointer clicks, but there's no disabled attribute or aria-disabled,
     and the onclick handler still fires for keyboard Enter -->

Why it matters

A screen reader or keyboard user can still activate "Register" on a full course and gets an unexplained error.

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

Use the native disabled attribute, or aria-disabled with the handler removed, instead of styling alone.

<button class="register-btn" disabled aria-disabled="true">Register</button>
<!-- or, to keep it focusable for a tooltip explanation: aria-disabled="true" with the onclick removed -->

Outcome

A student hears "Register, dimmed" and knows immediately the course is already full.

Who is affected

Screen reader and keyboard users browsing full courses cannot tell registration is closed until they hit an error.

Learn more

Related scenarios