SVG and Accessibility

Article Contents

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

Two small rectangles, one red, one green.

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:

How Do We Support the Accessibility of SVG Content?

Techniques and approaches to supporting accessible SVG include:

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

Resources

General SVG Resources

Accessibility-specific Articles

Specifications

Open Source Libraries for Working With SVG