SVG <title> and <desc> for accessibility

Q: Is SVG title the same as a tooltip?

Browsers may show <title> as a tooltip, but its real job is the accessible name. Don't rely on it purely for hover text.

Q: Do I need both title and desc?

<title> alone is usually enough for icons. Add <desc> for complex graphics that need more explanation.

Inline SVGs can be made accessible with elements built right into the format: <title> for a short name and <desc> for a longer description, wired up with role and aria-labelledby.

The pattern

<svg role="img" aria-labelledby="t d">
  <title id="t">Download</title>
  <desc id="d">A tray with a downward arrow</desc>
  <path d="…"/>
</svg>

Why role and aria-labelledby

Some browsers don't expose a bare <title> reliably, so role="img" declares the SVG as a single image, and aria-labelledby points to the title (and optionally description) explicitly. This is the most robust combination.

Decorative SVGs

If the SVG adds nothing for a screen-reader user, skip the title and add aria-hidden="true" instead — don't give decoration a name.

Frequently asked questions

Is SVG title the same as a tooltip?

Browsers may show <title> as a tooltip, but its real job is the accessible name. Don't rely on it purely for hover text.

Do I need both title and desc?

<title> alone is usually enough for icons. Add <desc> for complex graphics that need more explanation.