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-valuemin, aria-valuemax, aria-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-labeloraria-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