How to Make Your SVG File Accessible for Screen Readers

By 11/07/2019 Web Design

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 your SVG files 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.

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 better user experience.

To learn more on how to optimize your SVG files for better performance, read the following tutorial:

  1. How to optimize your SVG file step-by-step
  2. How does SVG enhance web performance?

Editable:

You can edit your SVG files in vector graphic programs like Sketch or Adobe Illustrator or you can use any source code editor program.

Ok, now let’s have fun!

How to Make Your SVG File Accessible for Screen Readers

Step 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.

SVG title tag
<title>Presentation Trump</title>

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.

SVG desc tag
<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.

Step 2:

How do I ensure screen readers will speak the title and desc 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 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.

  1. First, locate the <title> tag.
  2. Then, assign an id tag <title id=”trump-title”>
  3. Again, locate the <desc> tag
  4. Assign an id tag <desc id=”trump-desc”>
SVG ID tags
<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:

Aria tags
aria-labelledby="trump-title" aria-describedby="trump-desc"

The benefit of adding these elements is added assurance that the screen reader will read out these elements to the visitor.

Step 3:

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 on your SVG file with a class “speech”.

In our case it looks like this:

speech class

Then add the following code inside your text tag.

role="presentation" aria-hidden="true"

Now your code should look like this.

Suppress text

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.

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.

Leave a Reply

Made In Los Angeles

25 Shares
Buffer
Tweet
Share
Share
Pin