-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (301 loc) · 16.4 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Website Accessibility Testing Workshop Slides for WordCamp UU 2022</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/equalize.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Website Accessibility Testing Workshop</h1>
<p class="subtitle">WordCamp U.S. 2022</p>
<p class="subtitle">Amber Hinds and Alex Stine</p>
</section>
<section>
<h2>About the Speakers</h2>
<div class="speaker-bio">
<img src="https://secure.gravatar.com/avatar/c9173fdb61f5799850739f5eaafa4b26?s=256&d=mm&r=g" alt="Amber Hinds is a white woman in her 30's with brown hair and a friendly smile.">
<h3>Amber Hinds</h3>
<p>Amber Hinds is the CEO of <a href="https://equalizedigital.com/?utm_source=WCUS22slides&umt_medium=referral">Equalize Digital, Inc.</a>, a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.</p>
</div>
<div class="speaker-bio">
<img src="https://secure.gravatar.com/avatar/220fe8025ea2d8179e1643df03fc9883?s=150&d=mm&r=g" alt="Alex Stine is a white male in his 20's.">
<h3>Alex Stine</h3>
<p>Alex Stine is a Cloud Platform Engineer at Waystar and an independent accessibility consultant. He is part of the core accessibility team, regularly contributing to WordPress accessibility, and is an organizer for WP Accessibility Day.</p>
</div>
</section>
<section>
<h2>Slides & Questions</h2>
<p>Slides can be viewed on GitHub pages. Go to EqualizeDigital.com/WCUSslides to be redirected.</p>
<p>Livestream questions: Tag @heyamberhinds #WCUSa11yTesting on Twitter</p>
</section>
<section>
<h2>Agenda</h2>
<ul>
<li>Testing process</li>
<li>Automated accessibility testing</li>
<li>Keyboard testing</li>
<li>Screen reader testing</li>
<li>Independent testing time</li>
<li>Q&A and discussion</li>
</ul>
</section>
<section>
<h2>Testing Process</h2>
<ol>
<li>Run an automated scanning tool to check for obvious accessibility problems.</li>
<li>Manually test a representative page of every type (home, archives + singles, and any pages with special features):</li>
<ul>
<li>with a keyboard only</li>
<li>with the website zoomed to at least 200% (400% is better)</li>
<li>with a screen reader</li>
</ul>
<li>Resolve all issues from scan and manual testing.</li>
<li>Bonus: bring in screen reader users or other users with disabilities for user testing to confirm accessibility.</li>
</ol>
</section>
<section>
<h2>Automated Accessibility Testing</h2>
</section>
<section>
<h3>Why start with automated scans?</h3>
<p>Speed up identification of many problems in bulk and rapidly provide a full site assessment.</p>
<p>Don’t waste auditor or user tester time identifying and reporting on problems that can be identified automatically. <span class="highlight">Saved time = saved cost.</span></p>
<p>Side note: many lawsuits list WAVE errors in complaint.</p>
</section>
<section>
<h3>Single Page Accessibility Scanners</h3>
<p>Websites or browser extensions that allow you to test one page at a time.</p>
<ul>
<li><a href="https://wave.webaim.org/">Web Accessibility Evaluation Tool (WAVE)</a> (Website or browser extension)</li>
<li><a href="https://www.deque.com/axe/">axe browser extension</a> (Chrome, Firefox, Edge)</li>
<li><a href="https://www.ibm.com/able/toolkit/tools#develop">IBM Equal Access Checker</a> (Chrome, Firefox, Karma, NPM)</li>
<li><a href="https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en">Colorblindly Chrome Extension</a></li>
<li><a href="https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en">HeadingsMap Chrome Extension</a> (also available for <a href="https://addons.mozilla.org/en-US/firefox/addon/headingsmap/">Firefox<span class="sr-only"> HeadingsMap extension</span></a>)</li>
</ul>
</section>
<section>
<h3>Bulk Accessibility Scanners</h3>
<p>Plugins or SaaS solutions that will scan your entire website at once. These provide high level overviews of problems existing sitewide and can provide historical data.</p>
<ul>
<li><a href="https://equalizedigital.com/accessibility-checker/?utm_source=WCUS22slides&utm_medium=referral">Accessibility Checker WordPress Plugin</a></li>
<li><a href="https://monsido.com/">Monsido</a></li>
<li><a href="https://pope.tech/">PopeTech</a></li>
<li><a href="https://www.siteimprove.com/">Siteimprove</a></li>
</ul>
</section>
<section>
<h3>Limitations of Automated Scanners</h3>
<p>Automated testing tools only catch 30-50% of issues (depending upon who you ask).</p>
<p>Many accessibility problems require human judgement - either to find the problem in the first place or to assess the issue and decide on a proper solution.</p>
<p><span class="highlight">Don't rely on automated testing tools alone.</span> Manual testing is required to achieve true accessibility.</p>
</section>
<section>
<h2>Web Content Accessibility Guidelines (WCAG)</h2>
<ul>
<li>Measurable criteria you can use to assess the accessibility of websites, software, or documents.</li>
<li>Generally you want to meet <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> AA as a minimum standard, but try for AAA where possible.</li>
<li><a href="https://equalizedigital.com/WCAGquickref">WCAG Quick Reference (Google Sheet)</a></li>
<li>WCAG conformance is helpful, but utimately it's about usability.</li>
</ul>
</section>
<section>
<h2>Keyboard Testing</h2>
</section>
<section>
<h3>Why Keyboard Test Before Screen Reader Testing</h3>
<p>Not all keyboard-only users are screen reader users. People who are sighted but have mobility challenges (limb diferences, severe arthritus, paraplegia, etc.) may use only a keyboard to navigate the web.</p>
<p>Screen readers add accessibility features (such as focus outlines) you may not realize are missing if you only test with a screen reader.</p>
<p>Keyboard-only testing allows you to focus on functionality, then you can screen reader test and focus on what you hear and how things are announced.</p>
</section>
<section>
<h3>How to Keyboard Test</h3>
<p>Open a Chrome or Firefox browser. Using the tab key and arrow keys to move through the website. Press return to follow links. Use the return key or space bar to trigger buttons.</p>
<p>Do everything that you would want website users to do: engage with sliders or carousels, add products to carts and check out, fillout and submit forms, etc.</p>
<p>If you run into a problem, inspecting the code can help to pinpoint the problem.</p>
</section>
<section>
<h3>What We're Looking For: Focus</h3>
<ul>
<li>An obvious focus outline is present on all focusable elements (2px, with an offset and sufficient color contrast).</li>
<li>Focus order follows the order of the page (left to right, top to bottom).</li>
<li>Hidden elements are not focusable.</li>
<li>Jump or anchor links shift keyboard focus in addition to scrolling.</li>
<li>Popups receive focus when opened and cannot be tabbed out of without closing it with a button.</li>
</section>
<section>
<h3>Pro Tips for Tracking Focus</h3>
<section>
<h4>If there isn't a focus outline at all:</h4>
<ol>
<li>Check styles in the inspector for CSS disabling the outline and uncheck the box so that code is ignored by your browser.<br>
<img src="https://equalizedigital.com/wp-content/uploads/2022/08/css-blocking-focus-outline.png" alt="Chrome dev tools screenshot showing CSS styles for various elements with :focus selectors and outline: none !important;" width="500px" height="auto">
</li>
<li>Add your own styles to the inspector stylesheet.<br>
<pre><code>:focus {
outline: 2px solid;
outline-offset: 2px;
outline-color: -webkit-focus-ring-color;
}
</code></pre>
</li>
</ol>
</section>
<section>
<h4>If hidden elements get focus:</h4>
<ol>
<li>Open the console in dev tools.</li>
<li>Click the Create Live Expression button. <img src="https://wd.imgix.net/image/admin/IPDgkbaWTrf05ffw1JSt.png?auto=format&w=50" alt="eye icon used by Chrome dev tools to open the live expression toolbar." style="margin: 0;"></li>
<li>Type <code>document.activeElement</code></li>
<li>Click outside of the Live Expression UI to save.</li>
</ol>
<img src="https://equalizedigital.com/wp-content/uploads/2022/08/live-expression-showing-focused-element-in-chrome-dev-tools.png" alt="Chrome dev console showing the focused elememt under a heading of document.activeElement" width="600px" height="auto">
</section>
</section>
<section>
<h3>What We're Looking For: Usability</h3>
<ul>
<li>No Functionality requires a mouse and everything can be reached with a keyboard only.</li>
<li>Skip links exist and jump to the correct section on the page.</li>
<li>Links in body content are underlined/don't rely on color alone.</li>
<li>Any content that autoplays for more than 5 seconds has a pause button.</li>
<li>Form fields have visible labels with an obvious required indicator (“required” is better than *).</li>
<li>No changes of content or context without warning or user action.</li>
</ul>
</section>
<section>
<h3>What We're Looking For: Content</h3>
<ul>
<li>Only links are underlined - no underlines for emphasis.</li>
<li>If the language of a section changes the new language is declared with an <a href="https://www.w3schools.com/tags/att_global_lang.asp">HTML lang attribute</a></li>
<li>Videos have accurate captions.</li>
<li>Videos and audio files have a transcript immediately after the media.</li>
<li>Nothing is written in all caps.</li>
<li>Manually check color contrast, especially for text over images.</li>
<li>No images are added of text.</li>
</ul>
</section>
<section>
<h3>Popup Accessibility</h3>
<ul>
<li>Do you really need a popup?</li>
<li>Avoid popups that open based on some condition other than a user triggered condition such as a button click/selection. Changes in context with no warning can be confusing.</li>
<li>When popup opens, focus is shifted to the open popup and screen readers announce that a popup has opened.</li>
<li>Popup contains a heading and accessible content.</li>
<li>Focus when hitting the tab key is locked so user cannot leave the popup without closing it.</li>
<li>Close button is appropriately labeled and works with keyboard only. Escape should also close the popup.</li>
<li>When popup is closed user’s focus returns to where they were on the page when it opened.</li>
</ul>
</section>
<section>
<h3>Keyboard Testing Demo</h3>
<p>Demo time! Follow along as Amber keyboard tests two websites.</p>
</section>
<section>
<h2>Screen Reader Testing</h2>
</section>
<section>
<h3>Recommended Screen Readers</h3>
<ul>
<li>Windows: <a href="https://www.nvaccess.org/download/">NVDA</a></li>
<li>Mac: <a href="https://www.apple.com/voiceover/info/guide/_1121.html">VoiceOver</a></li>
<li>Different screen readers have different effects in different browsers and different operating systems (<a href="https://github.com/WordPress/gutenberg/pull/42653">example bug in Firefox only</a>). Must test with multiple.</li>
</ul>
</section>
<section>
<h3>Getting Started with a Screen Reader</h3>
<ul>
<li><a href="https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts">NVDA keyboard shortcuts</a></li>
<li><a href="https://www.apple.com/voiceover/info/guide/_1131.html">VoiceOver keyboard shortcuts</a></li>
<li>Use the tab and arrow keys to move through elements.</li>
<li>To make a screen reader stop reading hit CTRL in NVDA or Caps Lock in VoiceOver.</li>
<li>Turn on speech viewer in NVDA: Preferences > Tools > Speech Viewer</li>
</ul>
</section>
<section>
<h3>What to Listen For</h3>
<ul>
<li>Link anchor text is meaningful without surrounding content.</li>
<li>Image alternative text accurately describes the purpose of the image on the page.</li>
<li>There are no empty links or unlabeled buttons.</li>
<li>Form error and success messages are announced by the screen reader.</li>
<li>If you don't hear labels for expected icons like search, mobile nav menus, etc.</li>
</ul>
</section>
<section>
<h3>Screen Reader Testing Demo</h3>
<p>Demo time! Follow along as Alex shows screen reader testing with NVDA.</p>
</section>
<section>
<h2>Independent Testing Time</h2>
<p>15 minutes for testing your own website.</p>
<p>Take note of things that surprised you and things you're not sure about for Q&A and discussion.</p>
</section>
<section>
<h2>User Testing</h2>
<p>Including people with disibilities in your testing process is highly recommended.</p>
<p>Users test differently than you do as the website builder or owner. Typically they test specific functionality or user journeys.</p>
<p>Users testing will also alert you to broader UX issues.</p>
</section>
<section>
<h3>Where to find users for user testing</h3>
<ul>
<li>For-profit companies or consultants</li>
<li>Nonprofit organizations</li>
<ul>
<li><a href="https://knowbility.org/">Knowbility</a></li>
<li><a href="https://carroll.org/">Carrol Center for the Blind</a></li>
</ul>
<li>Schools or group homes for people with disabilities.</li>
<li>Ask your customers - you may already have someone in your network.</li>
<li>Go beyond screen reader users. Include people who have mobility challenges or cognitive impairments.</li>
</ul>
</section>
<section>
<h2>Q&A and Discussion</h2>
</section>
<section>
<h2>Keep Learning</h2>
<h3><a href="https://equalizedigital.com/wordpress-accessibility-meetup/?utm_source=WCUS22slides&utm_medium=referral">WordPress Accessibility Meetup</a></h3>
<p>Meets twice per month on the first Thursday at 10 AM central and third Monday at 7 PM central via Zoom. All meetups are live captioned and pre-approved for continuning ed credits with the IAAP.</p>
<h3><a href="https://wpaccessibility.day/?utm_source=WCUS22slides&utm_medium=referral">WordPress Accessibility Day</a></h3>
<p>Free 24 hour conference November 2-3 held via Zoom. Live captioned and sign language interpretation.</p>
</section>
<section>
<h2>Contact Us</h2>
<h3>Amber Hinds</h3>
<ul style="margin-bottom: 40px;">
<li><a href="https://equalizedigital.com/?utm_source=WCUS22slides&utm_medium=referral">EqualizeDigital.com</a></li>
<li><a href="https://twitter.com/heyamberhinds">@HeyAmberHinds on Twitter</a></li>
<li><a href="https://www.facebook.com/groups/wordpress.accessibility">Q&A in the WordPress Accessibility Facebook group</a></li>
</ul>
<h3>Alex Stine</h3>
<ul>
<li><a href="https://www.linkedin.com/in/alexleestine303/">Connect with Alex on LinkedIn</a></li>
</ul>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>