Include all required ARIA attributes for elements with roles
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
If an element uses a role that requires specific ARIA attributes, assistive technologies expect them to be present. Missing required attributes can cause incomplete or misleading announcements.
How to fix this issue
Consult the ARIA specification for each role and ensure all required properties (like `aria-checked` for checkboxes) are included.
Developer guidance
When dynamically changing ARIA states, ensure you also update all dependent attributes. Example: `role='checkbox'` must have a valid `aria-checked` state.
Code examples
Incorrect Implementation
<div role='checkbox'></div>Correct Implementation
<div role='checkbox' aria-checked='false'></div>
Trusted by organizations across Europe working toward WCAG and EAA conformance