London Web Standards, London May 2017
Accessibility Features of SVG, 2000
img
sourceTreat it the same as other background image formats
Treat it the same as other image formats
<img src="foo.svg" alt="Foo">
Best results for accessible information
<svg version="1.1" width="300" height="200">...</svg>
No accessible information available in Microsoft browsers
Use onzoom
, currentScale
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>
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>
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>
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>
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>
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>
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>
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>
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 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>
<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>
Use these techniques to make complex charts and diagrams moreaccessible
<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>
<g role="table">
<g role="row">
<g role="rowheader"><text>Jaws</text></g>
...
</g>
...
</g>
<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>
<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>