Test case: SVG accessible names

These test cases look at different ways of giving an <svg> element an accessible name.

Test case 1

This test cases uses the <title> element to provide the accessible name for the <svg> element.

Test case 1 code

<div class="example">
<svg width="250" height="100">
<title>Rectangle</title>
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</div>

Test case 1 example

Rectangle

Test case 2

This test case uses the aria-labelledby attribute to associate the <title> element with the <svg> element.

Test case 2 code

<div class="example">
<svg width="250" height="100" aria-labelledby="title">
<title id="title">Rectangle</title>
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</div>

Test case 2 example

Rectangle

Test case 3

This test case uses the aria-label attribute to provide the accessible name for the <svg> element.

Test case 3 code

<div class="example>
<svg width="250" height="100" aria-label="Rectangle">
<title>Rectangle</title>
<rect x="0" y="0" width="100%" height="100%" style="fill: #820bbb;" />
</svg>
</div>

Test case 3 example

Rectangle

Browser support

Unless otherwise stated, all tests carried out with the most recent OS, browser, and screen reader versions. Last tested on 16th Jan 2018 (thanks to Matthew Atkinson).

Browser support for SVG accessible names
<title>aria-labelledbyaria-label
ChromeYesYesYes
EdgeYesYesYes
FirefoxYesYesYes
IE11YesNoYes
SafariYesYesYes