Disallow usage of redundant roles

Rule ID:
no-redundant-role
Category:
Accessibility
Standards:
  • ARIA in HTML

Some HTML5 elements have implicit WAI-ARIA roles defined by ARIA in HTML. This rule disallows using the role attribute to set the role to same as the implied role.

Rule details

Examples of incorrect code for this rule:

<main role="main">
  <ul>
    <li role="listitem">Lorem ipsum</li>
  </ul>
</main>
error: Redundant role "main" on <main> (no-redundant-role) at inline:1:13:
> 1 | <main role="main">
    |             ^^^^
  2 |   <ul>
  3 |     <li role="listitem">Lorem ipsum</li>
  4 |   </ul>


error: Redundant role "listitem" on <li> (no-redundant-role) at inline:3:15:
  1 | <main role="main">
  2 |   <ul>
> 3 |     <li role="listitem">Lorem ipsum</li>
    |               ^^^^^^^^
  4 |   </ul>
  5 | </main>


2 errors found.

Examples of correct code for this rule:

<ul>
  <li role="presentation">Lorem ipsum</li>
</ul>

Options

This rule takes an optional object:

{
  "include": null,
  "exclude": null
}

include

If set, only roles listed in this array generate errors.

exclude

If set, roles listed in this array are ignored.

Version history