HTML SVG Title and Description for Accessible Graphics

A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.

What You Need to Know

SVG artwork may need an accessible name when it communicates information. A title can name the graphic and a description can explain more; purely decorative SVG should not clutter screen-reader navigation.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<svg viewBox="0 0 120 120" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">A simple upward arrow</title>
    <desc id="chart-desc">An arrow pointing diagonally up and to the right.</desc>
    <path d="M20 95 L95 20 M60 20 H95 V55" stroke="currentColor" stroke-width="8" fill="none" />
</svg>

Let’s Read the Code

<svg>: Inline SVG describes shapes directly in the page.
<title>: Title provides the document title that may appear in browser tabs and search results.
aria-labelledby: Aria-labelledby uses the text of another element as the accessible name.
id: An id uniquely identifies an element on this page.

Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.

Common Beginner Mistakes

Expecting the page to run scripted behavior when the required JavaScript is missing.
Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.

Key Takeaways

SVG artwork may need an accessible name when it communicates information.
<svg>: Inline SVG describes shapes directly in the page.
A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.