Prefer to use native HTML element over roles

Rule ID:
prefer-native-element
Category:
Accessibility
Standards:
  • ARIA in HTML

While WAI-ARIA describes many roles which can provide semantic information about what the element represents. Support for roles is varying and since HTML5 has many native equivalent elements it is better to use the native when possible.

Table of equivalent elements:

Role Element
article article
banner header
button button
cell td
checkbox input
complementary aside
contentinfo footer
figure figure
form form
heading h1, h2, h3, h4, h5, h6
input input
link a
list ul, ol
listbox select
listitem li
main main
navigation nav
progressbar progress
radio input
region section
table table
textbox textarea

Rule details

Examples of incorrect code for this rule:

<div role="main">
  <p>Lorem ipsum</p>
</div>
error: Prefer to use the native <main> element (prefer-native-element) at inline:1:6:
> 1 | <div role="main">
    |      ^^^^^^^^^^^
  2 |   <p>Lorem ipsum</p>
  3 | </div>


1 error found.

Examples of correct code for this rule:

<main>
  <p>Lorem ipsum</p>
</main>

Options

This rule takes an optional object:

{
  "mapping": {
    /* ... */
  },
  "include": [],
  "exclude": [],
}

mapping

Object with roles to map to native elements. This can be used to provide a custom map with roles and their replacement.

include

If set only roles listed in this array generates errors.

exclude

If set roles listed in this array is ignored.