Accessible SVG test page

Jump to:

Feel free to pitch in via GitHub.

"VO" is short for "Voiceover".

Summary

Nuances and possible fixes (not implemented):

Content

Content | inline | title | no ARIA

red square
<svg version="1.1" width="50" height="50">
	<title>red square</title>
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) fail unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown fail unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown fail unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Content | inline | title | with ARIA | role=img + aria-label

<svg version="1.1" width="50" height="50" aria-label="red square" role="img" >
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) unknown unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown pass unknown unknown unknown unknown unknown
IE (11) unknown unknown pass unknown unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Content | inline | title | with ARIA | role=img + aria-labelledby

red square
<svg version="1.1" width="50" height="50" role="img" aria-labelledby="title-0">
	<title id="title-0">red square</title>
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Content | inline | title + description | no ARIA

red square A plain red square defined at 50 pixels in length and height.
<svg version="1.1" width="50" height="50">
	<title>red square</title>
	<desc>A plain red square defined at 50 pixels length and height.</desc>
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square, a plain red square defined at 50 pixels length and height, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) unknown unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown fail unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown fail unknown unknown
Chrome (65.0) unknown fail unknown fail unknown unknown unknown fail unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Content | inline | with ARIA | title + description

red square A plain red square defined at 50 pixels in length and height.
<svg version="1.1" width="50" height="50" role="img" aria-labelledby="title-1" aria-describedby="desc-1">
	<title id="title-1">red square</title>
	<desc id="desc-1">A plain red square defined at 50 pixels length and height.</desc>
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square, a plain red square defined at 50 pixels length and height, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) fail unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown fail unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown fail unknown fail unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Content | inline | with ARIA | title + description (2 values in aria-labelledby)

red square A plain red square defined at 50 pixels in length and height.
<svg version="1.1" width="50" height="50" role="img" aria-labelledby="title-2 desc-2">
	<title id="title-2">red square</title>
	<desc id="desc-2">A plain red square defined at 50 pixels length and height.</desc>
	<rect width="50" height="50" fill="#cc0000" />
</svg>

Success criteria: screen reader outputs "red square, a plain red square defined at 50 pixels length and height, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Content | IMG | alt

checkmark

<p><img src="checkmark.svg" width="50" alt="checkmark"></p>

Success criteria: screen reader outputs "checkmark, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown fail unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Content | IMG | alt + role=img

checkmark

<p><img src="checkmark.svg" width="50" alt="checkmark" role="img"></p>

Success criteria: screen reader outputs "checkmark, image" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Content | hide | duplicate visual text

Success! Your order went through.

<div>
	<svg width="50" height="50" aria-hidden="true">
		<title>checkmark</title>
		<use xlink:href="#icon-checkmark"></use>
	</svg> 
	<p>Success! Your order went through.</p>
</div>

Success criteria: screen reader outputs "Success! Your order went through."

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown pass

Notes:

Link | Inline | title | no ARIA

Warning
<a href="javascript:alert('Warning: you must rock!');">
	<svg focusable="false" width="50" height="50">
		<title>Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</a>

Success criteria: screen reader outputs "Warning, link" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) fail unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown fail unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass* unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Link | Inline | title | with ARIA

Warning
<a href="javascript:alert('Warning: you must rock!');">
	<svg role="img" aria-labelledby="title-3" focusable="false" width="50" height="50">
		<title id="title-3">Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</a>

Success criteria: screen reader outputs "Warning, link" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass* unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Link | Inline | title | aria-label

Warning
<a href="javascript:alert('Warning: you must roll!');" aria-label="show warning">
	<svg role="img" aria-labelledby="title-4" focusable="false" width="50" height="50">
		<title id="title-4">Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</a>

Success criteria: screen reader outputs "show warning, link" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Link | IMG | alt

passing information
<a href="javascript:alert('You passed cause you rock and roll!');">
	<img src="checkmark.svg" width="50" height="50" alt="passing information">
</a>

Success criteria: screen reader outputs "passing information, link" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Buttons

Button | Inline | title | no ARIA

<button onclick="alert('this is a warning')">
	<svg focusable="false" width="50" height="50">
		<title>Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</button>

Success criteria: screen reader outputs "Warning, button" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) fail unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown fail unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown fail pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown fail unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown fail unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown fail unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Button | Inline | title | with ARIA

<button onclick="alert('this is another warning')">
	<svg role="img" aria-labelledby="title-5" focusable="false" width="50" height="50">
		<title id="title-5">Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</button>

Success criteria: screen reader outputs "Warning, button" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown fail pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Button | Inline | aria-label

<button aria-label="do test" onclick="alert('this is yet another warning')">
	<svg focusable="false" width="50" height="50">
		<title>Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</button>

Success criteria: screen reader outputs "do test, button" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes:

Button | IMG | alt

<button onclick="javascript:alert('You clicked a checkmark.');">
	<img src="checkmark.svg" width="50" height="50" alt="checkmark">
</button>

Success criteria: screen reader outputs "checkmark, button" or similar.

Test results:

NVDA (2017.2) NVDA (2018.1.1) JAWS (17) JAWS (18) VO (Mac 10.12.6) VO (iOS 11.3) VO (iOS 12.1) TalkBack (Android 7.0) Narrator
Firefox (53) pass unknown unknown unknown unknown unknown unknown unknown unknown
Firefox (59) unknown pass unknown unknown unknown unknown unknown unknown unknown
IE (11) unknown unknown pass pass unknown unknown unknown unknown unknown
Safari (Mac 11.0.3) unknown unknown unknown unknown pass unknown unknown unknown unknown
Safari (iOS 11.3) unknown unknown unknown unknown unknown pass unknown unknown unknown
Safari (iOS 12.1) unknown unknown unknown unknown unknown unknown pass unknown unknown
Chrome (65.0) unknown pass unknown pass unknown unknown unknown pass unknown
Edge (41.1) unknown unknown unknown unknown unknown unknown unknown unknown fail

Notes: