forked from maartenzam/accessible-html-dataviz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg-inline-group-list.html
68 lines (61 loc) · 2.16 KB
/
svg-inline-group-list.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accessible SVG data visualisation</title>
</head>
<body>
<h1>Screen reader market shares</h1>
<svg
aria-labelledby="chart-title chart-description"
width="900"
height="400"
>
<title id="chart-title">
A bar chart showing the market shares of the most used screen readers
</title>
<desc id="chart-description">
The most used screen reader is JAWS, with 70 percent of users reporting
to commonly use it. Data comes from the WebAIM Screen Reader User Survey
9
</desc>
<g id="bars" role="list" aria-label="bar graph">
<g role="listitem">
<text x="95" y="56" text-anchor="end">JAWS</text>
<rect x="100" y="40" height="20" width="700"></rect>
<text x="805" y="56">70%</text>
</g>
<g role="listitem">
<text x="95" y="96" text-anchor="end">NVDA</text>
<rect x="100" y="80" height="20" width="588"></rect>
<text x="693" y="96">58.8%</text>
</g>
<g role="listitem">
<text x="95" y="136" text-anchor="end">VoiceOver</text>
<rect x="100" y="120" height="20" width="413"></rect>
<text x="518" y="136">41.3%</text>
</g>
<g role="listitem">
<text x="95" y="176" text-anchor="end">Narrator</text>
<rect x="100" y="160" height="20" width="368"></rect>
<text x="473" y="176">36.8%</text>
</g>
<g role="listitem">
<text x="95" y="216" text-anchor="end">ZoomText</text>
<rect x="100" y="200" height="20" width="89"></rect>
<text x="194" y="216">8.9%</text>
</g>
<g role="listitem">
<text x="95" y="256" text-anchor="end">ChromeVox</text>
<rect x="100" y="240" height="20" width="47"></rect>
<text x="152" y="256">4.7%</text>
</g>
<g role="listitem">
<text x="95" y="296" text-anchor="end">Other</text>
<rect x="100" y="280" height="20" width="108"></rect>
<text x="213" y="296">10.8%</text>
</g>
</g>
</svg>
</body>
</html>