Accessible SVG test page

Jump to:

• Content
• Links
• Buttons

Notes

• Feel free to contribute via GitHub.
• "VO" is used as an abbreviation for "Voiceover".
• Narrator testing was done on Win 10 OS build 16299.522.
• For IE, the attribute focusable="false" should be added to the SVG element to ensure there's no double focus for links and buttons (implemented) and to ensure a decorative SVG is not focusable (not implemented).

Summary

• Support for inline content is getting better; Voiceover most improved!
• For links and buttons, all combinations except Narrator support aria-label when SVG used as link and button content.
• For links and buttons, all combinations except Narrator support an IMG with an alt attribute as link and button content.
• This use case passes all tests: Content | IMG | alt + role=img
• JAWS 18 and JAWS 2019 + IE 11 passed all tests!
• Talkback and latest VO on Mac passed all tests but one.

Related Articles

• Contextually Marking up accessible images and SVGs, by Scott O'Hara, May 2019.
• Creating Accessible SVGs, Deque Systems, by Carie Fisher, Jan. 2019.
• Accessible SVG Icons with Inline Sprites, 24 Accessibility, by Marco Hengstenberg, Dec. 2018.
• Making SVG accessible, London Web Standards slide deck, by Leonie Watson, May 2017.
• 7 solutions for creating more accessible SVGs, by Simply Accessible, Mar. 2017.
• Accessible SVGs, CSS-Tricks, by Heather Migliorisi, Jul. 2016.

Content

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

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

<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>

<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>

<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>

<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>

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

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

<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>

Links

<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>

<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>

<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>

Link | IMG | alt

<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 (2018.1.1)	NVDA (2018.4)	NVDA (2020.1)	JAWS (17)	JAWS (18)	JAWS (2019)	VO (Mac 10.12.6)	VO (Mac 10.14.2)	VO (iOS 11.3)	VO (iOS 12.1)	TalkBack (And 7)	TalkBack (And 9)	Narrator
Firefox (59)	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Firefox (64)	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Firefox (76)	unknown	unknown	pass	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
IE (11)	unknown	unknown	unknown	pass	pass	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Safari 11 (Mac)	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown
Safari 12 (Mac)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown
Safari (iOS 11.3)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown
Safari (iOS 12.1)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown
Chrome (65.0)	pass	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown
Chrome (71.0)	unknown	pass	unknown	unknown	pass	pass	unknown	unknown	unknown	unknown	unknown	pass	unknown
Chrome (81.0)	unknown	unknown	pass	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Edge (41.1)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	fail

Notes:

• Narrator: when tabbing to it, output is verbose and partially incorrect.
  IMPORTANT: this is reportedly corrected in the latest version of Windows 10/Edge (18 September 2018).

Buttons

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

<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>

<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>

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 (2018.1.1)	NVDA (2018.4)	NVDA (2020.1)	JAWS (17)	JAWS (18)	JAWS (2019)	VO (Mac 10.12.6)	VO (Mac 10.14.2)	VO (iOS 11.3)	VO (iOS 12.1)	TalkBack (And 7)	TalkBack (And 9)	Narrator
Firefox (59)	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Firefox (64)	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Firefox (76)	unknown	unknown	pass	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
IE (11)	unknown	unknown	unknown	pass	pass	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Safari 11 (Mac)	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown
Safari 12 (Mac)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown
Safari (iOS 11.3)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown
Safari (iOS 12.1)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown	unknown
Chrome (65.0)	pass	unknown	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	pass	unknown	unknown
Chrome (71.0)	unknown	pass	unknown	unknown	pass	pass	unknown	unknown	unknown	unknown	unknown	pass	unknown
Chrome (81.0)	unknown	unknown	pass	unknown	unknown	pass	unknown	unknown	unknown	unknown	unknown	unknown	unknown
Edge (41.1)	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	unknown	fail

Notes:

• Narrator: with arrow keys only "button" is announced; when tabbed to output starts with "region" and missing the label.