- 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
Picture a weather app's forecast screen: invalid/conflicting ARIA: aria-checked (the on/off state in code) on a plain div without checkbox role — abstract roles — unsupported attribute/role pairs.
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. In this case (a weather app's forecast screen), they hit a dead end with no way forward.
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.
Outcome
Once corrected, a weather app's forecast screen 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus