HTML SVG Inline Graphics and Accessibility

Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.

What You Need to Know

Inline SVG is vector artwork written in markup, so it stays sharp when resized. Add a title or description when the drawing communicates information, and treat copied SVG code as untrusted until checked.

In this example: mark up a simple accessible icon-shaped drawing.

Try the Example

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

<svg viewBox="0 0 160 100" role="img" aria-labelledby="svg-title svg-description">
    <title id="svg-title">Two hills</title>
    <desc id="svg-description">A small hill next to a taller hill.</desc>
    <path d="M0 100 L45 50 L80 100 Z" fill="forestgreen" />
    <path d="M55 100 L110 20 L160 100 Z" fill="darkgreen" />
</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.

What the example shows: Inline SVG can provide its own title and description so the graphic has a meaningful accessible name.

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

Change the shape and update the title and description to match.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
Decorative SVG should normally be hidden from assistive technology instead of having a misleading title.

Key Takeaways

Inline SVG is vector artwork written in markup, so it stays sharp when resized.
<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.