Success Criterion 4.1.2
Conformance level A

Invalid or Conflicting ARIA Attributes on a Custom Widget

4.1.2 — Name, Role, Value

Scenario

Setting

A weather app's forecast screen

What’s wrong

Invalid/conflicting ARIA: aria-checked (the on/off state in code) on a plain div without checkbox role — abstract roles — unsupported attribute/role pairs.

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

Inspect ARIA attributes in DevTools' Accessibility panel for warnings: invalid or unsupported role/attribute combinations fail.

How to fix

Use valid, supported role/attribute combinations — remove ARIA that conflicts with the element's role.

<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 weather app's forecast screen, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they no longer have to work around this.

Who is affected