Ensures ARIA Attributes Are Used as Described In the Specification of the Element’s Role
According to WCAG, some ARIA attributes can only be added to an element under certain conditions.
Certain attributes have different limitations to them though:
aria-checked: This attribute cannot be added to an HTML input element with type=”checkbox”. Because a checked state is determined by a browser, aria-checked should be ignored. Browsers don’t always do this consistently though, so the difference between the native checkbox state and the aria-checked value will create differences when a site is accessed by screen readers and other assistive technologies.
aria-posinset, aria-setsize, aria-expanded, and aria-level: These attributes are conditional if they are placed one after the other in a row. These attributes can only be used when the row is part of a treegrid. When placed within a table or grid, these attributes have no function and could result in unpredictable behavior from assistive technologies.
Why It Matters
When elements don’t work as expected, it can lead to a poor user experience for people who rely on assistive technology. It is important to ensure that assistive technologies can interpret and relay the intended meaning of content correctly.
Fixing the Issue
When dealing with checkboxes, one of two solutions can be used. One option is to remove aria-checked, allowing the browser’s native checkbox state to indicate whether the element is checked or not checked.
The other option is to replace the native HTML checkbox with a different element. Doing so means you also need to provide it with a role and ensure that it is keyboard accessible.
Good Code Example
<label>
<input type="checkbox" checked>
I agree to make my website accessible
</label>
Copy Bad Code Example
<label>
<input type="checkbox" aria-checked="true">
I agree to make my website accessible
</label>
Copy Fixing the Issue
For tr elements and elements with role=”row”, you may need to change the role of the parent table or grid to a treegrid if the attributes are essential.
Good Code Example
<table role="treegrid">
<tr aria-level="1" aria-expanded="false">
<td role="gridcell">My Downloads</td>
</tr>
</table>
Copy Bad Code Example
<table>
<tr aria-level="1" aria-expanded="false">
<td>My Downloads</td>
</tr>
</table>
Copy Test Cases
For more examples, visit W3C’s GitHub’s ATC Rules library.