Include all required ARIA attributes for elements with roles
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every ARIA role must include all its required attributes for proper announcements.
Why this matters and how to fix it
Why this matters
Many ARIA roles need specific attributes to convey state and behavior. Missing required attributes can cause screen readers to announce controls incorrectly or omit important state information, making components confusing or unusable.
How to fix this issue
Check the ARIA role specification and provide all required attributes. For example, `role="checkbox"` needs `aria-checked`, and `role="slider"` needs `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Use the WAI-ARIA 1.2 role definitions as a reference.
Developer guidance
Custom components that use `<div role='...'>` often miss required ARIA attributes. Ensure any component that defines a role also includes all required attributes and updates them when the state changes. Use the GetWCAG automated scanner during development to detect and fix missing attributes early.
Code examples
Incorrect Implementation
<div role='checkbox'></div>Correct Implementation
<div role='checkbox' aria-checked='false'></div>Real-World Examples
Before
<div role='slider'></div> <!-- No aria-valuenow/min/max; screen reader cannot report current value -->After
<div role='slider' aria-valuemin='0' aria-valuemax='100' aria-valuenow='50'></div> <!-- Screen reader announces slider with current value -->Manual testing
- 1. Inspect elements with ARIA roles.
- 2. Verify that all required attributes for the role are present.
- 3. Check that attributes update correctly when state changes.
- 4. Use a screen reader to confirm correct announcement of state and value.
- 5. Run the GetWCAG automated scanner to confirm all required attributes are present.
Trusted by organizations across Europe working toward WCAG and EAA conformance