forked from Roenok/girldevelopit-rdu-access
-
Notifications
You must be signed in to change notification settings - Fork 1
/
lightning.html
145 lines (118 loc) · 6.52 KB
/
lightning.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Five Ways to Improve Accessibility</title>
<meta name="description" content="This is the Girl Develop It Web Accessibility curriculum. It was developed by Sylvia Richardson.
This is meant to be given as a 5-minute lightning talk. The primary slides are designed for maximum presentability--one picture, one sentence.
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/gdidefault.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="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]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Opening slides -->
<section>
<a class="visuallyhidden" href="#slide1">Skip nav</a>
<ol class="visuallyhidden" id="toc">
<li><a href="#slide2">What is Accessibility?</a></li>
<li><a href="#slide3">Alternate text</a></li>
<li><a href="#slide5">Flexible design</a></li>
<li><a href="#slide6">Non-mouse navigation</a></li>
<li><a href="#slide7">Cognitive disabilities</a></li>
<li><a href="#slide8">Captchas</a></li>
<li><a href="#slide9">Accessibility is for everyone!</a></li>
</ol>
<img src = "img/gdi_logo_badge.png" alt="gdi logo">
<h1 id="slide1">Five Ways to Improve Accessibility</h1>
<h2>September 28, 2013</h2>
</section>
<!-- Intro: What is Accessibility?-->
<section id="slide2">
<h3>Who can use your sites and applications?</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/">bob the lomond</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/">cc</a></p>
<p class="visuallyhidden"><a href="#toc">Return to Table of Contents</a></p>
</section>
<section id="slide3">
<h3>Provide an alternate</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/">Linh H. Nguyen</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">cc</a></p>
</section>
<section id="slide4">
<pre><code>
<p><img src="location" alt="brief description"></p>
</code></pre>
</section>
<section id="slide5">
<h3>Be flexible</h3>
<img src="img/flexible.jpg" alt="Person doing a backbend"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/dollen/5979760760/">dollen</a> <a href="http://creativecommons.org/licenses/by-nd/2.0/">cc</a></p>
</section>
<section id="slide6">
<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/">Stéfan</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a></p>
</section>
<section id="slide7">
<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/">Bethan</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">cc</a></p>
</section>
<section id="slide8">
<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/">baboon</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/">cc</a></p>
</section>
<section id="slide9">
<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>
<p class="visuallyhidden"><a href="#toc">Return to Table of Contents</a></p>
</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>