Rule ID: ace-aria-required-attr

Confirm the elements with ARIA roles include all mandatory ARIA attributes for that role

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Deafblind Mobility Legal Risk

What This Rule Checks

When using ARIA roles, certain attributes are required to ensure that assistive technologies can properly interpret and convey the purpose of elements to users. These attributes include both states (e.g., aria-checked, aria-expanded) and properties (e.g., aria-label, aria-valuenow). Failing to provide required attributes can lead to incomplete or inaccessible content.

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

Missing required ARIA attributes means assistive technologies cannot convey the element’s current state. A checkbox without aria-checked is announced as “checkbox” with no indication of whether it’s selected. This is a critical WCAG 4.1.2 violation.

How to Fix

To fix this issue, make sure that all required ARIA states or properties are present for the given element. Check the list of required ARIA attributes for the specific role you’re using and ensure they are applied correctly.

Add Missing ARIA State or Property: Ensure that the required state or property (e.g., aria-checked, aria-label, aria-valuenow) is present and correctly applied to the element.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Checkbox role missing required aria-checked -->
<div role="checkbox" tabindex="0">
  Accept terms
</div>

<!-- Slider missing required attributes -->
<div role="slider" tabindex="0"></div>

Copy

Correct Markup Solutions:

Code example

<!-- Checkbox with required aria-checked -->
<div role="checkbox" aria-checked="false" tabindex="0">
  Accept terms
</div>

<!-- Slider with all required attributes -->
<div
  role="slider"
  tabindex="0"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Volume">
</div>

Copy

Common Mistakes to Avoid

Forgetting that custom ARIA widgets need state attributes that native elements handle automatically.
Not updating required ARIA attributes when state changes (e.g., toggling aria-checked on click).
Omitting aria-valuenow, aria-valuemin, or aria-valuemax on range widgets.

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