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 the indeterminate 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 type checkbox.
  • Browsers ignore aria-checked on native checkboxes.
• For row elements:
  • Attributes like aria-posinset, aria-setsize, aria-expanded, and aria-level are used only when the row is part of a treegrid.