Linter Rule: Disallow invalid values for the role attribute

Rule: html-aria-role-must-be-valid

Description

Disallow invalid or unknown values for the role attribute. The role attribute must match one of the recognized ARIA role values as defined by the WAI-ARIA specification.

Rationale

ARIA role attributes are used to define the purpose of an element to assistive technologies. Using invalid, misspelled, or non-standard roles results in:

• Screen readers ignoring the role
• Broken accessibility semantics
• False sense of correctness

Validating against the official list of ARIA roles prevents silent accessibility failures.

Examples

✅ Good

<div role="button">Click me</div>
<nav role="navigation">...</nav>
<section role="region">...</section>

🚫 Bad

<!-- typo -->
<div role="buton">Click me</div>
The `role` attribute must be a valid ARIA role. Role `buton` is not recognized. (html-aria-role-must-be-valid)

<!-- not a valid role -->
<nav role="nav">...</nav>
The `role` attribute must be a valid ARIA role. Role `nav` is not recognized. (html-aria-role-must-be-valid)

<!-- not in the ARIA spec -->
<section role="header">...</section>
The `role` attribute must be a valid ARIA role. Role `header` is not recognized. (html-aria-role-must-be-valid)

References

• ARIA 1.2 Specification - Roles
• MDN: ARIA roles