Ensures ARIA Attributes Are Used as Described In the Specification of the Element’s Role
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
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.
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.
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.
<label>
<input type="checkbox" checked>
I agree to make my website accessible
</label>
Copy
<label>
<input type="checkbox" aria-checked="true">
I agree to make my website accessible
</label>
Copy
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.
<table role="treegrid">
<tr aria-level="1" aria-expanded="false">
<td role="gridcell">My Downloads</td>
</tr>
</table>
Copy
<table>
<tr aria-level="1" aria-expanded="false">
<td>My Downloads</td>
</tr>
</table>
Copy
For more examples, visit W3C’s GitHub’s ATC Rules library.