useSemanticElements
¥Summary
-
规则生效日期：
v1.8.0¥Rule available since:
v1.8.0 -
诊断类别：
lint/a11y/useSemanticElements¥Diagnostic Category:
lint/a11y/useSemanticElements -
此规则为推荐规则，默认启用。
¥This rule is recommended, which means is enabled by default.
-
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
来源：
¥Sources:
-
与
jsx-a11y/prefer-tag-over-role相同¥Same as
jsx-a11y/prefer-tag-over-role
-
¥How to configure
{ "linter": { "rules": { "a11y": { "useSemanticElements": "error" } } }}¥Description
它检测 JSX 元素中 role 属性的使用并建议改用语义元素。
¥It detects the use of role attributes in JSX elements and suggests using semantic elements instead.
role 属性用于定义元素的用途，但它应该作为最后的手段。使用 <button>、<nav> 等语义元素更易于访问并提供更好的语义。
¥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
<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
<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
<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
<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
¥Valid
<> <input type="checkbox">label</input> <hr/></>;所有带有 role="img" 的元素都将被忽略。
¥All elements with role="img" are ignored:
<div role="img" aria-label="That cat is so cute"> <p>🐈 😂</p></div>¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号