role must be a valid, non-abstract ARIA role

Rule aria-valid-role · ARIA · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An unrecognised or abstract role is ignored by browsers, so the element falls back to its default semantics — usually not what the author intended.

How to fix#

Use a valid concrete role from WAI-ARIA. Abstract roles (e.g. "widget", "input") must never be used by authors.

Example#

<div role="buton">Save</div>

<div role="button">Save</div>

Example#

<div role="input">x</div>

<nav role="doc-toc" aria-label="Contents"><a href="#c1">Chapter 1</a></nav>

Example#

<span role="presentaton">x</span>

<svg role="graphics-document" aria-label="Site map"></svg>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WAI-ARIA — Roles