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.