-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathaccordion.html
142 lines (142 loc) · 7.64 KB
/
accordion.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accordions / Blinds</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/accordion.css">
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>Accordion <span style="text-transform: lowercase">a.k.a.</span> Blinds</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<p>This method is light on aria. Aria tagging used is:</p>
<ul class="bullet singletons">
<li>aria-owns (preferred method) or aria-controls</li>
<li>aria-expanded</li>
<li>aria-hidden</li>
</ul>
<p>I chose to use internal links for the markup even though the JS prevents default so that focus stays on the blind trigger. Using anchor tags made the most semantic sense since if I turned off css and js the link would take you directly to the content that the link is pointing too. A button would just be confusing.</p>
<p>Notice that the aria-expanded is on the trigger, not on the expandable container. Also, if there is no DOM ownership or if aria-owns is not used then use aria-controls.</p>
<h2>Using aria-owns (preferred method)</h2>
<p>Example with a parent/child relationship between the content trigger and the content in the blind. In this case <strong>aria-owns</strong> is assigned to the trigger to tie it to its expandable container. Therefore aria-controls is unnecessary.</p>
<div class="expenses" id="test">
<div class="itemization">
<a href="#oldWomanBreakdown" class="accordion-trigger" aria-owns="oldWomanBreakdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-collapsed">
<circle cx="25" cy="25" r="25"/>
<path fill="#FFFFFF" d="M37,25L20.5,40c-1.2,1.1-3.1,1-4.2-0.2c-1.1-1.2-1-3.1,0.2-4.2L28,25L16.5,15c-1.2-1.1-1.4-3-0.3-4.2,c1.1-1.2,3-1.4,4.2-0.3L37,25z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-expanded">
<circle cx="25" cy="25" r="25"/>
<path fill="#FFFFFF" d="M25,37L10,20.5c-1.1-1.2-1-3.1,0.2-4.2c1.2-1.1,3.1-1,4.2,0.2L25,28l10-11.5c1.1-1.2,3-1.4,4.2-0.3,c1.2,1.1,1.4,3,0.3,4.2L25,37z"/>
</svg>
Old Woman
<span class="cost">
$100
</span>
</a>
</div>
<div id="oldWomanBreakdown" class="accordion">
<div class="itemization">
2 coconuts
<span class="cost">
$30
</span>
</div>
<div class="itemization">
4 African swallows
<span class="cost">
$60
</span>
</div>
<div class="itemization">
Some lovely filth
<span class="cost">
$10
</span>
</div>
</div>
<div class="itemization">
<a href="#rogerBreakdown" class="accordion-trigger" aria-owns="rogerBreakdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-collapsed">
<circle cx="25" cy="25" r="25"/>
<path fill="#FFFFFF" d="M37,25L20.5,40c-1.2,1.1-3.1,1-4.2-0.2c-1.1-1.2-1-3.1,0.2-4.2L28,25L16.5,15c-1.2-1.1-1.4-3-0.3-4.2,c1.1-1.2,3-1.4,4.2-0.3L37,25z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-expanded">
<circle cx="25" cy="25" r="25"/>
<path fill="#FFFFFF" d="M25,37L10,20.5c-1.1-1.2-1-3.1,0.2-4.2c1.2-1.1,3.1-1,4.2,0.2L25,28l10-11.5c1.1-1.2,3-1.4,4.2-0.3,c1.2,1.1,1.4,3,0.3,4.2L25,37z"/>
</svg>
Roger the Shrubber
<span class="cost">
$200
</span>
</a>
</div>
<div id="rogerBreakdown" class="accordion">
<div class="itemization">
Heath
<span class="cost">
$75
</span>
</div>
<div class="itemization">
Arborvitae
<span class="cost">
$125
</span>
</div>
</div>
</div>
<h3>Code Sample</h3>
<div class="code"><pre><code>
<div>
<a href="#oldWomanBreakdown" class="accordion-trigger" aria-owns="oldWomanBreakdown" aria-expanded="false">Old Woman <span class="cost">$100</span></a>
</div>
<div id="oldWomanBreakdown" class="accordion">
<div class="itemization">2 coconuts <span class="cost">$30</span></div>
<div class="itemization">4 African swallows <span class="cost">$60</span></div>
<div class="itemization">Some lovely filth <span class="cost">$10</span></div>
</div>
</code></pre></div>
<h2>Using aria-controls (alternate method)</h2>
<p>Example where blind reveals new content but it is unnecessary to use aria to define ownership. The <strong>aria-controls</strong> attribute is used to tie trigger and expandable content together.</p>
<p>Screen readers don't give comprehensive hints with this method. Therefore I prefer the aria-owns method.</p>
<div class="book-of-armaments">
<h3>
<a href="#armaments_2_9" class="accordion-trigger" aria-controls="armaments_2_9" aria-expanded="false">
Armaments 2:9–10
</a>
</h3>
<p id="armaments_2_9" class="accordion">And Saint Attila raised the hand grenade up on high, saying, "O Lord, bless this thy hand grenade, that with it thou mayst blow thine enemies to tiny bits, in thy mercy." And the Lord did grin. And the people did feast upon the lambs, and sloths, and carp, and anchovies, and orangutans, and breakfast cereals, and fruit bats, and large chu…</p>
<h3>
<a href="#armaments_2_19" class="accordion-trigger" aria-controls="armaments_2_19" aria-expanded="false">
Armaments 2:19–21
</a>
</h3>
<p id="armaments_2_19" class="accordion">And the Lord spake, saying, "First shalt thou take out the Holy Pin. Then shalt thou count to three, no more, no less. Three shall be the number thou shalt count, and the number of the counting shall be three. Four shalt thou not count, neither count thou two, excepting that thou then proceed to three. Five is right out. Once the number three, being the third number, be reached, then lobbest thou thy Holy Hand Grenade of Antioch towards thy foe, who, being naughty in My sight, shall snuff it.</p>
</div>
<h2>Using HTML5 <details> and <summary> elements</h2>
<p>I suggest staying away from using HTML5 details and summary elements to drive expand/collapse. This is because both browser and screen-reader support is spotty at best.</p>
<p><a href="http://caniuse.com/#feat=details">(link to "can I use" regarding details and summary)</a></p>
<p>Some of the issues found as of February 2017:</p>
<ul class="bullet singletons">
<li>IE doesn't support details/summary. JAWS still runs best on IE11 (Edge not so much). And currently Edge doesn't support details/summary either.</li>
<li>Voice Over on iOS and Mac will not allow a user to focus on the summary and engage expand/collapse contents.</li>
<li>NVDA does not announce the state change when expanding or collapsing.</li>
</ul>
</div>
<div class="overlay"></div>
<div class="block-screen"></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>
<script type="text/javascript" src="js/tab-menu.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript" src="js/show-code.js"></script>
</body>
</html>