Skip to content
Flint
Blog

anchorContent

Reports anchor elements without accessible content.

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

Automated tools such as screen readers and search engine crawlers rely on anchors (links) having contents to understand those links. If anchor is missing accessible content, then it will not be properly understood.

This rule checks that all anchors either have child content or an ARIA property describing the anchor.

Examples

Section titled “Examples”
CE<6asp ansty="le--0:#7FDB">CA d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CA><E<6asp ansty="le--0:#7FDB">Cd ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">Cd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6spCB0aria-hiddAE d>d ivclassNa="meec-li">CA<E<6asp ansty="le--0:#7FDB">Cd>d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DED spans="tyle--0:#D6DEEB;--1:#40">3F53Link ><44AE spans="tyle--0:#7F">DBED<<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B0aria-l4<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><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B0t4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4DLink t1<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 generates accessible content for anchors, you can safely disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”