SVG accessibility

Léonie - TPG, Chaals - Yandex/Яндекс

SVG accessibility

Graphical Web, November 2016

Léonie Watson, TPG

Chaals McCathie Nevile, Yandex/Яндекс



15 years ago

Accessibility features of SVG

SVG in browsers

CSS background-image
Just a picture
Embedded as img
Only HTML: alt and longdesc
Stand-alone SVG
Nothing in IE or Edge
HTML with SVG code inline
As good as it gets?

What works?

* Sort of, most places…

It's graphics

Be clear…

A mysterious graph

And comprehensible

A confusing bar graph


A less confusing bar graph


A bar graph with high contrast set

Allow zoom/pan

A flow chart with some animationA tiny flowchart

Use onzoom, currentScale
(nonscalable units may work one day)

Animation, interaction

SVG animation

A beaker, filled with ice and a thermometer, with a heater and a button…Heating ice…

But labelling needs JS :(

Using CSS

A flow chart with some animation

Help people focus on what matters


Use links…

A roadmap. Or maybe a lot of marks left by a snail, or cracked glass.

Don't work in Safari ;(


A chord graphA chord graph

Use tabindex

A flow chart with some animation

Navigable - soon in Mac Firefox?

SVG Semantics

Use text

An organic chemistry process

trenchcoat man

title and desc

This needs aria tagging :(

Making title/desc work

<g aria-labelledby="mytitle"
  <title id="mytitle">Key component</title>
  <desc id="mydesc">Pre-mixed tomato juice,
    pepper, celery salt and chili</desc> 

Use use

<g id="aDef"><title id="def-title"…
<use aria-labelledby="myName def-title"…>
  <title id="myName">Red

ARIA helps screenreaders

Interactive controls, as per HTML (watch video)

ARIA graphics module


A preliminary proposal. Thinking, comments welcome

Picture credits

The charts
Trenchcoat Man
Tom Waterhouse - @2Dforever
Process flowchart, ugly cross-linked thing

Play with the github examples repo

"more or less"

Thank you,

Нет глупых вопросов.
Глупость - не вопрошать.