-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
226 lines (226 loc) · 11.2 KB
/
index.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APG Tooltips</title>
<link rel="stylesheet" href="basic-bits.css">
<link rel="stylesheet" href="tooltips.css">
</head>
<body>
<main>
<h1>Tooltips</h1>
<p>Two different implementations of the tooltip design pattern. Both implementation comply with <a href="https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus">WCAG 2.1 SC 1.4.13 Content on Hover or Focus</a>.</p>
<section>
<h2 id="tooltip-additional">Tooltip with additional information</h2>
<p>These implementations follow the <a href="https://w3c.github.io/aria-practices/#tooltip">guidance of the ARIA Authoring Practices Guide</a>.</p>
<section>
<h3>On a button</h3>
<div class="tooltip-container">
<button type="button" aria-describedby="description" data-tooltip-trigger>
Settings
</button>
<p id="description" role="tooltip" class="hidden">View and manage settings</p>
</div>
<h4>Source</h4>
<pre><code><div class="tooltip-container">
<button type="button" aria-describedby="description">
Settings
</button>
<p id="description" role="tooltip" class="hidden">View and manage settings</p>
</div>
</code></pre>
</section>
<section>
<h3>On a link</h3>
<p>After lunch we drove up the <span class="tooltip-container"><a href="https://www.alpen-paesse.ch/en/alpenpaesse/sustenpass/" aria-describedby="link-description" data-tooltip-trigger>Sustenpass</a><span id="link-description" role="tooltip" class="hidden">A beautiful road in Switzerland</span></span> to take a group photo.</p>
<h4>Source</h4>
<pre><code><p>
After lunch we drove up the
<span class="tooltip-container">
<a href="https://www.alpen-paesse.ch/en/alpenpaesse/sustenpass/" aria-describedby="link-description" data-tooltip-trigger>
Sustenpass
</a>
<span id="link-description" role="tooltip" class="hidden">A beautiful road in Switzerland</span>
</span>
to take a group photo.
</p>
</code></pre>
</section>
</section>
<section>
<h2 id="tooltip-main-label">Tooltip as main label</h2>
<p>In this version the label for the button is privded via a <code>aria-labelledby</code> attribute that points to tooltip text.</p>
<div class="tooltip-container" data-tooltip-position="top">
<button type="button" aria-labelledby="tooltip" data-tooltip-trigger>
<span aria-hidden="true">💛</span>
</button>
<p id="tooltip" role="tooltip" class="hidden">Like</p>
</div>
<section class="warning">
<p>Warning: this pattern isn’t a valid/supported usecase in <a href="https://www.w3.org/TR/wai-aria-1.2/#tooltip">ARIA 1.2</a>.</p>
<h3>Related GitHub issues</h3>
<ul>
<li><a href="https://github.com/w3c/aria-practices/issues/1034">Tooltip pattern should allow for aria-labelledby</a></li>
<li><a href="https://github.com/w3c/aria/issues/979">Clarify the use of role=tooltip</a></li>
</ul>
</section>
<p class="note">Note: the default position of this tooltip is set to be above the control. This is changed via the <code>data-tooltip-position</code> attribute on the <code><div></code> with the <code>tooltip-container</code> class.</p>
<h3>Source</h3>
<pre><code><div class="tooltip-container" data-tooltip-position="top">
<button type="button" aria-labelledby="tooltip">
<span aria-hidden="true">💛</span>
</button>
<p id="tooltip" role="tooltip" class="hidden">Like</p>
</div>
</code></pre>
<h3>Issues</h3>
<p>
Tooltips are a good way to show sighted people what a control does.
For a person that relies on the accessibility information this approach doesn’t add much.
</p>
<p>
For example, Jane (she/her), an avid user of JAWS lands on this control.
JAWS happily announces that it’s a button with the label “Like”.
<!-- JAWS also announces that there’s a tooltip. -->
Jane, eager to explore, moves into the tooltip only to find the exact same text.
This isn’t the worst experience but certainly not the best either.
</p>
<p>
In a scenario like this,
where the tooltip only adds information for sighted people,
it would make a lot more sense to <em>not</em> use the <code>tooltip</code> role.
The accessible name can still be linked with <code>aria-labelledby</code>.
</p>
<pre><code><div class="tooltip-container">
<button type="button" aria-labelledby="tooltip">
<span aria-hidden="true">💛</span>
</button>
<p id="tooltip" class="hidden">Like</p>
</div>
</code></pre>
<p>
At this point it might be worth to reconsider if ARIA is needed to set the accessible name.
After all the
<a href="https://www.w3.org/TR/aria-in-html/#rule1">first rule of ARIA</a>
is to not use it if you can do without.
An accessible name can also be provided with a visually hidden span inside the button:
</p>
<pre><code><div class="tooltip-container">
<button type="button">
<span aria-hidden="true">💛</span>
<span class="visually-hidden">Like</span>
</button>
<p id="tooltip" class="hidden">Like</p>
</div>
</code></pre>
</section>
<section>
<h2>Interaction models</h2>
<p>This design pattern supports these interaction models:</p>
<section>
<h3 id="keyboard-support">Keyboard</h3>
<ul>
<li>Tooltip is shown when focus is set on the tooltip trigger</li>
<li>Tooltip is hidden when the tooltip trigger loses focus</li>
</ul>
<p>Pressing <kbd>Escape</kbd> will close the tooltip.</p>
</section>
<section>
<h3 id="mouse-support">Mouse</h3>
<ul>
<li>Tooltip is shown when the cursor enters the tooltip trigger</li>
<li>Tooltip is hidden when the cursor leaves the tooltip trigger (except if cursor moves onto the tooltip itself)</li>
</ul>
</section>
<section>
<h3 id="touch-support">Touch</h3>
<p>Tapping anywhere outside the tooltip or button will close the tooltip.</p>
</section>
</section>
<section>
<h2 id="development-notes">Development notes</h2>
<ul>
<li>Played around with <code>pointerover</code> and related pointer events; cool but a bit overkill here.</li>
</ul>
</section>
<section>
<h2 id="test-results">Test results</h2>
<h3 id="tests-2022">Sometime in 2022</h3>
<p>Tested to work with these browsers:</p>
<ul>
<li>Chrome 98.0.4758.80 on macOS 11.6.2 and Windows 10</li>
<li>Firefox 96.0.3 on macOS 11.6.2 and Windows 10</li>
<li>Safari 15.2 on macOS 11.6.2</li>
<li>Chrome 97 on Android 9</li>
<li>Firefox 96 on Android 9</li>
<li>Safari on iOS 15.2.1</li>
</ul>
<p>Tested to work with these browser/assistive technology combinations:</p>
<ul>
<li>VoiceOver and Chrome 98.0.4758.80 on macOS 11.6.2</li>
<li>VoiceOver and Safari 15.2 on macOS 11.6.2</li>
<li>VoiceOver and Safari on iOS 15.2.1</li>
<li>JAWS 2022.2112.24 and Chrome 98.0.4758.82 on Windows 10</li>
<li>JAWS 2022.2112.24 and Firefox 96.0.3 on Windows 10<a href="#fn5">5</a></li>
<li>NVIDA 2021.3.1 and Chrome 98.0.4758.82 on Windows 10</li>
<li>NVIDA 2021.3.1 and Firefox 96.0.3 on Windows 10</li>
</ul>
<h4>Notes</h4>
<ol class="footnotes" start="5">
<li id="fn5">The description is read twice</li>
</ol>
<h3 id="tests-2019">Sometime in 2019</h3>
<p>Note: these results are from 2019. While there were no major failures in these results; it’ll be well worth running these again!</p>
<p>The ARIA bits of this work in Safari with VoiceOver on iOS. But the tooltips themselves aren’t visible before you trigger the action. This is a limitation of the design pattern.</p>
<p>Tested to work in these browsers:</p>
<ul>
<li>Chrome 71.0.3578.98 on macOS 10.14.3 / Windows 10</li>
<li>Safari 12.0.3 on macOS 10.14.3</li>
<li>Firefox 65 on macOS 10.14.3 / Windows 10</li>
<li>Edge 41.16299.820.0 / EdgeHTML 16.16299 on Windows 10</li>
</ul>
<p>Tested to work with these browser/assistive technology combinations:</p>
<ul>
<li>Safari 12.0.3 and VoiceOver on macOS 10.14.3</li>
<li>Chrome 71.0.3578.98 and VoiceOver on macOS 10.14.3</li>
<li>Chrome 71.0.3578.98 and NVDA 2018.4 on Windows 10 <a href="#fn3">3</a></li>
<li>Chrome 71.0.3578.98 and JAWS 2019 on Windows 10 <a href="#fn3">3</a></li>
<li>Edge 41.16299.820.0 / EdgeHTML 16.16299 and Narrator on Windows 10 <a href="#fn1">1</a></li>
<li>Edge 41.16299.820.0 / EdgeHTML 16.16299 and NVDA 2018.4 on Windows 10 <a href="#fn1">1</a></li>
<li>Edge 41.16299.820.0 / EdgeHTML 16.16299 and JAWS 2019 on Windows 10 <a href="#fn1">1</a> <a href="#fn4">4</a></li>
<li>Firefox 65 and NVDA 2018.4 on Windows 10 <a href="#fn2">2</a></li>
<li>Firefox 65 and JAWS 2019 on Windows 10 <a href="#fn3">3</a></li>
</ul>
<h4>Notes</h4>
<ol class="footnotes">
<li id="fn1">The settings button is announced as “gear, button”. This is most likely because Edge ignores the <code>aria-label</code> on the <code>span</code> with <code>role=img</code>. Perhaps Edge doesn’t support the <code>img</code>-role.</li>
<li id="fn2">NVDA announces the settings button as “Settings, graphic, button, view and manage settings”. There’s no delay between the announcement of the button name and its description.</li>
<li id="fn3">There’s no delay between the announcement of the button name and its description.</li>
<li id="fn4">The description isn’t announced.</li>
</ol>
</section>
<section>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/">Tooltips in the time of WCAG 2.1</a> by Sarah Higley</li>
<li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips and Toggletips</a> by Heydon Works</li>
<li><a href="https://w3c.github.io/aria-practices/#tooltip">ARIA APG: Tooltip design pattern</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/128">GitHub APG: Draft tooltip design pattern</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/127">GitHub APG: Draft tooltip code example</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events">MDN: Pointer events</a></li>
</ul>
</section>
<section>
<h2 id="special-thanks">Special thanks</h2>
<ul>
<li><a href="https://github.com/thezacharytaylor">Zachary Taylor</a> for the bounding box calculations</li>
</ul>
</section>
<footer>
<p>Words by Zoë</p>
</footer>
</main>
<script src="tooltips.js"></script>
</body>
</html>