aria-allowed-role

Description

The aria-allowed-role rule ensures that ARIA role attributes are only applied to HTML elements where those roles are permitted. The ARIA specification defines which roles may be used on which host elements. Applying a role that is not allowed for an element causes assistive technologies to behave unpredictably, often ignoring the role entirely or misrepresenting the element to users.

This rule meets WCAG requirements by:

1. Exposing Accurate Role Information (WCAG 4.1.2 Name, Role, Value): It ensures that the role of every user interface component can be programmatically determined correctly, so assistive technologies communicate the right semantics to users.
2. Conveying Information and Relationships (WCAG 1.3.1 Info and Relationships): It prevents the misuse of roles that would obscure the true structure and meaning of content from assistive technologies.

To comply with this rule, only use ARIA roles that are explicitly permitted for the HTML element you are marking up. Where possible, prefer native semantic HTML elements over role overrides.

Examples

This example shows role="navigation" applied to a <ul> element. The navigation role is not permitted on <ul>, so the native landmark semantics will not be correctly conveyed.

Here, the native <nav> element provides the navigation landmark, with the <ul> kept for its correct list semantics.

How to fix?

To fix violations of the aria-allowed-role rule, follow these steps:

• Consult the ARIA in HTML specification to verify which roles are permitted for the HTML element you are working with.

• Replace disallowed role assignments with the appropriate native HTML element that carries the correct implicit ARIA role (for example, use <nav> for navigation, <main> for main content, <button> for buttons).

• If you must use a non-semantic element, choose a role that is explicitly listed as allowed for that element type in the ARIA specification.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.3.1: Info and Relationships