SVG and Accessibility

What is SVG?

SVG (Scalable Vector Graphics) is a means of describing vector graphics in markup on a web page. This can be advantageous for inclusive design because vector graphics can be easily resized, and scaled up or down to different resolutions without loss of quality. SVG can also be augmented with additional semantics that make them compatible with assistive technologies such as screen readers.

Simple SVG Example

Source Code

<svg width="10em" height="5em" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Two small rectangles, one red, one green.</desc>
  <rect x="300" y="150" width="400" height="200"
        fill="red" stroke="black" stroke-width="5" />
  <rect x="725" y="150" width="400" height="200"
      fill="green" stroke="black" stroke-width="5" />
</svg>

Rendered SVG

Traditional Web Image Accessibility

The familiar <img> image tag embeds an existing image file onto a web page. Access is typically provided to such images through alternate textual description by the alt attribute. Images are one of the most common and familiar challenges in web accessibility and are well-covered by the Web Content Accessibility Guidelines.

SVGs are a very different approach to images on webpages, and require somewhat different approaches to accessibility to follow the Accessibility Principles of perceivability, understandability and operability. Rather than embedding bitmap image files directly, they supply markup to describe an image and rely on the end user’s browser to interpret them and render the image.

Bitmap Graphics vs. Vector Graphics

Bitmap graphics are made up of rectangular grids of pixels, while vector graphics build up images from simple polygons. One obvious and frequently noted advantage of this is that vector graphics are easily scaled up without the loss of resolution.

SVG is a specific W3C standard for defining vector graphics in XML that most modern browsers support.

What Possibilities Does SVG Offer for Inclusive Design?

Because SVG is expressed in pure markup and then interpeted and rendered by the browser in a similar manner to HTML, it has some interesting potential for inclusive design:

• It’s a technology based on web standards, and requires no separate plug-ins to support.
• Because it forms part of the Document Object Model, it can be transformed by client-side code that interacts with the DOM, giving it potential for adaptation into alternative formats or reuse.
• SVG code is highly portable and can be shared or embedded in another context simply by embedding its markup.
• Individual or grouped polygons can have different markup, such as different ARIA attributes; this can help support building more complex interactions
• The structure, content and presentation of SVG can be separated, similar to good practices around HTML.

How Do We Support the Accessibility of SVG Content?

Techniques and approaches to supporting accessible SVG include:

• Use aria-role to describe the role of SVG content in the page. This can avoid unexpected or confusing behaviour by ATs interpreting the markup.
  • For example, a fuctionally static image created from a combination of SVG elements may have individual elements read by a screen reader. Assigning aria-role="image" can prevent this behaviour and allow a screen reader to interpret and convey the image as a single image element, with appropriate alternate text description.
• Use the title and desc elements made available by SVG for providing text alternatives.
• Don’t make use of aria-labelledby, aria-labels, aria-describedby, aria-describes and other ARIA attributes to indicate related elements both within the SVG and between the SVG and the rest of the document.
• If using SVG for animated or interactive elements, use ARIA attributes and provide keyboard alternatives to interaction; some guidance for games and simulations using SVG can be found at the Inclusive Learning Design Handbook entry on Web Games and Simulations.
• Where possible consider the use of CSS to manage the visual appearance of SVG elements as a means of separating presentation from structure and content; this will make adaptation to alternative presentations easier.

Caveats

SVG is a large and complex non-HTML technology, albeit one that is supported by modern web browsers well enough to offer many useful possibilities. However

• Complex uses of SVG should be considered with reference to browser support for specialized features, especially if you are interested in supporting older browsers, or advanced effects such as filters and path clipping.
• If features can be implemented or information presented using only HTML, this is probably preferable to using SVG.
• Consider whether or not it makes sense to provide an alternative presentation using HTML to any SVG content, such as a data table for data rendered in a chart as is found in the FLOE Chart Authoring Tool.

Resources

General SVG Resources

• Mozilla Developer Network - SVG
• Sara Soueidan’s SVG Articles

Accessibility-specific Articles

• Tips for Creating Accessible SVG
• Current State of Authoring Accessible SVG
• Creating an Accessible Breakout Game Using Web Audio and SVG
• Using ARIA to enhance SVG accessibility

Specifications

• W3C SVG 1.1 Specification
• W3C SVG 2 Specification (working draft)
• SVG Accessibility API Mappings (working draft)

Open Source Libraries for Working With SVG

• D3.js - a powerful, web standards-based library with many functions for building SVG-based charts, graphs and other data visualizations.
• Snap.svg - an SVG library emphasizing modern browsers and the newest SVG features.
  • By contrast, Raphaël focuses on cross-browser compatibility.