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
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

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

Basic SVG:

Exposed role of image/diagram in Firefox, IE

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

Basic SVG + ARIA

Exposed role of image

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

SVG title

First one exposed as accessible name

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

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;"/>

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 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 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>

SVG text

Available to assistive technologies as plain text

<svg width="250" height="100">
  <text x="50" y="25">Tequila</text>

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>
  <text x="30" y="330" id="foo">Makes me happy</text>

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>
<!-- (Hey! Make the button WORK …) -->

Define objects…

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

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

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

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:

 :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}

SVG Animation

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

Starting animation

(Interaction with the web is hard ;( )

Starting animation: the truth

var heat=document.querySelector("#heat");
function start(e){
 if (e.keyCode == 32) {
  var evt = document.createEvent("MouseEvents");

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="" dur="30s"/></text>
  <text id="heating-ice" visibility="hidden"
    x="250" y="120">Heating ice
    <animate attributeName="visibility"
    to="visible" begin="" dur="2s"/></text>

SVG Animation

SVG future

With a bit of

SVG would be even better

It works today. It can be accessible


Thank you