-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·277 lines (269 loc) · 10.6 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
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>A Smarter Way to Test Accessibility</title>
<link rel="stylesheet" href="lib/css/font-awesome.min.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/myplanet.css">
<link rel="stylesheet" href="css/presentation.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/highlight-github.css">
<link rel="icon" href="lib/myplanet/logo/radiant-orange/mark-knockout.svg"/>
<meta property="og:url" content="https://laura-johnson.github.io/accessibility-presentation/" />
<meta property="og:title" content="A Smarter Way to Test Accessibility" />
<script src="js/reveal-print.js"></script>
</head>
<body>
<div class="reveal pattern--molecules">
<div class="slides">
<section class="title" id="title">
<div class="grid-wrapper">
<div class="header">
<div class="logo logo--full"><span class="visually-hidden">Myplanet</span></div>
</div>
<div class="content">
<h1>A Smarter Way to Test Accessibility</h1>
<h2>A Comparison of Top Tools (Lighthouse, Tenon.io and WAVE API)</h2>
<h3>DrupalCon Nashville 2018</h3>
</div>
<div class="credit">
<hr>
<div class="label">Presented By</div>
<div class="name">Everett Zufelt & Laura Johnson</div>
</div>
<a class="presentation-url" href="https://laura-johnson.github.io/accessibility-presentation">https://laura-johnson.github.io/accessibility-presentation</a>
</div>
</section>
<!-- Team page can accommodate one or two profiles. -->
<section class="team" id="team">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
<div class="section">Team</div>
</div>
<div class="content">
<div class="profile">
<div class="basics">
<img src="images/everett-2.jpg" alt="Everett Zufelt">
<div class="name">Everett Zufelt</div>
<div class="role">Director of Technology at Myplanet</div>
</div>
<div class="details">
<h2>Profile</h2>
<p>Everett Zufelt is Director of Technology at Myplanet. He works with enterprise customers to provide solutions that Grow engagement, drive conversions and maximize awareness. Everett believes that growing relationships is essential to building great digital products. He coaches and leads product development teams, who work with a variety of web and mobile technologies, to assist them with building the skills that enable them to deliver the right thing, fast.</p>
<p class="supplement">Everett holds PMI's Agile Certified Practitioner, Scrum Alliance's Certified ScrumMaster, and Acquia's Acquia Certified Grand Master 2015 certifications.</p>
</div>
</div>
<div class="profile">
<div class="basics">
<img src="images/laura.jpg" alt="Laura Johnson">
<div class="name">Laura Johnson</div>
<div class="role">Software Developer at Myplanet</div>
</div>
<div class="details">
<h2>Profile</h2>
<p>Laura Johnson is a Software Developer at Myplanet as well as liaison and event coordinator for the DrupalTO community. She has been a Drupal developer, contributor and mentor for over 10 years. Laura believes that the internet is an immensely important resource for people regardless of hardware, software, language, location, or ability, which is why she champions accessibility in all web development.</p>
<p class="supplement">Laura and Everett will also be presenting at the Guelph Accessibility Conference at the University of Guelph on May 30th.</p>
</div>
</div>
</div>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Topics</h1>
<div class="description">
<ol>
<li>Automated vs Manual Web accessibility testing</li>
<li>3 tools in a nutshell</li>
<li>Browser extensions make testing easy</li>
<li>Command line interfaces speed up local testing</li>
<li>Continuous integration testing improves reliability</li>
<li>Applying machine learning to accessibility testing</li>
</ol>
</div>
</div>
</section>
<section class="quote">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<blockquote>
<p>Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these.</p>
<cite>Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/TR/WCAG21/</cite>
</blockquote>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Automated vs Manual Web Accessibility Testing</h1>
<div class="description">
<ol>
<li>Does the image have alt text; is the alt text accurate given the context</li>
<li>Does the form field have a label and description; is the description easy to understand</li>
<li>Does the content have headings; do the headings represent the correct hierarchy</li>
<li>Is the HTML valid; is the HTMl semantic</li>
<li>(Custom implementation); does the application UI behave as expected</li>
</ol>
</div>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<div class="tool">
<h1>The tools</h1>
<table>
<tr><th><p>Lighthouse</p></th><td><img src="images/lighthouse.png" alt="Lighthouse logo"></td></tr>
<tr><th><p>Tenon.io</p></th><td><img src="images/tenon-logo.png" alt="tenon.io logo"></td></tr>
<tr><th><p>WAVE API</p></th><td class="wave"><img src="images/wavelogo.png" alt="WAVE API logo"></td></tr>
</table>
</div>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Browser extensions make testing easy</h1>
<ul>
<h2>Pros</h2>
<li>free</li>
<li>easy to use</li>
<li>reveal issues with invisible elements</li>
<li>catch issues you didn't know were issues</li>
</ul>
<ul>
<h2>Cons</h2>
<li>you have to remember to use them</li>
<li>somewhat time consuming to look at report</li>
<li>can only test a single URL at a time</li>
</ul>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Command line interfaces speed up local testing</h1>
<ul>
<h2>Pros</h2>
<li>alert you to issues instantly</li>
<li>they don't forget to test when you are in a rush</li>
<li>catch issues before they go live</li>
</ul>
<ul>
<h2>Cons</h2>
<li>not all are free</li>
<li>some configuration required</li>
<li>can only test a single URL at a time, must be set manually</li>
</ul>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Continuous integration improves reliability</h1>
<ul>
<li>can alert you to issues before they go to production</li>
<li>headless browser testing is possible</li>
<li>catch issues before they go live</li>
<li>not free</li>
<li>configuration required</li>
<li>can handle more than one URL at a time</li>
<li>can spider a website</li>
<li>can provide comprehensive reporting and history</li>
</ul>
</div>
</section>
<section class="quote">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<blockquote>
<p>
When's the last time you were looking through the pictures on your phone and said to yourself "I love this picture of 'Two adults standing with a dog in a nature landscape"?
</p>
</blockquote>
</div>
</section>
<section class="subsection">
<div class="grid-wrapper">
<div class="header">
<div class="logo"></div>
</div>
<h1>Applying Machine Learning to Accessibility Testing</h1>
<div class="machine">
<p>Machine learning may someday enable automated tools to detect and remediate many more barriers. Machine learning tools could potentially:</p>
<ol>
<li>Identify and provide alternate mediums for images, sounds and videos</li>
<li>Identify and convey accurate meaning from media - "Two adults standing with a dog in a nature landscape"</li>
<li>Identify and resolve barriers to interacting with user interfaces, typically inferred through affordances</li>
<li>Simplify content and interfaces, sharing synthesis in a clear, easily discoverable, non-intrusive way</li>
</ol>
</div>
</div>
</section>
<section id="nashville-sprints">
<div class="grid-wrapper">
<div>
<h1>Join us for contribution sprints</h1>
<h2>Friday, April 13, 2018</h2>
</div>
<div class="sprint-times">
<div>
<h2>Mentored <br class="only-landscape"/>Core Sprint</h2>
9:00 - 18:00<br/>
Room: 103
</div>
<div>
<h2>First time <br class="only-landscape"/>sprinter workshop</h2>
9:00 - 12:00<br/>
Room: 101
</div>
<div>
<h2>General <br class="only-landscape"/>Sprint</h2>
9:00 - 18:00<br/>
Room: 104
</div>
</div>
<h1>#drupalsprint</h1>
</div>
</section>
<section id="nashville-feedback">
<div class="grid-wrapper">
<h1>What did you think?</h1>
<div>
<h2>Locate this session at the DrupalCon Nashville Website:</h2>
<a href="https://nashville2018.drupal.org/schedule">https://nashville2018.drupal.org/schedule</a>
<h2>Take the Survey!</h2>
<a href="https://www.surveymonkey.com/r/DrupalConNashville">https://www.surveymonkey.com/r/DrupalConNashville</a>
</div>
<img src="images/nashville-thankyou.png"/>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="js/reveal-init.js"></script>
</body>
</html>