forked from Roenok/girldevelopit-rdu-access
/
class1.html
336 lines (296 loc) · 21.4 KB
/
class1.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class 1 ~ Web Accessibility ~ Girl Develop It</title>
<meta name="description" content="This is the Girl Develop It Web Accessibility curriculum. It was originally developed by Sylvia Richardson and modified by Marcy Sutton.
This course is meant to be taught as a two-week class. 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="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<link rel="stylesheet" href="css/accesscustom.css">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="lib/css/dark.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</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/circle-gdi-logo.png" alt="Girl Develop It" style="max-height: 400px;" class="nonbordered">
<h1 id="slide1">Intro to Web Accessibility</h1>
<h2>Class 1</h2>
</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 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>
</section>
<section>
<h2>Introductions</h2>
<p>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/disabled-iphone.jpg" alt="Happy iPhone users"/>
<p class="credit">Photo credit: <a href="http://www.deaftechnews.com/2012/04/17/see-how-blind-people-use-the-iphone-4s-video/" target="_blank" title="Link opens in a new window">DeafTech News<span class="visuallyhidden"> opens in a new window</span></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>
</section>
<section>
<h2>Why worry?</h2>
<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" title="Link opens in a new window">circulating<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></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" title="Link opens in a new window">source<span class="visuallyhidden"> opens in a new window</span></a>).</li>
<li class="fragment">Be in compliance with legal guidelines, like Section 504/508 and WCAG 2.0.</li>
<li class="fragment">Avoid <a href="http://accessibletech.org/access_articles/legal/courtCases.php" target ="_blank">potential lawsuits<span class="visuallyhidden"> opens in a new window</span>.</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<span class="visuallyhidden"> opens in a new window</span></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<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target = "_blank">cc<span class="visuallyhidden"> opens in a new window</span></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>
</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<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc<span class="visuallyhidden"> opens in a new window</span></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<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h2>Let's try it</h2>
<p><a href="http://webaim.org/simulations/screenreader-sim.htm" target ="_blank">Screenreader simulation<span class="visuallyhidden"> opens in a new window</span></a></p>
<p>http://bit.ly/p3JmJ2</p>
</section>
<!-- Alternate text -->
<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<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target ="_blank">cc<span class="visuallyhidden"> opens in a new window</span></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 <code>alt=""</code> to instruct a screen reader to skip it.</li>
<li class="fragment">Instead of using "longdesc," provide a caption or link. Consider HTML5 <code>figure</code> and <code>figcaption</code>.</li>
</ul>
<pre class="fragment"><code class="html"><img src="location.jpg" alt="brief description">
<figure>
<img src="location.jpg">
<figcaption>brief description</figcaption>
</figure>
</code></pre>
</section>
<section>
<h2>Other tips for screen readers</h2>
<ul>
<li class="fragment">Headings skip-nav links and landmark roles give users a way to navigate through a page.</li>
<li class="fragment">Content is more than just visual.</li>
<li class="fragment">External link indicators prevent unexpected page changes.</li>
<li class="fragment">Tables can be hard to navigate, so only use them for tabular data.</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" title="Link opens in a new window">VoiceOver on iOS<span class="visuallyhidden"> opens in a new window</span></a>.</li>
</ul>
</section>
<!-- Other visual disabilities-->
<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" title="Link opens in a new window">antifluor<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h2>More on 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">Include color names and show examples (<a href="http://24ways.org/2012/colour-accessibility/" target="_blank" title="Link opens in a new window">article<span class="visuallyhidden"> opens in a new window</span></a>)</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" title="Link opens in a new window">Checker<span class="visuallyhidden"> opens in a new window</span></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 and percentages instead of pixels when you can.</li>
</ul>
</section>
<!-- Hearing disabilities-->
<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" title="Link opens in a new window">Randall Munroe<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc/2.5/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h3>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>
<!-- Physical disabilities-->
<section>
<h3>Lose the Mouse</h3>
<img src="img/mouse.jpg" alt="Cat steals mouse" />
<p class="credit">Photo credit: <a href="http://ipkitten.blogspot.com/2013/07/the-patent-legacy-of-computer-mouse.html" target="_blank" title="Link opens in a new window">The IP Kat<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h3>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>
<!-- Cognitive disabilities-->
<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" title="Link opens in a new window">Thomas Hawk<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></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" title="Link opens in a new window">Bethan<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></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" title="Link opens in a new window">baboon<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h3>Dealing with cognitive disabilities</h3>
<ul>
<li class="fragment">This is a less-researched area of web accessibility. Here is a <a href="http://jkg3.com/Journal/cognitive-accessibility-101-part-1-what-is-cognitive-accessibility">Cognitive 101</a>.</li>
<li class="fragment">Minimize cognitive load--don't overwhelm the user.</li>
<li class="fragment">Use common icons to mark important tasks and consider text labels.</li>
<li class="fragment">If you have timed content (forms, image galleries, etc.) provide controls or allow users to 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" title="Link opens in a new window">an alternative method<span class="visuallyhidden"> opens in a new window</span></a>.</li>
</ul>
<img class="fragment" src="img/captcha.png" alt="Screenshot of a Captcha" />
</section>
<!-- Final slides-->
<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" title="Link opens in a new window">Sam Felder<span class="visuallyhidden"> opens in a new window</span></a> <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank" title="Link opens in a new window">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
</section>
<section>
<h3>Resources</h3>
<ul>
<li><a href="http://webaim.org/resources/designers/" target="_blank" title="Link opens in a new window">Web Accessibility for Designers<span class="visuallyhidden"> opens in a new window</span></a></li>
<li><a href="http://webaim.org/" target="_blank" title="Link opens in a new window">WebAIM (Web Accessibility in Mind)<span class="visuallyhidden"> opens in a new window</span></a></li>
<li><a href="http://www.globalaccessibilityawarenessday.org/" target="_blank" title="Link opens in a new window">Global Accessibility Awareness Day<span class="visuallyhidden"> opens in a new window</span></a></li>
<li><a href="http://a11ywins.tumblr.com" target="_blank" title="Link opens in a new window">Accessibility Wins<span class="visuallyhidden"> opens in a new window</span></a></li>
<li><a href="http://wet-boew.github.io/v4.0-ci/index-en.html" target="_blank" title="Link opens in a new window">Web Experience Toolkit<span class="visuallyhidden"> opens in a new window</span></a></li>
<li><a href="http://www.w3.org/WAI/" target="_blank" title="Link opens in a new window">W3C Web Accessibility Initiative (WAI)<span class="visuallyhidden"> opens in a new window</span></a></li>
</ul>
</section>
</div>
<footer>
<div class="copyright">
Introduction to 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="lib/js/head.min.js"></script>
<script src="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,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: '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, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/accessibility-helper/js/accessibility-helper.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>