svgTitles

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

✅ This rule is included in the jsx logical preset.

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

❌ Incorrect

<svg />

<svg viewBox="0 0 100 100" />

<svg>
  <circle cx="50" cy="50" r="40" />
</svg>

<svg>
  <desc>Description only</desc>
</svg>

✅ Correct

<svg>
  <title>Accessible title</title>
</svg>

<svg>
  <title>Circle</title>
  <circle cx="50" cy="50" r="40" />
</svg>

<svg aria-label="Accessible label" />

<svg aria-labelledby="title-id">
  <circle cx="50" cy="50" r="40" />
</svg>

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