roleTags
Reports ARIA roles that have semantic HTML element equivalents.
✅ This rule is included in the jsxlogicalandlogicalStrictpresets.
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
Section titled “Examples”<JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
<JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
<JSX.IntrinsicElements.span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
HTMLAttributes<HTMLSpanElement>.role?: AriaRole | undefined
<JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
<JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined
<JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
When Not To Use It
Section titled “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
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- ESLint:
jsx-a11y/prefer-tag-over-role - Oxlint:
jsx_a11y/prefer-tag-over-role
Made with ❤️🔥 around the world by
the Flint team and contributors.