Skip to content
Flint
Blog

ariaRoleValidity

Reports invalid or abstract ARIA roles.

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

ARIA roles must be valid according to the WAI-ARIA specification. Abstract roles and invalid role values cannot be used, as they have no meaning to assistive technologies. This rule reports on any DOM element given a JSX role attribute with an invalid value.

This is required for WCAG 4.1.2 compliance.

Examples

Section titled “Examples”
CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Ddatepick1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dran1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0roA11<""sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<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 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">4E4Dnaviga1<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:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53dynamic3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">DBCdi>

When Not To Use It

Section titled “When Not To Use It”

If you’re using custom ARIA roles or working with experimental features, you may need to disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”