ARIA attributes must be used as specified for the element's role
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- EN 301 549
WCAG Success Criteria [WCAG 2.1 (A)]
- 4.1.2: MUST: Name, Role, Value
WCAG Success Criteria [WCAG 2.0 (A)]
- 4.1.2: MUST: Name, Role, Value
WCAG Success Criteria [WCAG 2.2 (A)]
- 4.1.2: MUST: Name, Role, Value
EN 301 549 Guidelines
- 9.4.1.2: MUST: Name, Role, Value
How to Fix the Problem
For checkboxes, there are two options. Either aria-checked
is removed, and the browser's native checkbox state is used instead to
indicate whether the element is checked, not checked, or mix. An HTML checkbox
can be put into a mixed position by using setting its
indeterminate property.
The other option for checkboxes is to replace the native HTML checkbox with a
different element. When you do this, you will also need to Provide it with a
role, and ensure that it is keyboard accessible.
Good Example
<label>
<input type="checkbox" checked>
I agree to make my website accessible
</label>Bad Example
<label>
<input type="checkbox" aria-checked="true">
I agree to make my website accessible
</label>
For tr elements and elements with role="row", it may
be necessary to change the role of the parent table or
grid to a treegrid if the attributes are essential.
Good Example
<table role="treegrid">
<tr aria-level="1" aria-expanded="false">
<td role="gridcell">My Downloads</td>
</tr>
</table>Bad Example
<table>
<tr aria-level="1" aria-expanded="false">
<td>My Downloads</td>
</tr>
</table>Why it Matters
Using ARIA attributes on elements where they are not expected can result in unpredictable behavior for assistive technologies. This can lead to a poor user experience for people with disabilities who rely on these technologies. It is important to follow the ARIA specification to ensure that assistive technologies can properly interpret and communicate the intended meaning of the content.
Rule Description
Some ARIA attributes are only allowed on an element under certain conditions. Different attributes have different limitations to them:
aria-checked: This should not be used on an HTML
input element with type="checkbox". Such elements
have a checked state determined by the browser. Browsers should
ignore aria-checked in this scenario. Because browsers do this
inconsistently, a difference between the native checkbox state and the
aria-checked value will result in differences between screen
readers and other assistive technologies.
The aria-posinset, aria-setsize,
aria-expanded, and aria-level
attributes are conditional when used on a row. This can be either
tr element, or an element with role="row". These
attributes can only be used when the row is part of
treegrid. When used inside a table or
grid, these attributes have no function, and could result in
unpredictable behavior from screen readers and other assistive technologies.
The Algorithm (in simple terms)
Check that ARIA attributes are not used in a way that their role describes authors should not, or must not do. I.e the use of this ARIA attribute is conditional.
Resources
Refer to the complete list of axe 4.10 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: