Skip to Content Innovation Studio Logo

Web Accessibility Guidelines v1.0 Foundations - Overview

SVG

SVG (Scalable Vector Graphics) appear to be the future of web graphics. As a vector-based, XML formatted image, SVGs are not dependent on resolution and are easily re-sized without degradation. SVGs can be easily manipulated and animated with CSS and/or JavaScript. SVG is thus great for responsive design and decreases page load time (as opposed to using JPG, JPEG, PNG, etc.). While SVG is not entirely supported by some IE browsers and Android/Windows phone native browsers, indications are that it likely will be soon.

Best Practices

SVG included in an img tag

  • Including an SVG in an img tag is no different than including a regular image–always use an alt tag for SVGs that are important!

  • Additionally, since SVG is new type of image format, you must also include an ARIA role='image' since some screen readers will skip over the alt tag for SVGs without that role (specifically iOS VoiceOver).

1
  <img src='/images/blue-triangle.svg' role='image' alt='Blue Triangle'/>
  • If the SVG is decorative, use an empty alt=''. If you do not, a screenreader will read the source tag which sounds awful.
1
<img src="/assets/images/frequent-flyer.svg" alt='' role='image'/>

Inline SVG

  • In the output XML for the SVG, include a title tag directly below the svg tag.

  • The <title> tag for an SVG should be brief, much like an alt attribute for an image.

  • In the SVG tag, include an aria-labelledby attribute that points to the <title> tag.

  • If there is more than one shape, it can be a good idea to include a title tag for each shape group.

  • Including a <desc> tag (description), in addition to a title tag, is very helpful for users of assistive technology.

  • On his site, Dudley Storey writes that ’<desc> is a longer description of the SVG element, containing its purpose or design.’

  • Example of desc tag: ‘Bar chart showing company sales by country, in millions of dollars (US).’

  • If your inline SVG is decorative, however, you do not need to include any of these attributes.

1
2
3
4
5
6
  <svg aria-labelledby="title">
    <title id="title" lang="en">Red Rectangle</title>
      <g>
        <rect x="0" y="0" width="100" height="50" fill="red" />
      </g>
  </svg>

Icon Fonts

Icons can convey a large amount of information without having to express what you mean in words. To make sure icon fonts are accessible to all your users, though, think about the following:

Best Practices

  • Icon is purely decorative: If your icon is purely decorative, include a aria-hidden='true' attribute.
  • Icon is important contextually: Include a title attribute, and a styled screen reader text span.
1
2
  <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
  <span class="screenreader-text">Time to destination by bike:</span>

1
2
3
4
  <span class='screenreader-text'>
    <span class="icon-star" aria-hidden="true"></span>
    Favorite
  </span>

Tools & Resources