Svg Title Desc

title: "SVG Title and Desc — Providing Accessible Names for SVGs" description: "Learn how to use the SVG title and desc elements to provide accessible names and descriptions for inline SVG graphics." weight: 2 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

The title and desc elements inside SVG provide accessible names and descriptions, which must be exposed using aria-labelledby and aria-describedby.

## What You'll Learn

How to use title and desc in SVGs and how to expose them to screen readers.

## Why It Matters

The title and desc elements exist in the SVG but are not automatically exposed to the accessibility tree. ARIA attributes are required.

## Real-World Use

An SVG icon has a title element with "Search" and the SVG has aria-labelledby referencing the title id. The screen reader announces "Search, image" when it encounters the SVG.

## Title and Desc

```html
<svg role="img" aria-labelledby="svg-title svg-desc"
     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title id="svg-title">Network connection diagram</title>
  <desc id="svg-desc">Diagram showing three computers connected to a central server</desc>
  <!-- SVG shapes -->
  <circle cx="20" cy="50" r="10" fill="#0066cc"/>
  <circle cx="50" cy="20" r="10" fill="#0066cc"/>
  <circle cx="50" cy="80" r="10" fill="#0066cc"/>
  <circle cx="80" cy="50" r="10" fill="#cc0000"/>
  <line x1="20" y1="50" x2="50" y2="20" stroke="#666"/>
</svg>

Icon SVG

<svg role="img" aria-label="Settings" xmlns="http://www.w3.org/2000/svg"
     width="24" height="24" viewBox="0 0 24 24">
  <title>Settings</title>
  <path d="M12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7z" fill="none" stroke="currentColor"/>
  <path d="M19.5 12c0-.3 0-.7-.1-1l2.1-1.6-2-3.5-2.5.8c-.5-.4-1.1-.7-1.7-.9L15 3h-4l-.3 2.8c-.6.2-1.2.5-1.7.9l-2.5-.8-2 3.5L6.6 11c0 .3-.1.7-.1 1s0 .7.1 1l-2.1 1.6 2 3.5 2.5-.8c.5.4 1.1.7 1.7.9L11 21h4l.3-2.8c.6-.2 1.2-.5 1.7-.9l2.5.8 2-3.5-2.1-1.6c0-.3.1-.7.1-1z" fill="none" stroke="currentColor"/>
</svg>

Common Mistakes

1. Title without aria-labelledby

The title element is not automatically exposed. aria-labelledby referencing the title id is required.

2. Title and desc not unique

Each SVG must have its own unique id for title and desc elements.

3. Title text is the file name

Use descriptive titles like "Company hierarchy chart" not "chart.svg".

4. Desc omitted for complex SVGs

Complex SVGs benefit from a longer description in the desc element.

5. Empty title element

A title element with no text provides no accessible name.

Practice Questions

1. What two elements inside SVG provide accessible text? title provides the accessible name. desc provides a longer description.

2. What ARIA attribute exposes the title to screen readers? aria-labelledby on the SVG referencing the title element's id.

3. What ARIA attribute associates a description with the SVG? aria-describedby on the SVG referencing the desc element's id.

Challenge: Create an SVG diagram with a title and description. Use aria-labelledby and aria-describedby. Test with a screen reader.

FAQ

Mini Project

Create three SVG graphics with proper title, desc, and ARIA references: an icon SVG, an illustrative SVG, and a chart SVG.

What's Next

Learn about Role img for SVG and how role=img changes screen reader behavior.