Before learning how to make your SVG file accessible for screen readers, let’s briefly cover what SVG is, and if you want to learn how to create one, check out our Creating SVG files using Adobe Illustrator tutorial.
What is SVG?
SVG (Scalable Vector Graphic) is an XML-based vector graphic format.
It is widely used in modern web design because it is interactive, scalable, responsive, and programmable, making it an ideal image format.
It is everywhere! It is used as icons, logos, or complex illustrations.
For the beginner SEO professional or website developer, SVG raises many questions about properly using the format. These questions and answers and diagrams will ensure that your website content is fully accessible.
Why should you make an SVG file accessible for screen readers?
Accessibility is important for improving your visual content, allowing the search engines to understand your graphics, and possibly speeding up the indexation process.
It is also important for people with visual disabilities who use screen readers or text-to-speech browsers.
This tutorial aims to teach you how to make your SVG file accessible for screen readers.
But first, let’s cover the benefits in detail.
Scalability:
SVGs are resolution-dependent, meaning they’ll look great on any device without losing quality.
Smaller file size:
SVGs can be high resolution but with smaller file sizes than other file formats. Because these file sizes are smaller, your pages will load faster giving your visitors a better user experience.
To learn more on how to optimize your SVG files for better performance, read the following tutorial:
Editable:
You can edit your SVG files in vector graphic programs like Adobe Illustrator or Corel Draw or any source code editor program.
OK, now let’s have fun!
We’ll use Trump’s illustration below as an example, but you can use any vector graphics.
1. How can I add a title and description to my SVG file?
Adding a title and description to your SVG’s XML code will give the search engines and screen readers more information about your graphic.
You can open any SVG file in a source code editor and add a title element as well as a desc element.
Inside of the <svg tag you’ll add the <title> tag as shown in the example code below.
Presentation Trump
Now you can add your desc element.
Open the element with <desc>. This is your descriptive element.
In the Trump illustration example, our description says: “An illustration of President Trump and his famous slogan.”
After adding your description, don’t forget to close the <desc> element. Type </desc> to close it.
In most cases, screen readers will now speak your title and description for the image.
2. How do I ensure screen readers will speak the title and description tags?
Text-to-speech browsers may not read your title and description tags in all circumstances. To ensure that they do, you can add aria-labelledby and aria-describedby attributes in the <svg> element.
This will signal to the screen reader that more content should be read.
Your first step in adding these attributes is to add an ID to the title and description tags so that you can target them.
- First, locate the <title> tag.
- Then, assign an id tag <title id=”trump-title”>
- Again, locate the <desc> tag
- Assign an id tag <desc id=”trump-desc”>
Now you can add your aria-labelledby and aria-describedby element to your file. This should look like this:
The benefit of adding these elements is added assurance that the screen reader will read out these elements to the visitor.
3. How do I suppress a graphic’s text content from the screen readers?
Sometimes, your graphics have the live text and a built-in title you don’t want screen readers to speak. You can suppress this information in a few easy steps.
Find a code in your SVG file with a class “speech”.
In our case, it looks like this:
Then, add the following code inside your text tag.
role="presentation" aria-hidden="true"
Now, your code should look like this.
This code tells the screen reader that this text is for presentation purposes only; it has no value. Do not read this!
The “use” element
In cases where you use symbols within the SVG to define it, you can call these definitions in by using the “use” element. This is because your title and description are within the element sitting inside the Shadow DOM.
You’ll still need to apply title and description elements to the SVG containing the use element.
You’ll find that the benefit of handling the use element in this way is that you can use the same graphic in multiple locations.
The use element lets you control the meaning of each SVG file in more detail.
Conclusion
SVG files allow your website to be both accessible and optimized for SEO. Use the title and description sections to their full capacity to maximize the benefits you experience from using SVG.
Enjoy improved website properties thanks to SVG.
