Prefer to use native HTML element over roles

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

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, menu
listbox select
listitem li
main main
navigation nav
progressbar progress
radio input
region section
table table
textbox textarea

This rule ignores elements where the role matches the implicit role of the element, such as <ol role="list">. Use no-redundant-role to report such usage.

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)
> 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. The replacement is either a single element name or an array of element names, in which case any of them is accepted.

include

If set only roles listed in this array generates errors.

exclude

If set roles listed in this array is ignored.

Version history