Best practice: ARIA role should be appropriate for the element
aria-allowed-role
Ensure that the value of the role attribute for this element is appropriate.
This means
An element receives an ARIA role that is not allowed for its HTML type or that improperly overrides the strong native semantics. Assistive technologies thus receive incorrect information.
Impact
Screen reader announcements, focus, and keyboard behavior become inconsistent. This complicates orientation and can lead to misuse and interruptions.
Recommendation
- Prefer native HTML elements (e.g.,
<button>,<nav>,<ul>/<li>). - Do not set conflicting roles (do not override strong semantics).
- If necessary, use only permissible roles according to ARIA in HTML.
- Remove redundant roles (if the implicit role already fits).
Example
Problematic
<h2 role="button">More details</h2> <!-- Heading declared as button -->
<img src="logo.png" alt="Start" role="navigation"> <!-- Image as landmark -->
<table role="list">…</table> <!-- Table declared as list -->
Better
<button type="button">More details</button> <!-- native control -->
<nav aria-label="Main navigation">…</nav> <!-- appropriate landmark -->
<ul>…</ul> <!-- list instead of role on <table> -->