Making SVG accessible

London Web Standards, London May 2017

• Mastodon: @tink@toot.cafe
• Twitter: @LeonieWatson
• Blog:     tink.uk
• Github: https://github.com/ljwatson

SVG past

History

• SVG1, 2001
• SVG1.1, 2003
• SVG1.1 2nd Edition, 2011

Background

Accessibility Features of SVG, 2000

• Structure
• Styling
• Device independence
• Metadata

SVG present

Ways to use SVG

• CSS background image
• HTML img source
• Inline HTML
• Stand-alone document

CSS background image

Treat it the same as other background image formats

• Give it an accessible name
• Use a High Contrast Mode (HCM) detection script

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

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

• SVG 2.0 (work has halted)
• SVG Accessibility API Mappings (AAM)
• ARIA Graphics module