This repository has been archived by the owner on Apr 3, 2022. It is now read-only.
forked from Roenok/girldevelopit-rdu-access
/
class1.html
431 lines (388 loc) · 26.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
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
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!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>
<aside class="notes">
<p>Useful stats from the Census Bureau:</p>
<ul>
<li>54 million people have a disability--19 percent of the civilian noninstitutionalized population. This increases with age:
<ul>
<li>5 percent of children 5 to 17 have disabilities.</li>
<li>10 percent of people 18 to 64 have disabilities.</li>
<li>38 percent of adults 65 and older have disabilities.</li>
</ul>
</li>
<li>1.8 million people 15 and older are unable to see printed words.</li>
<li>1 million people 15 and older are unable to hear conversations.</li>
<li>2.5 million have difficulty having their speech understood.</li>
<li>16.1 million have limitations in cognitive functioning or who have a mental or emotional illness.</li>
</ul>
<p>Legal issues: Some sites, like Target, have been sued under the Americans with Disabilities Act (ADA)</p>
</aside>
</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 Pellicore</a> <a href="http://creativecommons.org/licenses/by/2.0/">cc<span class="visuallyhidden"> opens in a new window</span></a></p>
<aside class="notes">
<p>Ask if people recognize curb cut, then point out that while wheelchairs use them, so do strollers, people with luggage, etc. Mention how accessibility can help the non-disabled as well.</p>
</aside>
</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>
<aside class="notes">
<p>This is a good place to pause and ask students to come up with potential types of disability that can affect web use.</p>
</aside>
</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>
<aside class="notes">
<p>Accessibility checkers can help, but they are not a full subsititute for manual testing.</p>
<p>You don't have to be perfect to be helping. No site will be perfectly accessible for everyone in the world.</p>
</aside>
</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>What assitive technology do people use?</h2>
<ul>
<li>Browser zoom</li>
<li>Screen magnification</li>
<li>High contrast displays</li>
<li>Screen readers</li>
</ul>
<aside class="notes">Important points:
<ul>
<li>Low vision is very common</li>
<li>Even people who are legally blind may have some residual vision</li>
<li>Screen readers are also useful for people with print disabilities, like dyslexia</li>
</ul>
</aside>
</section>
<section>
<h2>Demo</h2>
<aside class="notes">
<p>Choose a site with a complex nav menu, and show how long it takes to get through with a screen reader. I used CNN.com and NVDA for this demo, but any common screen reader will work.</p>
</aside>
</section>
<section>
<h2>Let's try it</h2>
<p><a href="http://webaim.org/simulations/screenreader-sim.htm" target ="_blank">Screen reader simulation<span class="visuallyhidden"> opens in a new window</span></a></p>
<p>http://bit.ly/p3JmJ2</p>
<aside class="notes">
<p>Have students try the screenreader demo at http://webaim.org/simulations/screenreader-sim.htm. (With headphones!) You may have to help people install the Shockwave plugin. Time limit to ten minutes, and cut it short if students seem bored or frustrated.</p>
<p>If available, demo VoiceOver on the iPhone/iPad or Talkback on Android.</p>
</aside>
</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>Let's try it</h2>
<p>Provide alt text for the images on your handout.</p>
<aside class="notes">
<p>Print handouts in advance! They are in the repo as kitten-alt-text.pdf</p>
</aside>
</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 in product descriptions 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>No, automatic captions don't count</h3>
<img src="img/bad-captions.png" alt="YouTube video with nonsense captions: Look at your help literally now you can link your data from hell"/>
<p class="credit">Credit: Sylvia Pellicore, from YouTube</p>
<aside class="notes">
<p>The original audio in that clip was "link your data from <strong>health</strong> care apps"</p>
</aside>
</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>
<aside class="notes">
<p>Paid captioning services are relatively inexpensive, about $1.50 to $2.50 a minute.</p>
</aside>
</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>
<h2>Demo</h2>
<aside class="notes">
<p><a href="https://www.youtube.com/watch?v=p83wLuq3USA" target="_blank">YouTube video on eye-tracking software</a></p>
<p><a href="http://codecanyon.net/item/subscribe-popup/full_screen_preview/2421232">Popup sign up</a></p>
</aside>
</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>
<!-- Class exercise -->
<section>
<h2>Let's try it</h2>
<p>Visit a site you use frequently. Identify one accessibility feature that is part of the site and one feature you would change.</p>
<aside class="notes">
<p>Students can do this activity alone or in pairs, depending on the size of the class. If people get stuck, recommend:</p>
<ul>
<li>http://www.buzzfeed.com/</li>
<li>http://www.ebay.com/</li>
<li>http://facebook.com</li>
</ul>
<p>Depending on time, you can have each group present on what they found.</p>
</aside>
</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>