-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (158 loc) · 6.32 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Accessibility</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="img/wheelchair_stairs.jpg">
<h1>Ramping Up</h1>
<h1>the Web</h1>
</section>
<section>
<h2>NANCY</h2>
<hr>
<div style="width: 100%; overflow: hidden;">
<div style="width: 33%; float: left;"><hr style="color:red" width="1" size="35"><p>B.A.S.C Candiate</p><p>Software Major</p><p>Minor in Commerce</p></div>
<div style="display: inline-block; width: 33%;"><p><hr style="color:blue" width="1" size="35">Univerisity of British Columbia (UBC)</p></div>
<div style="width: 33%; float: right;"><p><hr style="color:green" width="1" size="35">Intern on Platform Accessibility Team</p></div>
</div>
</section>
<section data-background="img/ramp.jpg"></section>
<section data-background="img/pyramid.jpg"></section>
<section data-background="#00414c">
<blockquote>
“Accessibility rights are human rights.”
<p>- Tim Cook, Apple</p>
</blockquote>
<aside class="notes">
Important: In some states and provinces businesses have an obligation to make their facilities accessible by law. Accessiblity is becoming ingrained in our culture.
</aside>
</section>
<section data-background="#004c31">
<blockquote>
“About 15% of the world's population lives with some form of disability.”
<p>- WHO</p>
</blockquote>
<aside class="notes">
About 1 billion people. This number is growing as people age motor skills, vision and hearing degrade.
1 billion people who can't understand, navigate, and interact or contribute to the Web. That's a huge loss
of human potential.
</aside>
</section>
<section data-background="#44146f">
<h2>Accessibility</h2><p>and</p><h2>Firefox Dev Tools</h2>
</section>
<section data-background="#44146f">
<div style="width: 100%; overflow: hidden;">
<div style="width: 50%; float: left;"><h2>Bugs</h2><img src="img/bug.png" style="border:0"></div>
<div style="margin-left: 50%;"><h2>Tool</h2><img src="img/toolbox.png" style="border:0; height:256px"></div>
</div>
</section>
<section data-background="#424b66"><h2>Sightless Web</h2></section>
<section><h2>AUDIENCE PARTICIPATION</h2></section>
<section data-background="img/link.png">
<h4 class="fragment fade-up" style="text-align:right; color:black">Name</h4>
<h4 class="fragment fade-up" style="text-align:right; color:black">Role</h4>
<h4 class="fragment fade-up" style="text-align:right; color:black">Action</h4>
<aside class="notes">
What information is important?
</aside>
</section>
<section data-background="rgb(181, 83, 60)">
<h2>Goals:</h2><br>
<h4 class="fragment highlight-current-green grow">Predict Screen Reader Output</h4>
<h4 class="fragment highlight-current-green grow">Fast Evaluation of Accessible Design</h4>
</section>
<section data-background="img/tool.png"></section>
<section data-background="img/toolboxinfo.png"></section>
<section data-background="#7f0000">
<h2>Designs</h2><br>
<h3>Improvable</h3>
<p>VS</p>
<h3>Solid Designs</h3>
</section>
<section data-background="#7f0000">
<h2>Search</h2>
</section>
<section data-background="img/badsearch.png"></section>
<section data-background="#004c00">
<h2>Search</h2>
</section>
<section data-background="img/goodsearch.png"></section>
<section data-background="#7f0000">
<h2>Image</h2>
</section>
<section data-background="img/badimage.png"></section>
<section data-background="#004c00">
<h2>Image</h2>
</section>
<section data-background="img/goodimage.png"></section>
<section data-background="#7f0000">
<h2>Dropdown</h2>
</section>
<section data-background="img/baddrop.png"></section>
<section data-background="#004c00">
<h2>Dropdown</h2>
</section>
<section data-background="img/gooddrop.png"></section>
<section><h2>WHAT'S NEXT</h2></section>
<section data-background="#b27300">
<h3>THANK YOU:</h3>
<p>University Team</p>
<p>Mozillian Community + Other Interns</p>
<p>David Bolter, Yura Zenevich and Platform Accessibility Team</p>
<br><img src="img/thanks.jpg" width="40%" height="40%">
<aside class="notes">
University Team: Giving me this oppurtunity
Other Interns: Making the experience so much fun
Mozillian Community: Supporting and encouraging us
David being an awesome manager, Yura for being an amazing mentor.
</aside>
</section>
<section data-background="img/road.jpg">
<h2 style="text-align:right">I'm A Mozillian</h2>
<aside class="notes">
I'm walking away from this experience as a Mozillian and will
continue to support Mozilla's Mission after my internship.
</aside>
</section>
<section>
<h2>Questions?</h2>
<p><br>irc: npang</p>
<p>email: [email protected]</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>