Ensure ARIA attributes are used as described in the specification of the element's role
Using ARIA attributes on elements where they are not intended can cause unpredictable behavior in assistive technologies. This could result in a poor user experience for individuals with disabilities who depend on these tools. Adhering to the ARIA specification is crucial to ensure assistive technologies can accurately interpret and convey the intended meaning of the content.
Why It Matters
Using ARIA attributes in unexpected ways can cause confusing behavior for assistive technologies. Adhering to ARIA specifications ensures that individuals with disabilities can effectively interpret and interact with web content.
How to Fix
For checkboxes, consider the following approaches:
-
Remove the
aria-checked
attribute from native HTML checkboxes and manage their state using theindeterminate
property. - If replacing the native checkbox with a custom element, ensure it has the appropriate role and is keyboard accessible.
For tr
elements with a role of row
, you may need to change the role of the parent table
or grid
to treegrid
.
Example
Fail
The following example incorrectly uses the aria-checked
attribute on a native checkbox, and the row
elements are part of a table
instead of a treegrid
:
<input type="checkbox" aria-checked="true">
<div role="table">
<div role="row" aria-expanded="false">...</div>
<div role="row" aria-posinset="1">...</div>
<div role="row" aria-setsize="10">...</div>
<div role="row" aria-level="1">...</div>
</div>
Pass
In this corrected example, the aria-checked
attribute is removed from the native checkbox, and the parent element is correctly set to treegrid
for the row
elements:
<input type="checkbox" checked>
<div role="treegrid">
<div role="row" aria-expanded="false">...</div>
<div role="row" aria-posinset="1">...</div>
<div role="row" aria-setsize="10">...</div>
<div role="row" aria-level="1">...</div>
</div>
About This Rule
This rule passes under the following conditions:
-
For
aria-checked
:- It is not used on an HTML
input
element of typecheckbox
. - Browsers ignore
aria-checked
on native checkboxes.
- It is not used on an HTML
-
For
row
elements:-
Attributes like
aria-posinset
,aria-setsize
,aria-expanded
, andaria-level
are used only when therow
is part of atreegrid
.
-
Attributes like
Other Rules
Interested in other web accessibility rules? Please see these other rules: