Use ARIA attributes only when allowed for a role

WCAG 4.1.2
Name, Role, Value

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.

Do not mix ARIA attributes with roles that remove semantics.

Why this matters and how to fix it

Why this matters

Roles like `presentation` or `none` remove semantic meaning. Adding ARIA attributes (like `aria-label` or `aria-describedby`) creates conflicting information for assistive technologies, which may ignore the element or announce it unpredictably.

How to fix this issue

Ensure ARIA attributes are allowed for the element’s role. Remove labeling or state attributes from elements with `role="presentation"` or `role="none"`. Use semantic HTML or valid roles for actionable elements.

Automated detection · Manual review recommended

Developer guidance

Dynamic prop spreading often causes invalid ARIA combinations. Enforce rules in component libraries to prevent `role="presentation"` with `aria-label`. Validate with the GetWCAG automated scanner during CI.

Code examples

Incorrect Implementation

<div role="presentation" aria-label="Info"></div>

Correct Implementation

<div aria-label="Info"></div>

Real-World Examples

Before

<span role="presentation" aria-describedby="desc">Important info</span> <!-- Screen reader ignores aria-describedby -->

After

<span aria-describedby="desc">Important info</span> <!-- Assistive technology announces the description -->

Manual testing

  1. 1. Identify elements with `role="presentation"` or `role="none"`.
  2. 2. Check for any ARIA attributes that add meaning (e.g., `aria-label`, `aria-describedby`).
  3. 3. Remove or adjust attributes so they match the allowed set for the role.
  4. 4. Test with screen readers to confirm correct announcements.
  5. 5. Run automated accessibility linters to catch invalid combinations.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance