svgTitles

Reports <svg> elements without a <title> child element.

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

SVG elements should include a <title> child element to provide accessible descriptions for screen readers. Without a title, users who rely on assistive technologies cannot understand the purpose or content of the SVG.

The <title> element provides descriptive text that screen readers can announce. Alternatively, you can use aria-label or aria-labelledby attributes for accessibility.

This is required for WCAG 1.1.1 compliance.

Examples

❌ Incorre

CE6sCA d ivclassNa="meco">d>d>d>CE6sCB0viewBA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4D0 0 100 1<00sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6sCd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6circCB0A1<1"sp ansty="le--0:#ECC48D;--1:#984E">4D<50sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0A1<1"sp ansty="le--0:#ECC48D;--1:#984E">4D<50sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB<0rsp ansty="le--0:#C792EA;--1:#8844">A1<1"sp ansty="le--0:#ECC48D;--1:#984E">4D<40sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d>d ivclassNa="meec-li">CA<E6sCd>d ivclassNa="meco">d>d>d>CE6sCd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6deCsp ansty="le--0:#D6DEEB;--1:#403F">53Description onsp>CA<E6deCd>d ivclassNa="meec-li">CA<E6sCd>d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECE<6svg spans="tyle--0:#7F">Dde<44AE spans="tyle--0:#7F">DECE6tD spans="tyle--0:#D6DEEB;--1:#40">3F53Accessible t><44AE spans="tyle--0:#7F">DBECE6tD<44AE spans="tyle--0:#7F">DBECE<6svg spans="tyle--0:#7F">D<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6svg spans="tyle--0:#7F">Dde<44AE spans="tyle--0:#7F">DECE6tD spans="tyle--0:#D6DEEB;--1:#40">3F53Ci><44AE spans="tyle--0:#7F">DBECE6tDde<44AE spans="tyle--0:#7F">DECE6ciD614<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D50 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">614<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D50 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">6<1B0r spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D40 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE<6svg spans="tyle--0:#7F">Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6svg spans="tyle--0:#7F">D61B0aria-l4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4DAccessible l1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6svg spans="tyle--0:#7F">D61B0aria-labell4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dtitl1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE >divclass="Nameec-">de<44AE spans="tyle--0:#7F">DECE6ciD614<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D50 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">614<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D50 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">6<1B0r spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D40 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<44AE spans="tyle--0:#7F">DBECE<6svg spans="tyle--0:#7F">Ddi>

When Not To Use It

If you’re using a framework that automatically injects appropriate titles for SVG elements, you can disable this rule.

Further Reading

• WCAG 1.1.1: Non-text Content
• MDN: SVG title element

Equivalents in Other Linters

• Biome: noSvgWithoutTitle