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

❌ Incorre

CE6meCB0charsA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DUTF<-8sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0aria-hiddA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dfal1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6scriCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dapplicati1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6styCB0aria-labA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dstyl1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECE6D61B0cha4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4DU1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6scD61B<0src spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dap1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dbu1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

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

• Biome: noAriaUnsupportedElements
• ESLint: jsx-a11y/aria-unsupported-elements
• Oxlint: jsx-a11y/aria-unsupported-elements