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 SVG title element provides a text alternative for the icon.
How to implement
Within the <svg>, the first child should be the title for accessibility purposes. Like alt text on an <img>, this is the space where you describe the purpose or intent of 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.
This may be read aloud to customers on screen readers, so work with your Writer for an appropriate title. Many applications default to either the file name or the layer name, neither of which are appropriate alt text.
How to test
- Right-click the SVG and check to see if it has a
<title>element. - Assuming it does, ensure that the title matches your Writer’s expectations.