Making SVG accessible

London Web Standards, London May 2017

SVG past

History

Background

Accessibility Features of SVG, 2000

SVG present

Ways to use SVG

CSS background image

Treat it the same as other background image formats

HTML img source

Treat it the same as other image formats


<img src="foo.svg" alt="Foo">

Inline HTML

Best results for accessible information

<svg version="1.1" width="300" height="200">...</svg>

Stand-alone SVG

No accessible information available in Microsoft browsers

SVG zoom/pan

Use onzoom, currentScale

Basic SVG

Exposed role of image/diagram in Firefox and IE


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>

Basic SVG + ARIA

Exposed role of image in Chrome, Firefox, IE and Safari


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      role="img" />
</svg>

SVG title

Exposed as accessible name in Chrome, Firefox and IE


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      role="img" >
<title>Rectangle</title>
</rect>
</svg>

SVG title + ARIA

Exposed as accessible name in Chrome, Firefox, IE and Safari


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      role="img" aria-labelledby="title" >
<title id="title">Rectangle</title>
</rect>
</svg>

SVG desc

Exposed as accessible description in Chrome, Firefox and IE


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      role="img" aria-labelledby="title" >
<title id="title">Rectangle</title>
<desc>Violet rectangle on its side</desc>
</rect>
</svg>

SVG desc + ARIA

Exposed as accessible description in Chrome, Firefox, IE and Safari


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      role="img" aria-labelledby="title" aria-describedby="desc" >
<title id="title">Rectangle</title>
<desc id="desc">Violet rectangle on its side</desc>
</rect>
</svg>

SVG text

Available to assistive technologies as plain text


<svg width="250" height="100">
<text x="50" y="25" style="fill: #000000; font-size: 2em;">Tequila</text>
</svg>

SVG links

Supported in all browsers (except internal links in Safari)


<svg width="250" height="100">
<a xlink:href="foo.html">
<text x="120" y="33">Foo</text>
</a>
</svg>

SVG tabindex

Supported in all browsers


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      tabindex="0" >
<text x="120" y="33">Foo</text>
</rect>
</svg>

Define an object

Define an object once


<svg width="250" height="100">
 <defs>
  <g id="rect">
  <desc>Violet rectangle on its side</desc>
   <rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
  </g>
 </defs>
</svg>
 

Re-use it elsewhere


<svg width="250" height="100">
...
<use aria-labelledby="title1" xlink:href="#rect">
  <title id="title1">Rectangle 1</title>
</use>
<use aria-labelledby="title2" xlink:href="#rect">
  <title id="title2">Rectangle 2</title>
</use>
...
</svg>

Putting it together

Use these techniques to make complex charts and diagrams moreaccessible

Simple button


<svg width="250" height="100">
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;"
      tabindex="0" role="button">
<text x="120" y="33">Foo</text>
</rect>
</svg>

Complex chart

Line graph of screen reader statistics

Add table semantics


<g role="table">
  <g role="row">
    <g role="rowheader"><text>Jaws</text></g>
    ...
  </g>
  ...
</g>

Complex chart demo

Animations

Updating the status


<g>
  <text x="230" y="100">Status:</text>
  <text id="idle" x="230" y="120">Idle
    <set attributeName="visibility" to="hidden" begin="heat.click" dur="30s"/>
  </text>
  <text id="heating-ice" visibility="hidden" x="230" y="120">Heating ice
    <set attributeName="visibility" to="visible" begin="heat.click" dur="2s"/>
  </text>
  ...
</g>
  

Make status a live region


<g aria-live="polite">
  <text x="230" y="100">Status:</text>
  <text id="idle" x="230" y="120">Idle
    <set attributeName="visibility" to="hidden" begin="heat.click" dur="30s"/>
  </text>
  <text id="heating-ice" visibility="hidden" x="230" y="120">Heating ice
    <set attributeName="visibility" to="visible" begin="heat.click" dur="2s"/>
  </text>
  ...
</g>
  

Animation + live region demo

SVG future

Specifications