Names, roles & states
An ARIA Attribute Breaks the Rules for This Element
Some ARIA attributes only work in certain situations, and when misused, screen readers announce the wrong state or nothing at all.
aria-conditional-attrWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
ARIA attributes tell screen readers about a control's state, like checked or expanded. Some are only allowed in special cases. One example is aria-checked on a real checkbox. Another is aria-expanded on a table row.
When they're used outside those cases, the screen reader may report the wrong state, or skip it. People who can't see the screen then act on false information.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They may hear "checked" for an empty box, or get no hint that a row can open. | High impact |
| Low-vision users (magnification) | Affected if they also use a screen reader, as many do. | Partial impact |
| Cognitive and neurodivergent users | When the voice and the screen disagree, it's confusing and erodes trust. | Partial impact |
| Voice control users | They can still say the control's name, but feedback about its state may be wrong. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It fails WCAG 4.1.2 Name, Role, Value at Level A, the minimum. Complaints under Australia's Disability Discrimination Act point to WCAG, and EN 301 549 includes it too. | High impact |
| Conversion | A checkbox that reports the wrong state can mean unwanted add-ons or missed consent. That leads to abandoned forms and complaints. | Moderate impact |
| SEO | No real search benefit — don't sell it as one. | Low impact |
| Brand trust | Wrong information feels careless to people who rely on screen readers. | Moderate impact |
| Cost to fix | Usually a small fix: delete the extra attribute. Fix it once in the shared component. | High impact |
Fixing it in code
A real checkbox with an extra state
Don't
<input type="checkbox" id="terms" aria-checked="true">
<label for="terms">Accept terms</label>A screen reader says: “Accept terms, checkbox, checked (but the box is empty)”
Do
<input type="checkbox" id="terms">
<label for="terms">Accept terms</label>A screen reader says: “Accept terms, checkbox, not checked”
A real checkbox already reports its own state, so aria-checked only causes conflict.
A table row that opens more detail
Don't
<tr aria-expanded="false">
<td>Order 1042</td>
</tr>A screen reader says: “Order 1042”
Do
<tr>
<td><button aria-expanded="false">Order 1042</button></td>
</tr>A screen reader says: “Order 1042, button, collapsed”
Only tree-grid rows can expand. Put the state on a button inside the row instead.
Designer's handoff note
For any expandable row or checkbox, note which part the person actually presses. That part should carry the state, like "collapsed" or "checked".
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- You hear a state that matches the screen, like "not checked" then "checked".
- Fail
- The spoken state doesn't match the screen, or no state is spoken at all.
Check these at the same time
- An ARIA attribute is used where it isn't allowed
aria-allowed-attr
What a green scan still misses
A scanner flags the misused attribute. It can't tell whether your fix puts the state on the right control — for that, listen with a screen reader.
Reference
- Rule ID
aria-conditional-attr- Raised by
- axe-core: “ARIA attributes must be used as specified for the element's role”
- WCAG
- 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.4.1.2 · RGAA 7.1.1
- Last reviewed
- 14 October 2026