What This Rule Checks
Certain ARIA attributes, such as aria-checked for checkboxes or aria-level for rows, should only be applied when appropriate and in line with the structure of the HTML element they are assigned to. Misusing ARIA attributes can lead to confusion for screen reader users, as well as issues with keyboard accessibility.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Misapplied conditional ARIA attributes cause assistive technologies to announce conflicting or redundant state information. Users may hear contradictory announcements like “checkbox, not checked, checked” which erodes trust in the interface.
How to Fix
For Checkboxes:
Use Native Checkbox Attributes: Instead of applying aria-checked, rely on the browser’s native checkbox state (checked, unchecked, or mixed) to convey the checkbox’s status.
Replace with a Custom Element: If using a custom checkbox element, ensure it has the correct ARIA role (role=”checkbox”) and is fully keyboard accessible.
For Rows (tr Elements):
Use Treegrid Structure for Complex Tables: If you need to apply attributes like aria-level or aria-expanded to tr elements, ensure the table uses a role=”treegrid”. This signals that the table has a hierarchical structure and the attributes are necessary.
Code Examples
<!-- aria-checked used on a standard checkbox without ARIA role -->
<input type="checkbox" aria-checked="true">
<!-- aria-level on element without heading role -->
<p aria-level="3">Not a heading</p>
Copy
<!-- Native checkbox handles state automatically -->
<input type="checkbox" checked>
<!-- aria-level with proper heading role -->
<div role="heading" aria-level="3">
Section Title
</div>
Copy
Common Mistakes to Avoid
- Applying aria-checked to native checkboxes (the browser already handles this).
- Using aria-level on elements without a heading or treeitem role.
- Adding ARIA state attributes that duplicate native HTML behavior.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value