Use only valid ARIA attributes for each role
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.
Only use ARIA attributes that are valid for the element’s role.
Overview
Why this matters
Assigning ARIA attributes that are not supported by an element's role can cause assistive technologies to ignore or misinterpret the element’s behavior. This leads to confusion and broken or unpredictable interactions for screen reader users.
How to fix this issue
Verify the intended role of the element, then ensure that only ARIA attributes permitted for that role are used according to the WAI-ARIA specification. Remove unsupported attributes or adjust the role to match the intended behavior. Prefer native HTML elements whenever possible.
Developer Guidance
Custom UI components often misuse ARIA attributes. For example, `aria-checked` should only be used with roles such as `checkbox`, `radio`, `menuitemcheckbox`, or `menuitemradio`. Enforce role-attribute compatibility in your design system and validate components using the GetWCAG automated scanner.
Code Examples
Incorrect Implementation
<button role="link" aria-checked="true">Submit</button>Correct Implementation
<button>Submit</button>Real-World Implementation
Before
<button role="link" aria-checked="true">Submit</button> <!-- Misleading info for screen readers -->After
<button>Submit</button> <!-- Correct announcement and behavior -->Manual Testing
- 1. Inspect elements with ARIA roles and attributes.
- 2. Confirm each attribute is allowed for the assigned role via WAI-ARIA spec.
- 3. Remove unsupported attributes or correct the role.
- 4. Test with a screen reader to ensure behavior is announced correctly.
- 5. Use the GetWCAG automated scanner to check and enforce correct role-attribute usage.
Related Robust Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance