Linter Rule: No abstract ARIA roles

Rule: html-no-abstract-roles

Description

Prevent usage of WAI-ARIA abstract roles in the role attribute.

Rationale

The WAI-ARIA specification defines a set of abstract roles that are used to support the ARIA Roles Model for the purpose of defining general role concepts.

Abstract roles are used for the ontology only. They exist to help organize the hierarchy of roles and define shared characteristics, but they are not meant to be used by authors directly. Using abstract roles in content provides no semantic meaning to assistive technologies and can lead to accessibility issues.

Authors MUST NOT use abstract roles in content. Instead, use one of the concrete roles that inherit from these abstract roles. For example, use button instead of command, or navigation instead of landmark.

The following abstract roles must not be used:

• command
• composite
• input
• landmark
• range
• roletype
• section
• sectionhead
• select
• structure
• widget
• window

Examples

✅ Good

<div role="button">Push it</div>

<nav role="navigation">Menu</nav>

<div role="alert">Warning!</div>

<div role="slider" aria-valuenow="50">Volume</div>

🚫 Bad

<div role="window">Hello, world!</div>
The `role` attribute must not use abstract ARIA role `window`. Abstract roles are not meant to be used directly. (html-no-abstract-roles)
The `role` attribute must be a valid ARIA role. Role `window` is not recognized. (html-aria-role-must-be-valid)

<div role="widget">Content</div>
The `role` attribute must not use abstract ARIA role `widget`. Abstract roles are not meant to be used directly. (html-no-abstract-roles)
The `role` attribute must be a valid ARIA role. Role `widget` is not recognized. (html-aria-role-must-be-valid)

<div role="command">Action</div>
The `role` attribute must not use abstract ARIA role `command`. Abstract roles are not meant to be used directly. (html-no-abstract-roles)
The `role` attribute must be a valid ARIA role. Role `command` is not recognized. (html-aria-role-must-be-valid)

<div role="landmark">Navigation</div>
The `role` attribute must not use abstract ARIA role `landmark`. Abstract roles are not meant to be used directly. (html-no-abstract-roles)
The `role` attribute must be a valid ARIA role. Role `landmark` is not recognized. (html-aria-role-must-be-valid)

References

• WAI-ARIA 1.0: Abstract Roles
• WAI-ARIA 1.2: Abstract Roles
• ember-template-lint: no-abstract-roles