Skip to content
Flint
Blog

ariaProps

Reports invalid ARIA properties.

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

If a DOM property begins with aria-, it can only be valid if it’s listed in the WAI-ARIA States and Properties specification. Any other property beginning with aria- is considered invalid and will not be handled propertly by a browser.

Common mistakes include misspelling property names, such as aria-labeledby instead of aria-labelledby.

This is required for WCAG 4.1.2 compliance.

Examples

Section titled “Examples”
CE6inpCB0aria-labeledA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Daddress_lab1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0aria-invalid-prA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6buttCB0aria-labellA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DSubm1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6iD61B0aria-labell4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Daddress_l1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B0aria-l4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4DSec1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0aria-pre4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

When Not To Use It

Section titled “When Not To Use It”

You should always use this rule to ensure ARIA properties are valid.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”