forked from Roenok/girldevelopit-rdu-access
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
385 lines (352 loc) · 19.7 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
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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!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.css">
<link rel="stylesheet" href="reveal/css/theme/gdilight.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css">
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Opening Screen -->
<section>
<img src = "img/gdi_logo_badge.png" alt="gdi logo">
<h1 id="slide1">Web Accessibility</h1>
</section>
<!-- Welcome-->
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class ="green">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>
</div>
</section>
<section>
<h3>Meet Your Instructor</h3>
<h4>Aisha Blake</h4>
<div class="left" style="width: 75%; font-size: 70%; line-height: 1.2em;">
<ul>
<li style="margin-bottom: 10px;">Graduated in May of 2013 from Fordham University with a B.S. in Information Science.</li>
<li style="margin-bottom: 10px;">Served one year as a Jesuit Volunteer at Detroit Cristo Rey High School.
<li style="margin-bottom: 10px;">Taught web design and robotics as a <a href="https://www.mcwt.org/GET-IT_Program_184.html">GET-IT</a> advisor.</li>
<li>A very dedicated dog person.</li>
<li style="margin-bottom: 10px;">Twitter: <a href="http://www.twitter.com/AishaBlake">@AishaBlake</a></li>
<li style="margin-bottom: 10px;">E-mail: <a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div class="right" style="width:25%">
<img src="img/avatar.jpg"/>
</div>
</section>
<section>
<h3>Introductions</h3>
<div class = "left-align">
<p class = "blue">Tell us about yourself.</p>
<ul>
<li>Tell us a little about yourself.</li>
<li>What do you hope to get out of the class?</li>
<li>What's your go-to karaoke song? <span class="green">(Bonus points if you sing a few lines!)</span></li>
</ul>
</div>
</section>
<!-- Intro: What is Accessibility?-->
<section>
<section>
<h3>Who can use your sites?</h3>
<img src="img/noaccess.jpg" alt="'No Access' sign on fence"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/bobthelomond/1043205025/" target="_blank">bob the lomond</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h3>What is accessibility?</h3>
<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>
</section>
</section>
<section>
<section>
<h3>Why worry?</h3>
<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>
<h3>Why make your sites accessible?</h3>
<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">Internet access is so much a part of our daily interaction with the world.</li>
<li class="fragment">Be in compliance with legal guidelines, like Section 504 and <a href="http://www.section508.gov">508</a>.</li>
<li class="fragment">Avoid <a href="http://accessibletech.org/access_articles/legal/courtCases.php" target ="_blank">potential lawsuits.</a></li>
</ul>
</section>
</section>
<section>
<section>
<h3>Accessibility is for everyone!</h3>
<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>
<h3>Benefits of Accessibility</h3>
<ul>
<li>Curb cuts were designed for wheelchairs, but others use them. Similarly, accessibility features end up helping everyone.</li>
<li>Many times, designing for accessibilty will lead to clear, semantic code. Another win-win!</li>
<li>Accessibility features, like good alt text, can improve your search engine placement.</li>
</ul>
</section>
</section>
<section>
<section>
<h3>What are barriers to access?</h3>
<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>
<h3>Types of Disability</h3>
<ul>
<li class="fragment">Visual disabilities: blind or low-vision, color blind, tunnel vision</li>
<li class="fragment">Hearing disabilities: deaf or hard-of-hearing</li>
<li class="fragment">Physical disabilities: MS, paraplegic/quadriplegic, epilepsy, tremors</li>
<li class="fragment">Cognitive disabilities: dyslexia, low literacy, learning disabilities</li>
</ul>
</section>
</section>
<!-- How To-->
<!-- Working with Screen readers-->
<section>
<section>
<h3>Visual disabilities</h3>
<img src="img/goal.jpg" alt="three goalball players with the ball"/>
<p class="credit">Photo credit: <a href="http://www.aishablake.com" target ="_blank">Aisha Blake</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc</a></p>
</section>
<section>
<h3>Let's try it</h3>
<ul>
<li class="fragment">Access the Web Developer Toolbar</li>
<li class="fragment">Navigate to your favorite website</li>
<li class="fragment">Hide images and styles</li>
<li class="fragment">Does the content still make sense?</li>
<li class="fragment">How could it be improved?</li>
</ul>
</section>
</section>
<section>
<section>
<h3>Provide an alternate path</h3>
<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>
<h3>Alt text</h3>
<ul>
<li class="fragment">Image tags require the "alt" attribute to validate.</li>
<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>
<p><img src="location" alt="brief description"></p>
</code></pre>
</section>
<section>
<h3>Other tips for screen readers</h3>
<ul>
<li class="fragment">Tables can be hard to navigate, especially if you use merged cells. Use them for tabular data ONLY.</li>
<li class="fragment">Use skipnav links so users don't have to listen to the same navgation links over and over again.</li>
<li class="fragment">Keep in mind that 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>
</section>
<!-- Other visual disabilities-->
<section>
<section>
<h3>Use color wisely</h3>
<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>
<h3>Provide contrast</h3>
<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>
<h3>Provide good captions</h3>
<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>
<h3>Other visual disabilities</h3>
<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> 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 on your designs to see how they look when enlarged. It is a good idea to use ems instead of pixels when you can.</li>
<li class="fragment">You can use <a href="http://www.spurapp.com/">Spur</a> to check your web pages' accessibility.</li>
</ul>
</section>
</section>
<!-- Hearing disabilities-->
<section>
<section>
<h3>Dealing with Hearing Disabilities</h3>
<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>
<section>
<h3>Did you know...?</h2>
<ul>
<li class="fragment">You can <a href="https://support.google.com/youtube/answer/2734796?hl=en">add subtitles and captions</a> to your YouTube videos.</li>
<li class="fragment">YouTube also offers automatic transcription.</li>
<li class="fragment">It's important to set default audio levels to appropriate and consistent values throughout your site.</li>
</ul>
</section>
</section>
<!-- Physical disabilities-->
<section>
<section>
<h3>Mice are Scary</h3>
<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>
<h3>Dealing with Physical Disabilities</h3>
<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 class="fragment">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>
</section>
<!-- Cognitive disabilities-->
<section>
<section>
<h3>Don't overwhelm</h3>
<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>
<h3>Provide plenty of time</h3>
<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>
<h3>CAPTCHAs don't just catch robots</h3>
<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>
<h3>Dealing with cognitive disabilities</h3>
<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 or 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>
</section>
<!-- Final slides-->
<section>
<section>
<h3>Let's develop it!</h3>
<p>Break out those project files and see what you can do to make them more universally accessible! Feel free to add or change content while you try out different techniques.</p>
<a href="access-proj.zip" target="_blank">Project Files</a>
</section>
<section>
<h3>Show your users some love!</h3>
<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>
<h3>Resources</h3>
<ul>
<li><a href="https://shop.smashingmagazine.com/products/apps-for-all">Apps For All</a>, a book written by Heydon Pickering which provides specific strategies for making our sites accessible.</li>
<li><a href="http://wave.webaim.org/toolbar/" target="_blank">WAVE toolbar</a>, a firefox extension that does in-browser checks.</li>
<li><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><a href="http://www.w3.org/WAI/" target="_blank">W3C Web Accessibility Initiative (WAI).</a></li>
<li><a href="http://webaim.org/" target="_blank">WebAIM</a>, an accessibility-focused organization with great information.</li>
<li><a href="http://www.webaxe.org" target="_blank">Web Axe</a>, a blog and podcast on accessibility.</li>
<li><a href="http://mcdlr.com/wai-aria-cheatsheet/" target="_blank">WAI-ARIA Landmark Roles Cheatsheet</a></li>
</ul>
</section>
<section>
<h3>Upcoming Workshops</h3>
<ul>
<li><a href="http://www.meetup.com/Girl-Develop-It-Detroit/events/227918348/">Code & Tea</a></li>
<li><a href="http://www.meetup.com/Girl-Develop-It-Detroit/events/228285685/">Intro to HTML & CSS</a></li>
<li><a href="http://www.meetup.com/Girl-Develop-It-Detroit/events/228284750/">Intro to JavaScript</a></li>
<li><a href="http://www.meetup.com/Girl-Develop-It-Detroit/events/228110522/">Teacher Training</a></li>
<li><a href="http://www.meetup.com/Girl-Develop-It-Detroit/events/228285603/">Intro to Search Engine Optimization</a></li>
</ul>
</section>
</section>
</div>
<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>
<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,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>