SVG Accessibility - CSUN

SVG Accessibility

CSUN 2017

SVG past

W3C Recommendations

Other Work

Accessibility Features of SVG, 2000
Structure, Styling, Device independence, Metadata
SVG Full 1.2
Work stopped in 2005
SVG 2
Still in development…

SVG present

SVG in Browsers

"All browsers support SVG"
(With some exceptions, and no real specification :( )

Not the best way…

Stand-alone SVG
No accessible information in MS browsers
CSS background image
Needs a foreground alternative
Needs an accessible name
HTML img element
<img src="foo.svg" alt="…" longdesc="….html">
No interactivity

Inline HTML

Best results for accessible information

<body>
  <p>Using SVG inline:</p>
  <svg width="300" height="200">
   <!-- some svg -->
  </svg>
<!-- some more HTML... -->

Basic SVG:

Exposed role of image/diagram in Firefox, IE

<svg width="2.5em" height="1em">
</svg>

Basic SVG + ARIA

Exposed role of image

<svg role="img" width="250" height="100">
    <!-- some SVG… -->
</svg>

SVG title

First one exposed as accessible name

<svg role="img" width="250" height="100">
  <title>Rectangle</title>
  <rect width="100%" height="100%" fill="#81b;"/>
</svg>

SVG title + ARIA

First one exposed as accessible name

<svg role="img" aria-labelledby="title" width="250" height="100">
  <title id="title">Rectangle</title>
  <rect width="100%" height="100%" fill="#81b;"/>
</svg>

Multiple titles need ARIA

<svg width="250" height="100">
  <rect aria-labelledby="purple"
   fill="#81b;" width="10" height="10" >
    <title id="purple">Purple</title> </rect>
  <rect aria-labelledby="green"
   fill="#0b0;" x="200" y="90" width="10" height="10">
    <title id="green">Green</title> </rect>
</svg>

SVG desc

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

SVG desc + ARIA

<svg role="img" width="50" height="10">
  <title id="title">Rectangle</title>
  <rect aria-describedby="desc"
    width="50" height="10" fill="#81b;"
    <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">Tequila</text>
</svg>

SVG links

(Internal links broken in Safari :( )

<svg width="400" height="400">
  <a xlink:href="#foo">
    <rect x="118" y="25" height="20" width="90" fill="#81b"/>
    <text x="120" y="33">Tequila</text>
  </a>
  <text x="30" y="330" id="foo">Makes me happy</text>
</svg>

SVG links: example

Tequila Makes me happy

SVG tabindex

Works everywhere now \o/

<svg width="250" height="100">
 <rect role="button" tabindex="0"
  fill="#81b" width="100%" height="100%">
  <text x="120" y="33">Foo</text>
 </rect>
<!-- (Hey! Make the button WORK …) -->
</svg>

Define objects…

<svg width="100" height="30">
 <defs>
  <g id="rect">
  <desc>A rectangle on its side</desc>
   <rect width="20%" height="10%"/>
  </g>
 </defs>
<!-- … continued on next slide …>

For re-use: A rectangle on its side blue green 


<!-- continuing the same SVG -->
 <use xlink:href="#rect" fill="blue">
  <title>blue</title></use>
 <use xlink:href="#rect" x="100" y="50" fill="green"/>
  <title>green</title></use>
</svg>

Putting it together

A bar chart is a table!

<svg role="table"><title>Bar chart example</title>
 <text y="20" role="heading" aria-level="1">stuff</text>
 <g role="rowgroup">
  <text role="rowheader" y="75">Tuesday</text>
  <rect role="cell" aria-labelledby="value-1-1"…
    <title id="value-1-1">477</title>
<!-- etc etc -->

Zoom and pan

A tiny flowchart

Adapt to zoom:

Use CSS:

<style>
 :focus path, :focus polygon,
   :focus ellipse { stroke-width: 4}
 g g:hover path, g g:hover polygon,
   g g:hover ellipse { stroke-width: 4}
 :focus text, g g:hover text
   { stroke: black; stroke-width: .5}
</style>

SVG Animation

<line x1="300" x2="300" y1="300" y2="350">
  <animate attributeName="y1" to="280"
    dur="2s" begin="heat.click" fill="freeze"/>
  <animate attributeName="y1" from="280" to="200"
    dur="5s" begin="heat.click+7s" fill="freeze"/>
</line>
<!-- ... -->
<g id="heat" role="button" tabindex="0">

Starting animation

(Interaction with the web is hard ;( )

Starting animation: the truth

var heat=document.querySelector("#heat");
heat.addEventListener("keydown",start);
function start(e){
 if (e.keyCode == 32) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
  heat.dispatchEvent(evt);}
}

Explaining animations

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

SVG Animation

SVG future

With a bit of

SVG would be even better

It works today. It can be accessible

Specifications

Thank you