roleTags

Reports ARIA roles that have semantic HTML element equivalents.

✅ This rule is included in the jsx logical preset.

Semantic HTML elements have built-in accessibility features and better browser support than generic elements with ARIA roles. Use native HTML elements when available instead of generic elements with role attributes.

Examples

❌ Incorrect

<div role="button" />

<div role="img" />

<span role="link" />

✅ Correct

<button />

<img />

<a href="#" />

<div role="presentation" />

When Not To Use It

If you are using a framework that automatically manages element interactions and/or swaps elements to their semantic counterparts, you might be able to safely disable this rule.

Further Reading

• WAI-ARIA Roles Model
• MDN: WAI-ARIA Roles

Equivalents in Other Linters

• ESLint: jsx-a11y/prefer-tag-over-role
• Oxlint: jsx_a11y/prefer-tag-over-role