src/content/docs/linter/rules/use-semantic-elements.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.8.0` - Diagnostic Category: [`lint/a11y/useSemanticElements`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/prefer-tag-over-role`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/prefer-tag-over-role.md){
"linter": {
"rules": {
"a11y": {
"useSemanticElements": "error"
}
}
}
}
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.
<div role="checkbox"></div>
<div role="separator"></div>
<div role="checkbox" />
<div role="separator" />
<>
<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>
</>;