Skip to content
English
  • There are no suggestions because the search field is empty.

A: Required ARIA attributes must be provided (WCAG 4.1.2)

aria-required-attr

Ensure that elements with ARIA roles have all required ARIA attributes.

This means

Certain roles require mandatory attributes. Examples:
slider needs aria-valueminaria-valuemaxaria-valuenow;
checkbox and switch need aria-checked;
tab needs aria-selected;
progressbar needs values and a name.
If these details are missing, assistive technology cannot correctly announce state and range.

Impact

Users do not understand the meaning and status of controls. Interaction patterns work unreliably, leading to frequent errors and interruptions. The result is violations of the WCAG.

Recommendation

  • Use native HTML elements whenever possible.

  • Always set all mandatory attributes for ARIA roles according to the specification and keep them updated during state changes.

  • Assign names using aria-label or aria-labelledby.

  • Verify with automated checks and screen reader tests.

Example

Problematic

<div role="slider"></div>

Better

<p id="vol-label">Volume</p>
<div role="slider"
     aria-labelledby="vol-label"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="30">
</div>

Second example

Problematic

<div role="checkbox">Newsletter</div>

Better

<div role="checkbox" aria-checked="false" tabindex="0">Newsletter</div>
Related WCAG criterion:
WCAG 4.1.2 – Name, Role, Value