Skip to content
Flint
Blog

roleTags

Reports ARIA roles that have semantic HTML element equivalents.

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

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”
CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dbutt1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Di1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6spCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dli1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6buDBC<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6img spans="tyle--0:#7F">DBCdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<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">4E4Dpresenta1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

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”