aria-* attributes must be allowed for the element’s role

Rule aria-allowed-attr · ARIA · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Each role supports a specific set of states and properties. Applying an unsupported one (e.g. aria-checked on a link) produces undefined behaviour and may be ignored or mis-announced.

How to fix#

If the state is not needed, remove the attribute. If it is, move it to an element whose role supports it (aria-checked belongs on checkbox, radio, switch or menuitemcheckbox; aria-expanded on button, combobox, tab or treeitem), change the role to one that supports it, or use the native element that has the state built in (<input type="checkbox"> instead of a link with aria-checked). Global attributes such as aria-label, aria-describedby and aria-hidden are allowed on any role.

Example#

<a href="/x" role="link" aria-checked="true">x</a>

<a href="/x" role="link">x</a>

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 — Supported States