Before learning how to make your SVG file accessible for the screen readers let’s cover briefly what SVG is and if you want to learn how to create one check out our Creating SVG files using Adobe Illustrator tutorial.
- 1 What is SVG?
- 2 Why should you make an SVG file accessible for screen readers?
- 3 Step 1:
- 4 Step 2:
- 5 Step 3:
- 6 The “use” element
- 7 Conclusion
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! Being used as icons, logos or complex illustrations.
For the beginner SEO professional or website developer, SVG brings up many questions on how to properly use the format. These questions and answers along with 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 and allowing the search engines to understand your graphics and possibly speed up the indexation process.
It is also important for people with visual disabilities who use screen readers or text-to-speech browsers.
The goal of this tutorial is to teach you how to make your SVG file accessible for screen readers.
But first, let’s cover the benefits in detail.
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 better user experience.
To learn more on how to optimize your SVG files for better performance, read the following tutorial:
Ok, now let’s have fun!
We’ll use the below Trump illustration as an example but you can use any vector graphics.
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.
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.
<desc>An illustration of President Trump and his famous slogan.</desc>
In most cases, screen readers will now speak your title and description for the image.
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 there is more content that it should 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”>
<title id="trump-title">Presentation Trump</title> <desc id="trump-desc">An illustration of President Trump and his famous slogan.</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.
How do I suppress a graphic’s text content from the screen readers?
Sometimes, your graphics have 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.
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 enables you to control in more detail the meaning of each SVG file.
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.