useSemanticElements
Ce contenu n’est pas encore disponible dans votre langue.
Diagnostic Category: lint/a11y/useSemanticElements
Since: v1.8.0
Sources:
- Same as:
jsx-a11y/prefer-tag-over-role
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
Section titled ExamplesInvalid
Section titled Invalidcode-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
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
Section titled ValidAll elements with role="img"
are ignored: