Using SVG Title and Desc for Web Accessibility

Scalable Vector Graphics (SVG) are essential for modern web design, but making them accessible to screen readers requires deliberate markup. This article explains how the <title> and <desc> elements provide accessible text alternatives, clarify visual content, and integrate with ARIA attributes to ensure that embedded graphics are fully accessible to users with visual impairments.

The Purpose of the <title> Element

The <title> element acts as the primary label for an SVG, functioning similarly to the alt attribute on standard HTML <img> tags. It should provide a concise, meaningful identification of the graphic. When a user hovers over the SVG in a desktop browser, the text inside the <title> element typically appears as a native tooltip. For screen reader users, this element announces the accessible name of the graphic.

The Purpose of the <desc> Element

The <desc> element is used to provide longer, more detailed descriptions of complex graphics, such as charts, infographics, maps, or detailed diagrams. While the <title> provides a quick identifier, the <desc> explains the deeper context, trends, or data represented within the visual. Screen readers can read this extended description to give users a comprehensive understanding of the visual content.

Connecting Elements with ARIA for Maximum Support

While browsers and assistive technologies have improved native SVG parsing, linking <title> and <desc> using ARIA attributes remains the most reliable method for universal screen reader support.

To implement this correctly: 1. Add role="img" to the <svg> element to ensure it is treated as a single graphic rather than a complex DOM tree. 2. Place the <title> and <desc> elements as the first child elements inside the <svg>. 3. Assign unique id attributes to both <title> and <desc>. 4. Reference these IDs on the root <svg> tag using aria-labelledby for the title and aria-describedby for the description.

Practical Implementation Example

<svg role="img" aria-labelledby="chart-title" aria-describedby="chart-desc" viewBox="0 0 100 100">
  <title id="chart-title">Quarterly Revenue Growth 2024</title>
  <desc id="chart-desc">A bar chart showing revenue increasing steadily from $10,000 in Q1 to $25,000 in Q4.</desc>
  <!-- SVG graphical elements such as paths, rects, and circles go here -->
</svg>

When to Omit <title> and <desc>

Not all SVGs require text alternatives. If an SVG is purely decorative—such as a background pattern or a visual icon paired with visible HTML text—it should be hidden from assistive technologies. In these cases, omit both <title> and <desc> elements and add aria-hidden="true" to the root <svg> tag to prevent screen readers from announcing unnecessary or redundant information.