If the image is an inline SVG does it have the correct title?

Goal

Ensure that SVG images added directly into the HTML file have a text alternative for screen reader users and other scenarios.

Why this matters

If the image’s meaning is not conveyed through the title or some other text alternative, not only is its meaning lost, but a screen reader will either ignore it or replace it with a string of garbage text as a result. See Writing for Screen Readers for an example.

The <title> element provides a text alternative for the image.

How to implement

There are multiple ways to accessibly implement SVGs, as noted in the article at the bottom of the page. This one is noted as performing the best for inline SVGs.

Ensure that the first child of the <svg> is a <title> containing the alternative text for the image. Depending on what software you used to create the SVG, you may need to move the title to directly under the <svg> tag.

Work with your Writer for an appropriate title. If you don’t provide the alt text, Many applications will default to either the file name or the layer name, neither of which are useful to your end user.

How to test

1. Right-click the SVG and use the Inspect feature to confirm the first child of the <svg> is a <title> element.
2. Assuming it does, ensure that the title matches your Writer’s expectations.

Additional Resources

• Accessible SVGs: Perfect Patterns For Screen Reader Users by Carie Fisher