Webmasters Gallery

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.

Graphics and Alternative Text

Before getting started with accessible SVGs, a few quick things to consider regarding graphics, accessibility and alternative text.

1. Does the graphic in question need alternative text?

If a graphic is purely decorative, it does not need to have alternative text.

All tags need the alt attribute to be valid, but the attribute can be left empty (no space) and still validate. ?

2. What is the context of the graphic and the text surrounding it?

If there text/content surrounding the graphic that provides the alternative text, it does not need additional additional alt text. For example:

See the Pen SVG as img src for figure with figcaption by Heather Migliorisi (@hmig) on CodePen.

What is the most appropriate alternative text for the graphic when it needs an alt attribute (see example 4 for more information)? Depending on the content of the image, it can handled differently:

See the Pen SVG as img src for figure with figcaption by Heather Migliorisi (@hmig) on CodePen.

3. Does the graphic have a function? If so, it should be conveyed to the user

For example, instead of labeling icons exactly as they are represented:

Bad Code Example:

<a href="http://codepen.io/username">
  <img src="codepen_icon.png" 
      alt="CodePen Logo">
</a>

Provide some context for the user:

Good code example:

<a href="http://codepen.io/username">
  <img src="codepen_icon.png" 
  alt="See Picked Pens">
</a>

For more information, please read WebAIM’s, “Alternative Text” article for a comprehensive understanding of accessible graphics and the WAI Web Accessibility Tutorials on Images.

The following examples were developed to work with:

1. Browsers that support SVG: IE 10+, FF, Chrome and Safari
2. Most common screen readers used: Jaws, NVDA, VoiceOver (VO) and Narrator

Basic Image Replacement

For the most basic implementation of an SVG, we have following options:

1. SVG as img src

See the Pen SVG as img src by Heather Migliorisi (@hmig) on CodePen.

Let’s check our browser usage stats to see if we need to do anything further. If the site’s users are on latest version (Safari Desktop Version 9.1.1 or iOS Version 9.3.2) or newer we can stop here.

However, if the majority of the users are still on older versions of Safari or iOS, we need to add role="img" to the .

? Shout out to the folks that fixed the Safari/WebKit bug!

This example is fine to use as just a basic image replacement, but it doesn’t allow for us to access to contents of the SVG for either AT or CSS/JS. So, if we want more control over the SVG, we’ll need to inline the SVG directly in the HTML.

2. Inline SVG

Inlining the SVG provides more predictable results and control than if it is added with or because the SVG source is directly available in the DOM which is exposed to the accessibility API that is used by AT.

Let’s take the same basic SVG from the example and say we want to add movement to the eyes. We can do that via JS if we inline the SVG directly into the HTML.

See the Pen Basic SVG – Cat by Heather Migliorisi (@hmig) on CodePen.

Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:

• Inside the , add:
  • • must be the first child of it’s parent element
    • will be used as a tooltip as the pointing device moves over it
• A description can be added if needed
  • a description – note this is not read by narrator (bug filed)

According to the W3C specification, we shouldn’t have to do anything extra for SVGs beyond providing the

A longer, more complete description for complex graphics.

On the tag, add:

• aria-labelledby="uniqueTitleID uniqueDescID" (use the title and desc ID’s) – both title and description are included in aria-labelledby because it has better screen-reader support than aria-describedby (see tip #4)

One more thing:

• On the tag, add:
  • role="img" (so that the SVG is not traversed by browsers that map the SVG to the group role)

Want to add a simple animation, such as eyes blinking?

setInterval(function blinkeyes() {
  var tl = new TimelineLite();
  tl.to(".eye", .4, {scaleY:.01, repeat:3, repeatDelay:.4, yoyo:true, transformOrigin: "50% 70%", ease:Power2.easeInOut});
  return tl; 
 }, 5000);

var master = new TimelineLite(); 
master.add(blinkeyes());

Update the title/description so that it accurately explains the image.

<desc id="catDesc">An illustrated gray cat with bright green blinking eyes.</desc>

See the Pen Simple Inline Accessible SVG Cat – using title and desc by Heather Migliorisi (@hmig) on CodePen.

3. Embed SVG via object or iframe

For now, I’d steer clear of trying to use and . In terms of use with a screen reader, they are not adequate.

Here’s how it went for me:

Choose your method of embedding the SVG and add tabindex="0":

<object type="image/svg+xml" 
    data="/path-to-the-svg/filename.svg" 
    width="50%" 
    tabindex="0">
  <img src="Fallback_image.jpg" alt="alt content here">
</object>

<iframe src="/path-to-the-svg/filename.svg" 
    width="65%" 
    height="500" 
    sandbox 
    tabindex="0">
  <img src="Fallback_image.jpg" alt="alt content here">             
</iframe>

Starting with the final SVG from the inline example, we need to replace role="img" with role="group" on the svg.

<svg id="cat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" aria-labeledby="pixels-title pixels-desc" role="group">

Here’s where it starts to go down hill…

Add a element in the SVG that contains the content of