A: ARIA roles used must conform to valid values (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that all elements with an ARIA role also use a valid value.

This means

The role value must exist in the WAI ARIA specification and must not be abstract. Typos, made-up roles, or outdated names are invalid. Multiple roles are only allowed if each role is valid and the first role carries the intended semantics.

Impact

Invalid roles break semantics. Screen readers announce elements incorrectly or not at all. Users lose orientation and this constitutes a violation of WCAG.

Recommendation

• Prefer native HTML with correct semantics (<button>, <nav>, <header>).
• If necessary, only set valid, non-abstract roles (e.g., role="navigation", role="dialog").
• Check roles against the current ARIA reference.
• Do not use invented roles, typos, or outdated roles.

Example

Problematic

<div role="buttonn">Next</div>          <!-- Typo -->
<nav role="navigationmenu">…</nav>        <!-- invalid role -->
<div role="input">…</div>                 <!-- abstract role -->

Better

<button>Next</button>                    <!-- native element -->
<nav aria-label="Main navigation">…</nav>  <!-- implicit navigation role -->
<div role="navigation" aria-label="Main navigation">…</div>  <!-- explicit if necessary -->