-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
290 lines (247 loc) · 13 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
<!doctype html>
<html lang="en-NZ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="icon" type="image/png" href="img/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="manifest.json"/>
<link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#A2DDD9">
<meta name="msapplication-TileColor" content="#A2DDD9">
<meta name="theme-color" content="#A2DDD9"/>
<meta name="background-color" content="#fff"/>
<meta property="og:url" content="https://praesongprasit.github.io/talk_a11y-intro-design-students/" />
<meta property="og:type" content="article">
<meta property="og:title" name="twitter:title" content="Accessibility: An introduction for design students" />
<meta property="og:image" name="twitter:image" content="https://praesongprasit.github.io/talk_a11y-intro-design-students/repository-open-graph_img.png" />
<meta property="og:description" name="twitter:description" content="What is accessibility, who it's for, why it's important for both you and your audience, and what can you do to design accessible products?" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:dnt" content="on">
<meta name="twitter:creator" content="@PraeSongprasit">
<title>Intro to Accessibility for designers - Prae Songprasit</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/personal-branding.css" id="theme">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/a11y-light.css" id="highlight-theme">
</head>
<body>
<div class="reveal">
<main class="slides">
<section aria-label="Introduction slide">
<h1>Accessibility</h1>
<p>An introduction to a11y</p>
<p>
<small>
<a href="https://praesongprasit.com">Prae Songprasit</a></a>
</small>
</p>
<aside class="notes">
<p>Hi everyone!</p>
<p>Today I'll to give you a quick intro to accessibility</p>
<p>I'm going to explain what it is, who it's for, and why it's important for both you and your audience/users</p>
<p>Fun fact: a11y is an inaccessible abbreviation of the word accessibility, because there are 11 letters between a & y</p>
</aside>
</section>
<section aria-labelledby="slide2">
<h2 id="slide2">About me</h2>
<ul>
<li class="fragment">UX Engineer</li>
<li class="fragment">Coded bits of Xero, ANZ, TNZ</li>
<li class="fragment">Focus on accessibility & <br>design systems</li>
<li class="fragment">Kyudoka</li>
</ul>
<aside class="notes">
<p>First, a little bit about me</p>
<p>I'm a UX engineer. That's what we call developers who specialises in coding up designs into something that a user can interact with.</p>
<p>I'm working at Xero. But I've previously worked on projects with ANZ bank, and newzealand.com</p>
<p>I'm especially good with accessibility and design systems</p>
<p>In my free time, I practice Japanese archery!</p>
</aside>
</section>
<section aria-label="NZ government's definition of accessibility">
<img
class="stretch"
src="img/accessibility_govtnz.png"
alt="Screenshot of digital.govt.nz's Accessibility page"
/>
<aside class="notes">
<p>I love <a href="https://digital.govt.nz">https://digital.govt.nz</a>‘s explanation:</p>
<blockquote>Web accessibility is about inclusion — making sure everyone, including disabled people and those using assistive technologies, can access online information and services.</blockquote>
</aside>
</section>
<section aria-labelledby="slide3">
<h2 id="slide3">What is<br>web accessibility?</h2>
<p>
Inclusion and access to <br><strong>information</strong>
and <strong>services</strong>
</p>
<aside class="notes">
<p>So what this is saying, people need to be able to access and use the web.</p>
<p>Why is it important that everyone have access? Because</p>
<p><strong>Information</strong> leads to knowledge. Knowledge <strong>empowers</strong> people</p>
<p>A person who can't read very well can still learn about a their rights, if you've used simple language, or provide audio alternative.</p>
<p>What about <strong>services</strong>? Services <strong>enable users</strong> to achieve their goal</p>
<p>Someone who can't speak will struggle to call a call center. But if service is also available online, they can use online form to use the service.</p>
</aside>
</section>
<section aria-labelledby="slide4">
<h2 id="slide4">Who is web accessibility for?</h2>
<p span class="fragment" data-fragment-index="1">
❤️ Everyone
</p>
<aside class="notes">
<p>So based on what I've just said, you can guess that answer.</p>
<p>It is for <strong>everyone</strong></p>
<p>By designing & developing a disability friendly experience, you can often benefit wider ranging audience than you think.</p>
</aside>
</section>
<section aria-labelledby="slide5">
<h2 id="slide5">Types of disabilities</h2>
<img class="stretch"
src="img/ms_persona-spectrum.png"
alt="Micrsoft inclusive design personal spectrum, showing how different types of physical disabilities can be caused permanently, temporarily, and situationally.">
<aside class="notes">
<p>Microsoft's inclusive design guideline illustrated this persona spectrum wonderfully.</p>
<p>On top of different types of physical disabilities, situation that cause those disabilities differ.</p>
<p>This really drive home the point, that if you design for perment disabilities, lots more people can benefit.</p>
<p>We usually think of blind people, extreme, but it can just be borg (hungover).</p>
</aside>
</section>
<section aria-labelledby="slide6">
<h2 id="slide6">The curb cut effect</h2>
<img
class="stretch"
src="img/sketchplanations_curb-cut-effect.png"
alt="A sketch of stick figers using wheel chair curb cuts in different ways, like someone with a stroller, bycicle, and wheeling a fork lift."
/>
<aside class="notes">
<p>This is what we called, a curb cut effect.</p>
<p>Curb cuts, were initially designed for wheel chair users to safely get off the footpath, and cross the street.</p>
<p>But when people were asked what they think the curb cut was for, cyclists thought it's for them. Parents with strollers thought it's for them. Same as the delivery person.</p>
<p>Many groups benefit from things being designed for ease of access.</p>
<hr>
<p>So not only it's a morally right thing to do</p>
<p>You cover a way larger part of the population than you think!</p>
<p>It also produce genuinely good experiences. Accessible products feels good.</p>
<p>It's demonstrating benefits of universal design at its best!</p>
</aside>
</section>
<section aria-labelledby="slide7">
<h2 id="slide7">What could access needs look like?</h2>
<p>
Lets hit some examples!
</p>
<aside class="notes">
<p><a href="https://www.youtube.com/watch?v=q_ATY9gimOM" rel="external">Screen reader demo</a></p>
<p><a href="https://www.youtube.com/watch?v=tfkzj5VC9P8" rel="external">500% zoom user</a></p>
</aside>
</section>
<section aria-labelledby="slide8">
<h2 id="slide8">Accessible sites</h2>
<p>
Examples of different types in the wild
</p>
<aside class="notes">
<p><a href="https://wise.com/community/en/brand-new-look" rel="external">Wise</a> - youthful, vibrant and engaging</p>
<p><a href="https://www.getstark.co/" rel="external">Stark plugin</a> - Marketing, vibrant and engaging</p>
<p><a href="https://www.rnz.co.nz/" rel="external">Radio NZ</a> - Serious, dense, informative</p>
</aside>
</section>
<section aria-labelledby="slide9">
<h2 id="slide9">Develop an accessible experience</h2>
<p>Where to start?</p>
</section>
<section aria-labelledby="slide10">
<h3 id="slide10">Try keyboard only</h3>
<p>
Can you navigate your website with only keyboard?
</p>
<aside class="notes">
<p>You'll quickly learn to use tab and arrow keys to swiftly move around the app</p>
<p>If there are some parts that you cannot get to with keyboard, it's not accessible</p>
</aside>
</section>
<section aria-labelledby="slide11">
<h3 id="slide10">Test with styles turned off</h3>
<p>
❤️ by keyboard only users, <br>screen readers, <br>people with different cognitive abilities
</p>
<aside class="notes">
<p>When you start with visuals, it's easy to focus on the layout, the colours, the typography, the imagery, and other visual cues to hint at actions users can take. It's fun!</p>
<p>But often, it's very hard to translate the 'feel' of colours and typography to access needs users, using assitive tools.</p>
<p>As a sighted user, I can quickly scan the visuals to understand what your product and services is about.</p>
<p>Screen reader users and keyboard users cannot take so much information all at once. Their tool only let them interact with your product one text or input at a time. So think about your user flow, and make sure to design that order explicitly and clearly. Don't make people jump around your page.</p>
<p>Try turning all the styles off. Does your app still make sense if you read it? If the order is weird, it'll be weird for assistive tech users</p>
<p>Use keyboard to tab through </p>
</aside>
</section>
<section aria-labelledby="slide12">
<h3 id="slide14">Add meaningful alt text!</h3>
<img src="https://images.squarespace-cdn.com/content/v1/5a03992bd0e628ea50a2cc92/1629525683053-NV463IBGN3272E3F9EX8/Donut+sprinkle+bite+3.jpg?format=2500w" alt="Bitten off delicious looking ring donuts, sprinkled with hundred and thousands held up in-front of Sixes and Sevens sign" />
</section>
<section aria-labelledby="slide13">
<h2 id="slide13">Example alt text</h2>
<pre>
<code data-trim data-noescape class="language-html">
<img
src="donuts133.png"
alt="Bitten off delicious looking ring donuts,
sprinkled with hundred and thousands
held up in-front of Sixes and Sevens sign"
/>
</code>
</pre>
<aside class="notes">
<ul>
<li>Add in your alt text</li>
<li>Code in linear order</li>
<li>If already on socials, do this on your photos!</li>
</ul>
</aside>
</section>
<section aria-labelledby="slide14">
<h3 id="slide11">Follow best practices</h3>
<p>
Use linter to help enforce <br>HTML and framework recommendations!
</p>
<aside class="notes">
<p>In the past, I used to recommend people learning HTML basics... but no one would now. They all use frameworks</p>
<p>Reputable frameworks like React, Flutter, and etc. are getting better at enforcing some of the practices that makes sites more accessible.</p>
</aside>
</section>
<section aria-labelledby="slide13">
<h2 id="slide13">Accessibility is a right</h2>
<p>
to <em>equal access</em> of <em>your</em> information and services</p>
<aside class="notes">
<p>I'm speaking to the you developers, who will go out there and create useful experiences for lots of people.</p>
<p>I want us all to remember, that accessibility is a right</p>
<p>When us creators make things without ease of access in mind, we DISABLE people. We take away their rights.</p>
<p>People can be disabled in many ways, be it permanently, temporarily, and situationally.</p>
<p>We can help prevent that, by creating clear linear text experience, and provide multiple ways to access products and services.</p>
<p>By creating accessible designs, your design will become more valuable and usable by more people.</p>
</aside>
</section>
</main>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
transition: 'none',
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>