Web Development: Accessible SVG: Methods for Adding Alternative Content

Accessible SVG: Methods for Adding Alternative Content

Scalable Vector Graphics (SVG) are XML-based vector images. They’ve been around for a long time now but have seen a real resurgence in use over the past couple of years. There are plenty of reasons to use SVGs today including:

Increased native browser support of SVGs means better consistency and higher fidelity of images.
Advancement of CSS and JavaScript techniques available to style and animate images.
The relative “lightness” of SVG code in a world where bandwidth and performance matter more than ever.

Another big advantage of using SVGs over standard images is that they can easily be made accessible. Since markup can be added to the SVGs directly, they give individuals who use assistive technologies (ATs), such as screen readers, more information about the images within the image itself.

Rules of Alternative Content

While there are many things to consider when making SVGs fully accessible, we’re going to focus on the ways you can add alternative content to an SVG. I expect you’re already familiar with the alt="" tag on images–alternative content is what’s used when an image isn’t, or can’t be displayed, or assistive technologies are used. Keep in mind, the usual basic rules of alternative content apply to SVGs:

Make sure your alternative content is meaningful and descriptive.
Do not let your alternative content exceed 250 characters.
Do not repeat the same alternative content for different images.
Do not use phrases like “image of” or “graphic of” to describe an image. A screen reader already tells the user this information.
If an SVG (or any graphic) is purely decorative, it needs to have an empty/null alternative text attribute. This sends a signal to the AT to ignore this image as it is not necessary for understanding the content or action on the page.
An empty/null alternative text attribute is not the same as a missing alternative text attribute. If the alternative text attribute is missing, the AT might read out the file name or surrounding content in an attempt to give the user more information about the image.

Bad: <img src="here-is-some-path.svg">
Good: <img src="here-is-some-path.svg" alt="">

Now that the basics of alternative content are out of the way, let’s look at a few methods you can use to make your SVGs more accessible.

SVGs as Images

For basic, uncomplicated, or decorative images, using the <img> tag and referencing the SVG as a file is the way to go. There are some benefits to this method including:

The overall file size will be smaller than embedding the <svg> element inline.
The image can be cached by the browser.
Maintenance is easier if you are using the SVG in multiple places.

The <img> + Alternative Text Attribute Method

In the example above, the <img> tag includes alt="Black and yellow bee with six legs and translucent wings".

Inline SVGs

For more complex or essential SVGs, you should consider adding the SVG as markup in the HTML directly. Advantages of inline SVGs include:

JavaScript and CSS can be applied to the <svg> to animate or style the images.
The SVG source is directly available in the DOM so may be more predictable for ATs.
This allows multiple ways to add additional information about the image inside of the image itself.

Note: To ensure the widest range of ATs recognize the SVG as an image, make sure to add role="img" to the <svg> element.

The <title> Method

The <title> element for an SVG is equivalent to the alternative text attribute for a typical raster image using the <img> element. All the same basic alternative content rules apply. It is important to list the main <title> element first so it is read first by ATs, as SVGs can have multiple title elements embedded.

Here you’ll see the <title> element immediately after the opening <svg> tag:

<svg role="img" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="440" height="330" id="svg4621">
    <title>Bumblebee & Honey Bee Facts</title>
    (SVG design elements go here)
</svg>

The aria-labelledby + <title> Method

While a <title> element provides the equivalent to alternative text for an embedded SVG, not all browsers and screen reader combinations can use the <title> element on its own. When the aria-labelledby attribute is added to the mix, it can help link the SVG to the <title> element in a more robust way.

Note the additional aria-labelledby attribute linking to the <title> by its id.

<svg role="img" aria-labelledby="beefacts" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="440" height="330" id="svg4621">
    <title id="beefacts">Bumblebee & Honey Bee Facts</title>
    (SVG design elements go here)
</svg>

The <title> + <desc> Method

For complex images, you may need more than 250 characters to describe them. This is where the <desc> element comes into play. The <desc> tag is equivalent to the longdesc="" attribute in an <img> element. However, the benefit to <desc> is that the description is provided as part of the image itself, whereas with a raster image, the longdesc="" attribute simply points to another location that contains the detailed description.

<svg> in combination with <title> and <desc> (getting pretty robust now).

<svg role="img" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="440" height="330" id="svg4621">
    <title>Bumblebee & Honey Bee Facts</title>
    <desc>Did you know that bees can see all colors except the color red? Visit our website to learn more fun bee facts!</desc>
    (SVG design elements go here)
</svg>

The aria-labelledby + <title> + <desc> Method

Just like the example above where <title> was not enough for some browser/AT combinations, <desc> sometimes needs help from an ARIA attribute too. Just make sure you have two different IDs for the <title> and <desc> elements and both are referenced in the aria-labelledby attribute.

Note: You might want to use the aria-describedby attribute instead, but the differences are extremely subtle.

In this example the <title> and the <desc> have unique IDs and are both referenced in a single labelledby attribute.

<svg role="img" aria-labelledby="beefacts description" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="440" height="330" id="svg4621">
    <title id="beefacts">Bumblebee & Honey Bee Facts</title>
    <desc id="description">Did you know that bees can see all colors except the color red? Visit our website to learn more fun bee facts!</desc>
    (SVG design elements go here)
</svg>

Summary

There are many methods to make SVGs a bit more accessible when it comes to supplemental image information. Depending on the complexity of your image you can:

Reference the SVG as an <img> source and use a traditional alternative text attribute (max 250 characters).
Supplement your inline SVG with a <title> element (max 250 characters).
For more complex images, you can use a <desc> element to add more details than the <title> element (no limit on characters).
For additional browser/AT support, link the <title> or <desc> elements to an aria-labelledby attribute.