Use only valid ARIA roles for each element

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.

Never assign ARIA roles that conflict with native element semantics.

Why this matters and how to fix it

Why this matters

Screen readers rely on roles to interpret elements. Assigning an invalid or conflicting role can cause incorrect or misleading announcements, breaking accessibility and making controls unusable for assistive technology users.

How to fix this issue

Use native HTML elements where possible. If ARIA roles are required for custom widgets, only assign roles permitted for that element type according to the WAI-ARIA specification. Remove redundant or conflicting roles from elements that already have correct semantics.

Automated detection · Manual review recommended

Developer guidance

Avoid assigning roles that conflict with native elements (for example, `role="link"` on a `<button>`). Ensure all custom widgets use valid ARIA roles defined in the WAI-ARIA specification.

Code examples

Incorrect Implementation

<button role="link">Submit</button>

Correct Implementation

<button type="submit">Submit</button>

Real-World Examples

Before

<button role="link">Submit</button> <!-- Screen readers may announce incorrectly -->

After

<button type="submit">Submit</button> <!-- Screen readers announce 'Submit, button' correctly -->

Manual testing

  1. 1. Inspect interactive elements for ARIA roles.
  2. 2. Confirm each role is valid for the element type using the WAI-ARIA specification.
  3. 3. Remove or replace any conflicting or redundant roles.
  4. 4. Test with a screen reader (NVDA, JAWS, or VoiceOver) to ensure correct announcement.
  5. 5. Run a scan with the GetWCAG automated scanner to confirm no invalid or conflicting roles remain.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance