-
Notifications
You must be signed in to change notification settings - Fork 28
/
svg.html
82 lines (81 loc) · 4.8 KB
/
svg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessible Inline SVGs</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>Inline SVG used for buttons and links</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<p>The following findings have been updated based on tests done in December 2016. Find the <a href="http://codepen.io/haltersweb/pen/eByVMK">test codepen page</a> to do your own tests and review the table of screen-reader findings.</p>
<h2>Why use SVG instead background image</h2>
<p>SVG is preferable for icons over background images/sprites because if PC is in High Contrast Mode, SVGs are still visible. Background images are not rendered.</p>
<p>SVGs can be scaled to their parent container (as long as you don't set width and height to SVG).</p>
<h2>Stay away from the svg title and desc elements</h2>
<p>The SVG title and desc elements are currently still very problematic with most screen readers. Therefore I do not suggest using the svg title and desc elements for accessibility.</p>
<p>If we consider a nested image tag as the gold standard to be mimicked by the svg tag we should stay away from the svg desc or title tags. Use aria-label for the button and screen-reader-text for the link.</p>
<p>Nor do I suggest using role="img", assuming you want to mimic a nested image tag. Using role="presentation" gives a more consistent result.</p>
<p>Also, stay away from using aria-labeledby and aria-describedby. This causes repeating phrases.</p>
<h2>Known issues:</h2>
<p>Below are just some of the issues when using nested <strong>title and desc</strong> elements.</p>
<h3>Problems with NVDA:</h3>
<ul class="bullet">
<li>NVDA doesn't recognize the desc element</li>
<li>NVDA reads the svg's title element text two times</li>
</ul>
<h3>Problems with VoiceOver:</h3>
<ul class="bullet">
<li>VoiceOver on iOS does not recognize the title or desc element.</li>
<li>VoiceOver on Mac does not recognize the desc element.</li>
</ul>
<h2>Preferred method:</h2>
<p>I suggest trying to match the screen-reader output of a button or link with a nested image element.</p>
<ul class="bullet">
<li>Assign the attribute <strong>role="presentation"</strong> to the SVG element. Unlike role="img", using "presentation" gives a result consistent with actually using a nested image inside of a button or link.</li>
<li>Assign the attribute <strong>focusable="false"</strong> to the SVG element.</li>
<li>Use either <strong>aria-label</strong> for buttons and <strong>hidden screen-reader-text</strong> for links to give the button or link meaning for those using a screen reader. See the "screen-reader-text" class in <a href="css/base.css">base.css</a>.</li>
</ul>
<h3>Button example:</h3>
<div>
<button type="button" style="width: 50px; height: 50px;" aria-label="Reveal navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" role="presentation" focusable="false">
<circle cx="45" cy="45" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</button>
</div>
<pre class="code-snippet" style="width: 700px;"><code>
<button type="button" style="width: 50px; height: 50px;" aria-label="Reveal navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="00 0 90 90" role="presentation" focusable="false">
<circle cx="45" cy="45" r="40" stroke="black" stroke-width="3" fill="red">
</svg>
</button>
</code></pre>
<h3>Link example:</h3>
<div>
<a href="http://www.google.com/" style="display: inline-block; width: 50px; height: 50px;">
<span class="screen-reader-text">search google</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" role="presentation" focusable="false">
<circle cx="45" cy="45" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
</a>
</div>
<pre class="code-snippet" style="width: 700px;"><code>
<a href="http://www.google.com/" style="display: inline-block; width: 50px; height: 50px;">
<span class="screen-reader-text">search google</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="00 0 90 90" role="presentation" focusable="false">
<circle cx="45" cy="45" r="40" stroke="black" stroke-width="3" fill="blue">
</svg>
</a>
</code></pre>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
</body>
</html>