> checkmark

Accessible SVG test page

Jump to:

Last updated June 30, 2017. Feel free to pitch in via GitHub.

Tested with:

Possible nuances and fixes (may not be implemented below):

Content

Content | inline | no ARIA

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

Test results:

Content | inline | with ARIA

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

Test results:

Content | inline | title + description

red square A plain red square defined at 40 pixels in length and height.
<svg version="1.1" width="40" height="40" 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 40 pixels length and height.</desc>
	<rect width="40" height="40" fill="#cc0000" />
</svg>

Test results:

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

red square A plain red square defined at 40 pixels in length and height.
<svg version="1.1" width="40" height="40" 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 40 pixels length and height.</desc>
	<rect width="40" height="40" fill="#cc0000" />
</svg>

Test results:

Content | IMG | alt

checkmark

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

Test results:

Content | IMG | alt + role=img

checkmark

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

Test results:

Content | hide | duplicate visual text

Success! Your order went through.

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

Test results:

Link | Inline | title | no ARIA

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

Test results:

Link | Inline | title | with ARIA

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

Test results:

Link | Inline | 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="40" height="40">
		<title id="title-4">Warning</title>
		<use xlink:href="#warning"></use>
	</svg>
</a>

Test results:

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>

Test results:

Buttons

Button | Inline | title | no ARIA

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

Test results:

Button | Inline | title | with ARIA

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

Test results:

Button | Inline | aria-label

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

Test results:

Button | IMG | alt

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

Test results: