WIP
Edit me
Advised markup
Emmet
svg[role="presentation"] > g[role="img"][aria-label]
Symbols
svg[role="presentation"] > use[role="img"] > title
svg[hidden=""] > symbol[id]
HTML
<svg role="presentation">
<g role="img" aria-label="Test">
<rect x="0" y="0" width="100" height="100" />
</g>
</svg>
Symbols
<svg role="presentation">
<use role="img" xlink:href="#link">
<title>Test</title>
</use>
</svg>
<svg hidden>
<symbol id="link">
<rect x="0" y="0" width="100" height="100" />
</symbol>
</svg>
Screen reader results
Basic markup
<svg role="img"><title>Test</title><rect x="0" y="0" width="100" height="100" /></svg>| Screen reader | voiceover (macOs) 8.0 (562.13) | ChromeVox 53 | NVDA 2017.4 | |||||
|---|---|---|---|---|---|---|---|---|
| Browser | Safari 11 | Chrome 64 | Firefox 57 | Chrome 62 | Firefox 57 | Chrome 63 | Edge 16 | IE 11 |
| Spoken output | Test group | Test, image | Test, image | image | Test graphic, Test | graphic, Test | graphic, Test | graphic, Test, graphic, Test |
| Skipped | false | false | false | false | false | false | false | false |
with aria-label
<svg role="img" aria-label="Test"><rect x="0" y="0" width="100" height="100" /></svg>| Screen reader | voiceover (macOs) 8.0 (562.13) | ChromeVox 53 | NVDA 2017.4 | |||
|---|---|---|---|---|---|---|
| Browser | Firefox 57 | Chrome 62 | Firefox 57 | Chrome 63 | Edge 16 | IE 11 |
| Spoken output | Test, image | Test, image | Test graphic, Test | graphic, Test | graphic, Test | graphic, Test |
| Skipped | false | false | false | false | false | false |
Note:
ChromeVox currently doesn’t pronounce <title> or aria-labelby while it’s visible witin the automation API
extended with aria & role
<svg role="presentation">
<g role="img" aria-label="Test">
<rect x="0" y="0" width="100" height="100" />
</g>
</svg>| Screen reader | voiceover (macOs) 8.0 (562.13) | ChromeVox 53 | NVDA 2017.4 | |||
|---|---|---|---|---|---|---|
| Browser | Firefox 57 | Chrome 62 | Firefox 57 | Chrome 63 | Edge 16 | IE 11 |
| Spoken output | Test, image | Test, image | Test graphic, Test | graphic, Test | graphic, Test | graphic, Test |
| Skipped | false | false | false | false | false | false |
Note:
Adds Safari support, but the SVG can’t have title element as direct child of <svg>
symbols
<svg role="presentation">
<use role="img" xlink:href="#r" />
</svg>
<svg>
<symbol id="r">
<title>Test</title>
<rect x="0" y="0" width="100" height="100" />
</symbol>
</svg>| Screen reader | voiceover (macOs) 8.0 (562.13) | ChromeVox 53 | NVDA 2017.4 | |||
|---|---|---|---|---|---|---|
| Browser | Firefox 57 | Chrome 62 | Firefox 57 | Chrome 63 | Edge 16 | IE 11 |
| Spoken output | image | image | blank | graphic | ||
| Skipped | false | false | false | false | false | false |
symbols extend with role
<svg role="presentation">
<use role="img" xlink:href="#link">
<title>Test</title>
</use>
</svg>
<svg hidden>
<symbol id="link">
<rect x="0" y="0" width="100" height="100" />
</symbol>
</svg>| Screen reader | voiceover (macOs) 8.0 (562.13) | ChromeVox 53 | NVDA 2017.4 | |||
|---|---|---|---|---|---|---|
| Browser | Chrome 57 | Chrome 62 | Firefox 57 | Chrome 63 | Edge 16 | IE 11 |
| Spoken output | Test, image | Test, image | Test graphic, Test | graphic, Test | graphic Test | graphic, Test |
| Skipped | false | false | false | false | false | false |