-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdisclosure.html
More file actions
143 lines (139 loc) · 7.24 KB
/
disclosure.html
File metadata and controls
143 lines (139 loc) · 7.24 KB
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
143
<!DOCTYPE html>
<html>
<head>
<title>Disclosure Widgets</title>
<style type="text/css">
h1 {
text-align: center;
}
.prettyWrapper {
display: flex;
align-items: center;
}
.prettyDetails {
position: relative;
background: #A4E6EB;
border: 1px solid black;
width: 200px;
border-radius: 5px;
}
.prettySummary {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
line-height: 25px;
cursor: pointer;
}
.prettyDetails p {
margin: 0;
padding: 10px;
background: white;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>
<h1>Disclosure Widgets</h1>
<h2>The New Way</h2>
<p>HTML now offers us a simple way of accomplishing this using the <code><details></code> element along with its child <code><summary></code> element. Let's take a look.
<pre class="prettyprint lang-html">
<details>
<summary>More Information</summary>
This is some text that is toggled.
</details>
</pre>
<p>Renders this:</p>
<div class="prettyWrapper">
<details class="noStyle">
<summary class="noStyle">More Information</summary>
<p class="noStyle">This is some text that is toggled.</p>
</details>
</div>
<p>This provides keyboard support out of the box. Screen readers will also announce the control's expanded/collapsed state without any additional code necessary. The initial design is not the best looking, though. Let's add some styling.</p>
<pre class="prettyprint lang-html">
details {
position: relative;
background: #A4E6EB;
border: 1px solid black;
width: 200px;
border-radius: 5px;
}
summary {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
line-height: 25px;
cursor: pointer;
}
details p {
margin: 0;
padding: 10px;
background: white;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
}
</pre>
<p>Renders this:</p>
<details class="prettyDetails">
<summary class="prettySummary">More Information</summary>
<p>This one should look prettier.</p>
</details>
<h2>The Oldschool Way</h2>
<p>The link below toggles the expansion/collapse of additional information. This is an example of how to implement such a control with some simple Javascript.</p>
<p><strong>Note:</strong> For satisfying <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">WCAG Success Criteria 2.4.4 - Link Purpose (In Context)</a> when meeting WCAG A and AA requirements, the "Show" and "Hide" text would need surrounding context to convey the context of the link. Understanding link purpose out of context through the link text alone is required by <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-link.html">Success Criteria 2.4.9 - Link Purpose (Link Only)</a>, which is a WCAG level AAA requirement. Most websites and applications strive for WCAG A and AA compliance so this is generally not a requirement.</p>
<p>Concepts included in this example for accessibility:</p>
<ul>
<li>The <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a> state has been added to the link that is expandable/collapsible to convey its state. The state is updated accordingly when the element's state changes.</li>
<li>The <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-controls">aria-controls</a> property has been added to the link that is expandable/collapsible and references the ID of the content toggled by the link.</li>
<li>The CSS display property is updated appropriately when toggling the content to ensure it is properly hidden both visually as well as programmatically to ensure it is not exposed to assistive technology when collapsed and visually hidden.</li>
</ul>
<hr />
<a href="#" onclick="togglediv()" aria-expanded="false" aria-controls="#information" id="toggleLink">Show</a>
<p id="information" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa ante, tincidunt sed eros sit amet, finibus efficitur orci. Etiam a suscipit neque, ac cursus massa. Integer eros orci, porttitor et gravida nec, maximus ut sem. Suspendisse potenti. Nunc metus dui, fermentum ac est sed, ullamcorper pulvinar est. Donec cursus sit amet mauris iaculis aliquet. Vestibulum sit amet mi nec justo malesuada tincidunt. Integer sed bibendum ex, in faucibus ligula. Sed a felis sodales, blandit ante id, iaculis enim. Vestibulum rhoncus dolor arcu, at rutrum libero molestie non. Vivamus scelerisque sapien augue, vitae venenatis enim venenatis ut. Integer in odio eget nisi facilisis consequat. Aliquam bibendum nulla ex, non porttitor neque posuere bibendum. </p>
<p>The HTML:</p>
<pre class="prettyprint lang-html">
<a href="#" onclick="togglediv()" aria-expanded="false" aria-controls="#information" id="toggleLink">Show</a>
<p id="information" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa ante, tincidunt sed eros sit amet, finibus efficitur orci. Etiam a suscipit neque, ac cursus massa. Integer eros orci, porttitor et gravida nec, maximus ut sem. Suspendisse potenti. Nunc metus dui, fermentum ac est sed, ullamcorper pulvinar est. Donec cursus sit amet mauris iaculis aliquet. Vestibulum sit amet mi nec justo malesuada tincidunt. Integer sed bibendum ex, in faucibus ligula. Sed a felis sodales, blandit ante id, iaculis enim. Vestibulum rhoncus dolor arcu, at rutrum libero molestie non. Vivamus scelerisque sapien augue, vitae venenatis enim venenatis ut. Integer in odio eget nisi facilisis consequat. Aliquam bibendum nulla ex, non porttitor neque posuere bibendum.</p>
</pre>
<p>The JavaScript</p>
<pre class="prettyprint lang-js">
function togglediv() {
var div = document.getElementById("information");
var link = document.getElementById("toggleLink");
var value = link.getAttribute("aria-expanded");
div.style.display = div.style.display == "none" ? "block" : "none";
event.preventDefault();
if (value == "false") {
link.setAttribute("aria-expanded", "true");
link.innerHTML = "Hide";
} else {
link.setAttribute("aria-expanded", "false");
link.innerHTML = "Show";
}
}
</pre>
<footer>
<a href="http://robertjmccaffery.com/examples.html">Back to Examples</a> | <a href="http://robertjmccaffery.com/">Home</a>
</footer>
<script type="text/javascript">
function togglediv() {
var div = document.getElementById("information");
var link = document.getElementById("toggleLink");
var value = link.getAttribute("aria-expanded");
div.style.display = div.style.display == "none" ? "block" : "none";
event.preventDefault();
if (value == "false") {
link.setAttribute("aria-expanded", "true");
link.innerHTML = "Hide";
} else {
link.setAttribute("aria-expanded", "false");
link.innerHTML = "Show";
}
}
</script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
</body>
</html>