forked from girldevelopit/gdi-featured-accessibility
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathclassslides.html
354 lines (302 loc) · 18.1 KB
/
classslides.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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Accessibility | Girl Develop It</title>
<meta name="description" content="This is the Girl Develop It Web Accessibility curriculum. It was developed by Sylvia Richardson.
This course is meant to be taught as a single two-hour workshop. The primary slides are designed for maximum presentability--one picture, one sentence. The vertical slides contain speaker notes, to make the slides more useful as a shared resource.
Each of the slides is customizable according to the needs of a given class or audience. The GitHub repository contains an Instructor Guide, with further information about the course.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal/css/reveal.min.css">
<link rel="stylesheet" href="reveal/css/theme/default.css" id="theme">
<link rel="stylesheet" href="css/accesscustom.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="reveal/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Opening slides -->
<section>
<img src = "img/gdi_logo_badge.png" alt="gdi logo" >
<h2>Web Accessibility Workshop</h2>
<h3 class='white'>LeeAnn Kinney</h3>
<h3 class='white'>@_leekinney</h3>
</section>
<!-- Welcome-->
<section>
<h2>Welcome!</h2>
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p>Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</section>
<section>
<h2>Introductions</h2>
<p class = "blue">Tell us about yourself.</p>
<ul>
<li>Who are you?</li>
<li>What do you hope to get out of the class?</li>
<li>What is your favorite 80's song?</li>
</ul>
</section>
<!-- Intro: What is Accessibility?-->
<section>
<h2>Who can use your sites?</h2>
<img src="img/no-access.jpg" alt="'No Access' sign at bottom of steps" height='400' width='500'/>
<p class="credit">Photo credit: <a href="https://www.flickr.com/photos/lukasbenc/3493808772/in/photolist-6jJFCh-o5EjeX-nyLkK8-5TP4ZY-n2vFUw-3E8zX5-4qn3r-8zU3u4-8sMyyC-91TW5H-5zTAT7-8j5X9R-eTcmLx-jvuM1R-meQ4x-CHPEZ-aqtyvx-Lixfi-gzUou-CAGQZ-5BaxQm-NAYxB-8sMyCb-86yZ1v-4iMUYy-eVRsmw-d4v8BL-6Hsp6V-8gjT8s-8yt9Yq-RrQUy-8ggBce-84XzjW-8XqqCY-2jmuya-6iREnV-fvGqz-jLKD2L-LixfP-6mXRH9-8eH8q4-hME28-6sfVL7-5rf8rP-GqDW3-mNrCQT-iRCbfb-frvygs-a33Bws-8Dq4zK" target="_blank">Lukas Benc</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>What is accessibility?</h2>
<ul>
<li>Accessibility is about making your sites useful to as many people as possible.</li>
<li>Accessibility is about overcoming barriers.</li>
<li>Accessibility is about helping your users.</li>
</ul>
<p class="visuallyhidden"><a href="#toc">Return to Table of Contents</a></p>
</section>
<section>
<h2>Why worry?</h2>
<img src="img/why.jpg" alt="Why?"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/emagic/56206868/" target="_blank">e-magic</a> <a href="http://creativecommons.org/licenses/by-nd/2.0/" target="_blank">cc</a></p>
</section>
<!-- <section>
<img src="img/accessdogs.jpg" alt="Dogs outside door, captioned 'We R UR community, beggin fer access'"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/circulating/997909242/" target="_blank">circulating</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target="_blank">cc</a></p>
</section> -->
<section>
<h2>Why make your sites accessible?</h2>
<ul>
<li class="fragment">Expand your potential audience! 54 million people in the US have a disability, 1.8 million are unable to see printed words, and 16.1 million have a cognitive or mental illness that impedes daily functioning (<a href="http://www.census.gov/newsroom/releases/archives/facts_for_features_special_editions/cb10-ff13.html" target="_blank">source</a>).</li>
<li class="fragment">Be in compliance with legal guidelines, like Section 504 and 508 compliance.</li>
<li class="fragment">Avoid <a href="http://accessibletech.org/access_articles/legal/courtCases.php" target ="_blank">potential lawsuits.</a></li>
<li class="fragment">Do the right thing.</li>
</ul>
</section>
<section>
<h2>Accessibility is for everyone!</h2>
<img src="img/curbcut.jpg" alt="Curb cut on sidewalk"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/firelizard5/8479806007/">Sylvia Richardson</a> <a href="http://creativecommons.org/licenses/by/2.0/">cc</a></p>
</section>
<section>
<h2>Benefits of Accessibility</h2>
<ul>
<li>Curb cuts were designed for wheelchairs, but others use them. Similarly, accessibility features end up helping everyone.</li>
<li>Many times, good design practices create accessibility as a side effect.</li>
<li>Accessibility features, like good alt text, can improve your search engine placement.</li>
</ul>
</section>
<section>
<h2>What are barriers to access?</h2>
<img src="img/barrier.jpg" alt="Traffic barriers"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/apoptotic/4299922931/" target ="_blank">sciencesque</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target = "_blank">cc</a></p>
</section>
<section>
<h2>Types of Disability</h2>
<ul>
<li class="fragment">Visual disabilities: blind or low-sight, color blind</li>
<li class="fragment">Hearing disabilities: deaf or hard-of-hearing</li>
<li class="fragment">Physical disabilities: MS, paraplegic/quadriplegic, epilepsy</li>
<li class="fragment">Cognitive disabilities: dyslexia, low literacy, learning disabilities</li>
<li class="fragment">Seizures: prone to photoepileptic seizures</li>
<li class="fragment"><a href="https://the-pastry-box-project.net/anne-gibson/2014-July-31">An Alphabet of Accessibility Issues</a></li>
</ul>
</section>
<!-- How To-->
<section>
<h2>Accessibility is a continuum, not a checkbox</h2>
<img src="img/checkmark.jpg" alt="Checkmark with word 'chk' on blackboard"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/mattcarman/1573507091/" target ="_blank">Matt Carman</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc</a></p>
</section>
<!-- Working with Screen readers-->
<section>
<h2>Visual disabilities</h2>
<img src="img/canes.jpg" alt="Blind pedestrians with white canes"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/brailleinstitute/5169573221/" target ="_blank">Braille Institute</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc</a></p>
</section>
<section>
<h2>Let's try it</h2>
<p><a href="http://webaim.org/simulations/screenreader-sim.htm" target ="_blank">Screenreader simulation</a></p>
<p>http://bit.ly/p3JmJ2</p>
</section>
<section>
<h2>Provide an alternate path</h2>
<img src="img/anotherpath.jpg" alt="Signs pointing to handicap-accessible routes"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/lng0004/7093675431/" target ="_blank">Linh H. Nguyen</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc</a></p>
</section>
<section>
<h2>Alt text</h2>
<ul>
<li class="fragment">Alternate text describes pictorial content in words.</li>
<li class="fragment">Pay attention to context.</li>
<li class="fragment">Describe the <em>function</em>, not the content.</li>
<li class="fragment">If an image is purely decorative, use "" to instruct a screen reader to skip it.</li>
<li class="fragment">Instead of using "longdesc," provide a caption or link.</li>
</ul>
<pre><code data-trim>
<p><img src="location" alt="brief description"></p>
</code></pre>
</section>
<section>
<h2>Other tips for screen readers</h2>
<ul>
<li class="fragment">Tables can be hard to navigate, especially if you use merged cells.</li>
<li class="fragment">If you are going to use image maps, make them client-side maps, with alt text on each link. (<a href="http://www.jimthatcher.com/webcourse5.htm" target="_blank">More on image maps</a>.)</li>
<li class="fragment">Yes, you still have to use skipnav links.</li>
<li class="fragment">Many users are switching to touch-screen based readers like <a href="http://www.apple.com/accessibility/iphone/vision.html" target="_blank">VoiceOver</a>.</li>
</ul>
</section>
<!-- Other visual disabilities-->
<section>
<h2>Use color wisely</h2>
<img src="img/colorwheel.jpg" alt="Colorwheel of crayons"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/guzzphoto/8443150658/" target="_blank">guzzphoto</a> <a href="http://creativecommons.org/licenses/by-nd/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Provide contrast</h2>
<img src="img/contrast.jpg" alt="Crosswalk with contrasting colors"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/antifluor/2074560932/" target="_blank">antifluor</a> <a href="http://creativecommons.org/licenses/by/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Links!</h2>
<ul>
<li class="fragment">Link text should make sense.</li>
<li class="fragment">Make sure the user can tell where it's going to take them.</li>
<li class="fragment"><!-- <pre><code data-trim><p><target="_blank"></p></code></pre> -->Don't open links in a new window (unless you let the user know first).</li>
<li class="fragment">Use :focus wisely.</li>
<li class="fragment">Don't rely on color to signify a link.</li>
</ul>
</section>
<!-- <section>
<h2>Be flexible</h2>
<img src="img/flexible.jpg" alt="Person doing a backbend"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/dollen/5979760760/" target="_blank">dollen</a> <a href="http://creativecommons.org/licenses/by-nd/2.0/" target="_blank">cc</a></p>
</section> -->
<section>
<h2>Other visual disabilities</h2>
<ul>
<li class="fragment">If you use color to indicate something, also use another indicator. For example, underline links on hover or mark a required field with an asterisk.</li>
<li class="fragment">Red/green color blindness is the most common, so avoid green on red.</li>
<li class="fragment">Have a <em>minimum</em> of contrast ratio of 4.5:1 for normal text and 3:1 for large text. (<a href="http://webaim.org/resources/contrastchecker/" target="_blank">Checker</a>)</li>
<li class="fragment">Try zooming in your your designs, to see how they look when enlarged. It is a good idea to use ems instead of pixels when you can.</li>
</ul>
</section>
<!-- Hearing disabilities-->
<section>
<h2>Provide good captions</h2>
<img src="img/in_ur_reality.png" alt="Stick figure attaching captions to cats. Dialog- Man: Oh hi; I'm here from the internet; Man 2: What are you doing!?; Man: Gluing captions to your cats."/>
<p class="credit">Credit: <a href="http://xkcd.com/262/" target="_blank">Randall Munroe</a> <a href="http://creativecommons.org/licenses/by-nc/2.5/" target="_blank">cc</a></p>
</section>
<section>
<h2>Dealing with Hearing Disabilities</h2>
<ul>
<li class="fragment">Most deaf or hard-of-hearing people have limited difficulty with web accessibility.</li>
<li class="fragment">Provide captions or transcripts for multimedia elements.</li>
<li class="fragment">Don't rely on sounds to convey information, like an "alert" noise. Even hearing users often have their computers muted.</li>
<li class="fragment">Be especially careful if your site targets older users, as hearing loss is common.</li>
</ul>
</section>
<!-- Physical disabilities-->
<section>
<h2>Mice are Scary</h2>
<img src="img/stormtroopermouse.jpg" alt="Two stormtrooper figurines jumping away from a plastic mouse"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/st3f4n/4286044406/" target="_blank">Stéfan</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Dealing with Physical Disabilities</h2>
<ul>
<li class="fragment">Many users with limited mobility interact with the screen via keyboard.</li>
<li class="fragment">Other users use a mouse, but have trouble with fine motor control.</li>
<li class="fragment">Make clickable elements large, and put space between them.</li>
<li class="fragment">Avoid clickable page elements that move.</li>
<li v>Animations with rapid flickers are not only annoying, they can trigger epileptic seizures.</li>
<li class="fragment">These guidelines also help children and touchscreen users!</li>
</ul>
</section>
<!-- Cognitive disabilities-->
<section>
<h2>Don't overwhelm</h2>
<img src="img/toomanysigns.jpg" alt="Sign post with multiple signs"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/thomashawk/2402598275/" target="_blank">Thomas Hawk</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Provide plenty of time</h2>
<img src="img/clock.jpg" alt="Alarm clock"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/beth19/4721798240/" target="_blank">Bethan</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>CAPTCHAs don't just catch robots</h2>
<img src="img/confusedrobot.jpg" alt="Confused robot"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/baboon/3946055/" target="_blank">baboon</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Dealing with cognitive disabilities</h2>
<ul>
<li class="fragment">Unfortunately, there is not a lot of research in this area.</li>
<li class="fragment">Minimize cognitive load--don't overwhelm the user.</li>
<li class="fragment">Use common icons to mark important tasks.</li>
<li class="fragment">If you have timed content (forms, image galleries, etc.) allow users to control extend time.</li>
<li class="fragment">CAPTCHAs aren't blind-friendly, are very difficult for users with learning disabilities like dyslexia, and annoy everyone. Consider <a href="http://webaim.org/blog/spam_free_accessible_forms/" target="_blank">an alternative method</a>.</li>
</ul>
<img src="img/captcha.png" alt="Screenshot of a Captcha"/>
</section>
<!-- Final slides-->
<section>
<h2>Show your users some love!</h2>
<img src="img/handicappedlove.jpg" alt="Disabled parking symbol with a heart"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/samfelder/115576714/" target="_blank">Sam Felder</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h2>Resources</h2>
<ul>
<li class="fragment"><a href="http://wave.webaim.org/toolbar/" target="_blank">WAVE toolbar</a>, a firefox extension that does in-browser checks.</li>
<li class="fragment"><a href="http://www.nvda-project.org/" target="_blank">NonVisual Desktop Access (NVDA)</a>,a free and open source screen reader for Windows.</li>
<li class="fragment"><a href="http://www.w3.org/WAI/" target="_blank">W3C Web Accessibility Initiative (WAI).</a></li>
<li class="fragment"><a href="http://webaim.org/" target="_blank">WebAIM</a>, an accessibility-focused organization with great information.</li>
</ul>
</section>
</div><!-- end slides -->
<!-- <footer>
<div class="copyright">
Web Accessibility ~ Girl Develop It ~
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer> -->
</div><!-- end reveal -->
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/socket.io.js', async: true },
{ src: 'plugin/notes-server/client.js', async: true }
]
});
</script>
</body>
</html>