useSemanticElements

JSX and TSX

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/a11y/useSemanticElements
This rule is recommended, which means is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/prefer-tag-over-role

Description

It detects the use of role attributes in JSX elements and suggests using semantic elements instead.

The role attribute is used to define the purpose of an element, but it should be used as a last resort. Using semantic elements like <button>, <nav> and others are more accessible and provide better semantics.

Examples

Invalid

1
<div role="checkbox"></div>

code-block.jsx:1:6 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The elements with this role can be changed to the following elements:
    <input type=“checkbox”>
  
  > 1 │ <div role=“checkbox”></div>
      │      ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ For examples and more information, see WAI-ARIA Roles

1
<div role="separator"></div>

code-block.jsx:1:6 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The elements with this role can be changed to the following elements:
    <hr>
  
  > 1 │ <div role=“separator”></div>
      │      ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ For examples and more information, see WAI-ARIA Roles

Valid

1
<>
2
  <input type="checkbox">label</input>
3
  <hr/>
4
</>;

All elements with role="img" are ignored:

1
<div role="img" aria-label="That cat is so cute">
2
  <p>&#x1F408; &#x1F602;</p>
3
</div>

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useSemanticElements": "error"
6
      }
7
    }
8
  }
9
}