ariaUnsupportedElements

Reports ARIA attributes on elements that don't support them.

✅ This rule is included in the jsx logical and logicalStrict presets.

Specific reserved DOM elements do not support ARIA roles, states, and properties. Those elements generally are either not visible (like meta, script, style) or have specific semantic meaning (like body or html).

This is required for WCAG 4.1.2 compliance.

Examples

❌ Incorrect

<meta charset="UTF-8" aria-hidden="false" />
Error ts(2322)  ― Type '{ charset: string; "aria-hidden": "false"; }' is not assignable to type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>'.
  Property 'charset' does not exist on type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>'. Did you mean 'charSet'?

<script role="application" />

<style aria-label="styles" />

✅ Correct

<meta charset="UTF-8" />
Error ts(2322)  ― Type '{ charset: string; }' is not assignable to type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>'.
  Property 'charset' does not exist on type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>'. Did you mean 'charSet'?

<script src="app.js" />

<div role="button" />

When Not To Use It

You should always use this rule to ensure ARIA attributes are only applied to elements that support them.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• Chrome Audit Rules, AX_ARIA_12

Equivalents in Other Linters

• ESLint: jsx-a11y/aria-unsupported-elements
• Oxlint: jsx_a11y/aria-unsupported-elements