• 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 aria-checked="true" onclick="toggleFavorite('Austin')">★ Austin</div>
<!-- aria-checked is only valid on roles like checkbox, radio, switch, or menuitemcheckbox;
     this div has no role at all -->

Why it matters

Screen readers ignore aria-checked on an element with no matching role, so the favorite star announces nothing.

How to test

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

How to fix

Every state attribute needs a role that actually supports it; check the ARIA spec's allowed states before adding one.

<div role="checkbox" aria-checked="true" tabindex="0"
     onclick="toggleFavorite('Austin')" onkeydown="handleFavKey(event)">★ Austin</div>

Outcome

A user hears "checked, Austin" and knows the city is already saved as a favorite.

Who is affected

Screen reader users managing favorite cities cannot tell which ones are already starred.

Learn more

Related scenarios