useSemanticElements
Summary
Section titled “Summary”- Rule available since:
v1.8.0 - Diagnostic Category:
lint/a11y/useSemanticElements - This rule is recommended, meaning it 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
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useSemanticElements": "error" } } }}Description
Section titled “Description”Enforces using semantic DOM elements over the ARIA role property.
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 “Examples”Invalid
Section titled “Invalid”<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
ℹ Replace with one of these elements:
- <input type=“checkbox”>
<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
ℹ Replace with one of these elements:
- <hr>
<div role="checkbox" />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” />
│ ^^^^^^^^^^^^^^^
2 │
ℹ For examples and more information, see WAI-ARIA Roles
ℹ Replace with one of these elements:
- <input type=“checkbox”>
<div role="separator" />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” />
│ ^^^^^^^^^^^^^^^^
2 │
ℹ For examples and more information, see WAI-ARIA Roles
ℹ Replace with one of these elements:
- <hr>
<> <input type="checkbox">label</input> <hr/> <div role="status"></div></>;All elements with role="img" are ignored:
<div role="img" aria-label="That cat is so cute"> <p>🐈 😂</p></div>Semantic elements with a matching role are not flagged (see noRedundantRoles):
<> <nav role="navigation"></nav> <footer role="contentinfo"></footer></>;Related links
Section titled “Related links”Summary
Section titled “Summary”- Diagnostic Category:
lint/a11y/useSemanticElements - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Inspired from
jsx-a11y/prefer-tag-over-role
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useSemanticElements": "error" } } }}Description
Section titled “Description”Enforces using semantic DOM elements over the ARIA role property.
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 “Examples”Invalid
Section titled “Invalid”<div role="checkbox"></div>code-block.html:1:6 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The elements with this role can be changed to semantic elements.
> 1 │ <div role=“checkbox”></div>
│ ^^^^^^^^^^^^^^^
2 │
ℹ For examples and more information, see WAI-ARIA Roles
ℹ Replace with one of these elements:
- <input type=“checkbox”>
<div role="separator"></div>code-block.html:1:6 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The elements with this role can be changed to semantic elements.
> 1 │ <div role=“separator”></div>
│ ^^^^^^^^^^^^^^^^
2 │
ℹ For examples and more information, see WAI-ARIA Roles
ℹ Replace with one of these elements:
- <hr>
<input type="checkbox" /><hr /><div role="status"></div>All elements with role="img" are ignored:
<div role="img" aria-label="That cat is so cute"> <p>🐈 😂</p></div>Semantic elements with a matching role are not flagged (see noRedundantRoles):
<nav role="navigation"></nav><footer role="contentinfo"></footer>Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.