WEBVTT
1
00:00:09.873 --> 00:00:11.022
(audience applauding)
2
00:00:11.022 --> 00:00:12.222
Hello.
3
00:00:12.222 --> 00:00:13.564
Hello everybody.
4
00:00:13.564 --> 00:00:15.732
I appreciate all of you who have come here
5
00:00:15.732 --> 00:00:17.462
when the alternative is you could be queuing up
6
00:00:17.462 --> 00:00:19.349
for an early lunch.
7
00:00:19.349 --> 00:00:21.189
I thought about doing the same,
8
00:00:21.189 --> 00:00:22.727
but then I remembered I had to be here.
9
00:00:22.727 --> 00:00:25.949
So I am doing this talk, Selfish Accessibility.
10
00:00:25.949 --> 00:00:28.015
I would like you to know that the slides
11
00:00:28.015 --> 00:00:30.402
are already online.
12
00:00:30.402 --> 00:00:33.402
The url is rosel.li/wceu.
13
00:00:37.145 --> 00:00:40.134
So this is potentially useful for people
14
00:00:40.134 --> 00:00:41.925
all the way in the back who aren't going to see
15
00:00:41.925 --> 00:00:44.765
all of the text or the images in my slides.
16
00:00:44.765 --> 00:00:46.300
So you can follow along.
17
00:00:46.300 --> 00:00:49.913
Which means you could conceivably leave, go to lunch now,
18
00:00:49.913 --> 00:00:53.513
watch the livestream, and follow my slides.
19
00:00:53.513 --> 00:00:56.225
I would do the same thing, except I'm giving the talk.
20
00:00:56.225 --> 00:00:57.591
So that's just a bit awkward.
21
00:00:57.591 --> 00:01:00.762
Good news is, after a ton of editing,
22
00:01:00.762 --> 00:01:03.484
I managed to get my slides down from 108 slides
23
00:01:03.484 --> 00:01:07.067
to 121.
(audience clapping)
24
00:01:07.911 --> 00:01:08.744
That's the wrong reaction,
25
00:01:08.744 --> 00:01:11.310
But that's also really, really nice to hear.
26
00:01:11.310 --> 00:01:14.040
So I'm gonna be flying through a bunch of slides
27
00:01:14.040 --> 00:01:14.911
in the middle.
28
00:01:14.911 --> 00:01:17.848
There's technical stuff and not technical stuff.
29
00:01:17.848 --> 00:01:19.455
If you were in Rian's talk earlier,
30
00:01:19.455 --> 00:01:22.458
then I'll just throw away I think about 60 slides,
31
00:01:22.458 --> 00:01:23.718
because she covered it.
32
00:01:23.718 --> 00:01:26.135
So thank you, Rian, you jerk.
33
00:01:28.553 --> 00:01:31.511
Okay, look, introductions.
34
00:01:31.511 --> 00:01:33.992
So I have a slide dedicated to my ego,
35
00:01:33.992 --> 00:01:36.613
just so you know that I'm not somebody
36
00:01:36.613 --> 00:01:38.141
who makes crap up.
37
00:01:38.141 --> 00:01:41.013
I do, but other people seem to think there's value in it.
38
00:01:41.013 --> 00:01:43.499
I've written some books and some articles.
39
00:01:43.499 --> 00:01:46.250
I have a website at adrianroselli.com.
40
00:01:46.250 --> 00:01:50.256
You can also avoid me on the Twitters @aardian,
41
00:01:50.256 --> 00:01:52.350
A-A-R-D-I-A-N.
42
00:01:52.350 --> 00:01:56.013
Just hit the mute, block, unfollow.
43
00:01:56.013 --> 00:01:58.643
The Paciello Group is a consulting firm
44
00:01:58.643 --> 00:02:01.724
around accessibility remediation and compliance.
45
00:02:01.724 --> 00:02:04.046
They're the ones who allowed me to be here today.
46
00:02:04.046 --> 00:02:04.879
Yay.
47
00:02:05.908 --> 00:02:10.873
They're gonna me surprised when I submit some expenses.
48
00:02:10.873 --> 00:02:14.343
A few guys are laughing at that, but it's not funny.
49
00:02:14.343 --> 00:02:18.093
Also, this microphone tastes like croissants.
50
00:02:19.428 --> 00:02:23.261
Okay, so some of you might have seen this a11y
51
00:02:24.426 --> 00:02:25.759
or a11y or ally.
52
00:02:26.812 --> 00:02:28.501
And I want to give you a little bit of context for this,
53
00:02:28.501 --> 00:02:30.564
because it's common in the industry.
54
00:02:30.564 --> 00:02:32.077
It is a numeronym.
55
00:02:32.077 --> 00:02:35.087
And what we do is we take the A and the Y
56
00:02:35.087 --> 00:02:37.743
and then we take all the letters in between,
57
00:02:37.743 --> 00:02:39.089
and there are 11 of them,
58
00:02:39.089 --> 00:02:41.335
and we replace it with the number 11.
59
00:02:41.335 --> 00:02:43.846
So a11y means accessibility.
60
00:02:43.846 --> 00:02:48.332
There are analogs, already, l10n for localization
61
00:02:48.332 --> 00:02:50.658
and i18n for internationalization.
62
00:02:50.658 --> 00:02:53.666
This is handy, though, if you go out to the Twitters,
63
00:02:53.666 --> 00:02:56.971
and you do #a11y, you're gonna find a lot of people
64
00:02:56.971 --> 00:02:58.977
talking about accessibility,
65
00:02:58.977 --> 00:03:01.894
for good and/or for bad.
66
00:03:04.298 --> 00:03:07.029
For a little bit of context about accessibility,
67
00:03:07.029 --> 00:03:10.176
I maintain that accessibility in general gets no respect,
68
00:03:10.176 --> 00:03:11.749
no matter where you go.
69
00:03:11.749 --> 00:03:14.962
This is a photo of when we were first remodeling my office
70
00:03:14.962 --> 00:03:17.661
at the company I used to have,
71
00:03:17.661 --> 00:03:20.241
which I don't now, it's hilarious.
72
00:03:20.241 --> 00:03:23.594
So some of the paint colors, the green post is Lime Rickey.
73
00:03:23.594 --> 00:03:27.242
The ceiling, that gray, is Cyberspace.
74
00:03:27.242 --> 00:03:31.409
The blue pillar is called Online Blue, I don't know why.
75
00:03:32.352 --> 00:03:34.560
So they have, Sherwin-Williams went to all this effort
76
00:03:34.560 --> 00:03:36.834
to come up with these really compelling names.
77
00:03:36.834 --> 00:03:40.348
And, oh yeah, we did move out of that office.
78
00:03:40.348 --> 00:03:41.860
They came up with these really compelling names.
79
00:03:41.860 --> 00:03:45.998
And then they came up with Accessible Beige.
80
00:03:45.998 --> 00:03:48.455
For those of you in the way back who can't see this,
81
00:03:48.455 --> 00:03:49.783
you're not missing anything.
82
00:03:49.783 --> 00:03:53.950
It's the same color as 1980s era PCs, old IBM machines.
83
00:03:55.477 --> 00:03:57.375
So my partners at the time thought it would be hilarious
84
00:03:57.375 --> 00:04:00.525
to paint my office Accessible Beige.
85
00:04:00.525 --> 00:04:03.419
This might explain why I no longer have that company.
86
00:04:03.419 --> 00:04:05.399
These are the things we're gonna cover.
87
00:04:05.399 --> 00:04:07.554
I'm gonna run through some statistics.
88
00:04:07.554 --> 00:04:10.144
I'm gonna go over my thesis of how to be selfish,
89
00:04:10.144 --> 00:04:11.841
talk about some experience models,
90
00:04:11.841 --> 00:04:16.042
technical stuff, WordPress, and we'll wrap it all up.
91
00:04:16.042 --> 00:04:18.125
So first off, statistics.
92
00:04:19.437 --> 00:04:21.022
Again, I'm gonna go through these relatively quickly,
93
00:04:21.022 --> 00:04:23.680
but I want you to at least be aware of them.
94
00:04:23.680 --> 00:04:27.945
In the US, if we talk about anybody who has a disability,
95
00:04:27.945 --> 00:04:30.327
in that age range of 21 to 64,
96
00:04:30.327 --> 00:04:32.700
we're looking at 10% of the population.
97
00:04:32.700 --> 00:04:35.392
In that 65 to 74 year-old age bracket,
98
00:04:35.392 --> 00:04:38.281
that number jumps to a quarter of that population,
99
00:04:38.281 --> 00:04:39.963
and it continues to climb.
100
00:04:39.963 --> 00:04:42.523
And this includes visual, hearing, mobility,
101
00:04:42.523 --> 00:04:46.665
cognitive, et cetera, any type of disability.
102
00:04:46.665 --> 00:04:50.832
Worldwide, 285 million people have a vision impairment.
103
00:04:51.884 --> 00:04:53.532
And as these numbers show,
104
00:04:53.532 --> 00:04:57.100
that number tends to climb with age.
105
00:04:57.100 --> 00:05:00.720
Hearing impairments, 360 million people worldwide
106
00:05:00.720 --> 00:05:02.554
have disabling hearing loss.
107
00:05:02.554 --> 00:05:04.171
And that's disabling.
108
00:05:04.171 --> 00:05:05.660
There's a far greater number of people
109
00:05:05.660 --> 00:05:10.387
who just can't hear what I'm telling them at a party,
110
00:05:10.387 --> 00:05:11.270
or they're lying to me.
111
00:05:11.270 --> 00:05:12.325
Probably the latter.
112
00:05:12.325 --> 00:05:16.637
So again, that number tends to increase with age.
113
00:05:16.637 --> 00:05:20.035
Mobility impairments, 5 1/2% in the US
114
00:05:20.035 --> 00:05:22.622
in that 21 to 64 age bracket.
115
00:05:22.622 --> 00:05:26.996
That number, that percentage increases with age, as well.
116
00:05:26.996 --> 00:05:30.747
Cognitive impairments are a lot trickier to try to identify.
117
00:05:30.747 --> 00:05:32.323
I've listed some examples.
118
00:05:32.323 --> 00:05:36.859
Dyslexia, dyscalculia, which is the numbers equivalent,
119
00:05:36.859 --> 00:05:38.586
essentially, of dyslexia.
120
00:05:38.586 --> 00:05:41.919
Memory issues, ADD, ADHD for, et cetera,
121
00:05:44.169 --> 00:05:45.275
lots of different things.
122
00:05:45.275 --> 00:05:48.240
We're talking about 4.3% of the population.
123
00:05:48.240 --> 00:05:51.355
And that's just the ones that are necessarily diagnosed.
124
00:05:51.355 --> 00:05:53.307
There's a lot of people out there who struggle
125
00:05:53.307 --> 00:05:54.982
with different kinds of impairments,
126
00:05:54.982 --> 00:05:55.999
and it's not diagnosed.
127
00:05:55.999 --> 00:06:00.166
And some of them are not as easy to define, either.
128
00:06:01.707 --> 00:06:03.826
I probably shouldn't have put the clicker down.
129
00:06:03.826 --> 00:06:05.576
Priorities right now.
130
00:06:06.623 --> 00:06:08.373
So, here's the thing.
131
00:06:09.447 --> 00:06:12.019
I have been to lots and lots of accessibility talks
132
00:06:12.019 --> 00:06:14.165
over the years where people talk about numbers,
133
00:06:14.165 --> 00:06:15.256
and they try to motivate you to think
134
00:06:15.256 --> 00:06:17.271
about how many people you're going to benefit.
135
00:06:17.271 --> 00:06:19.320
And in my experience, that is useless.
136
00:06:19.320 --> 00:06:20.342
It doesn't work.
137
00:06:20.342 --> 00:06:22.498
People aren't necessarily motivated by that.
138
00:06:22.498 --> 00:06:26.172
So my thesis is about how to be selfish.
139
00:06:26.172 --> 00:06:30.170
WebAIM is an organization called Web Accessibility in Mind.
140
00:06:30.170 --> 00:06:32.031
And they put together this great hierarchy
141
00:06:32.031 --> 00:06:35.085
for motivating accessibility change within an organization
142
00:06:35.085 --> 00:06:37.230
on a project, et cetera.
143
00:06:37.230 --> 00:06:39.698
And it starts off by guilting people,
144
00:06:39.698 --> 00:06:41.277
which is kind of a mean way to do it.
145
00:06:41.277 --> 00:06:43.203
You punish them when they don't do it right.
146
00:06:43.203 --> 00:06:45.683
You make it a requirement, so they have to do it
147
00:06:45.683 --> 00:06:47.433
in order to get paid.
148
00:06:48.641 --> 00:06:50.018
Then you start to turn the corner.
149
00:06:50.018 --> 00:06:52.500
You reward them for making things accessible.
150
00:06:52.500 --> 00:06:54.687
You hopefully will enlighten them.
151
00:06:54.687 --> 00:06:56.756
And ultimately, you want to inspire them.
152
00:06:56.756 --> 00:06:58.401
You want people to feel motivated
153
00:06:58.401 --> 00:07:01.054
to take on accessibility themselves,
154
00:07:01.054 --> 00:07:02.504
and just make it happen.
155
00:07:02.504 --> 00:07:04.008
That doesn't always work.
156
00:07:04.008 --> 00:07:06.044
So I put a star on top of this tree.
157
00:07:06.044 --> 00:07:08.421
And I call it Make it about me.
158
00:07:08.421 --> 00:07:09.561
Very simple thesis.
159
00:07:09.561 --> 00:07:10.981
These other things don't work,
160
00:07:10.981 --> 00:07:13.115
so maybe I can make it about me.
161
00:07:13.115 --> 00:07:15.166
So here's some ways we can look at that.
162
00:07:15.166 --> 00:07:17.788
One of them, when we think about getting older,
163
00:07:17.788 --> 00:07:19.774
I showed you some stats earlier,
164
00:07:19.774 --> 00:07:21.951
as numbers of impairments tend to increase
165
00:07:21.951 --> 00:07:24.384
as a percentage of the population.
166
00:07:24.384 --> 00:07:27.183
Getting older is something that affects nearly everybody,
167
00:07:27.183 --> 00:07:28.845
with some exceptions.
168
00:07:28.845 --> 00:07:31.928
You might be fortunate if it doesn't affect you.
169
00:07:31.928 --> 00:07:33.026
It's probably a pretty dark thing to say,
170
00:07:33.026 --> 00:07:34.262
nobody's laughing.
171
00:07:34.262 --> 00:07:36.537
So clearly I have a darker sense of humor
172
00:07:36.537 --> 00:07:38.870
than everybody in this room.
173
00:07:39.744 --> 00:07:42.106
It does carry risks and side effects.
174
00:07:42.106 --> 00:07:43.424
Definitely not for the young,
175
00:07:43.424 --> 00:07:46.961
as evidenced by the very few number of young people
176
00:07:46.961 --> 00:07:48.914
I see that are old.
177
00:07:48.914 --> 00:07:50.515
(audience member laughing)
178
00:07:50.515 --> 00:07:53.009
Now see that wasn't even funny.
179
00:07:53.009 --> 00:07:55.799
So looking at these two couples sitting here,
180
00:07:55.799 --> 00:07:57.366
think about it for a moment.
181
00:07:57.366 --> 00:08:01.072
What's different between these two couples?
182
00:08:01.072 --> 00:08:02.791
What separates them?
183
00:08:02.791 --> 00:08:06.856
Besides about five, six feet on the curb,
184
00:08:06.856 --> 00:08:10.915
the only thing that's separating them is 30 to 40 years.
185
00:08:10.915 --> 00:08:13.436
Otherwise, they're probably doing the same thing.
186
00:08:13.436 --> 00:08:14.394
They're probably trying to figure out
187
00:08:14.394 --> 00:08:16.269
where they're going to go to get some food.
188
00:08:16.269 --> 00:08:17.570
All the restaurants are closed.
189
00:08:17.570 --> 00:08:19.216
They don't open until 7:00.
190
00:08:19.216 --> 00:08:20.520
We have to drink three bottles of wine
191
00:08:20.520 --> 00:08:22.640
and just kill some time.
192
00:08:22.640 --> 00:08:23.902
Really the same goals here.
193
00:08:23.902 --> 00:08:25.024
There's not a lot of difference.
194
00:08:25.024 --> 00:08:27.107
It's just age, that's it.
195
00:08:28.061 --> 00:08:29.944
These two women,
196
00:08:29.944 --> 00:08:33.206
separated, again, by a foot, two feet,
197
00:08:33.206 --> 00:08:34.862
and 30 to 40 years,
198
00:08:34.862 --> 00:08:36.383
trying to do the same thing.
199
00:08:36.383 --> 00:08:37.844
They're both hanging out in the sun.
200
00:08:37.844 --> 00:08:39.748
They're both reading.
201
00:08:39.748 --> 00:08:43.901
One of them is smart enough to use a solar-powered device.
202
00:08:43.901 --> 00:08:46.984
That doesn't require battery back up.
203
00:08:49.187 --> 00:08:52.247
(audience laughing)
204
00:08:52.247 --> 00:08:54.604
I'm just gonna cross off the rest of my jokes.
205
00:08:54.604 --> 00:08:56.232
I'll blame it on the translation,
206
00:08:56.232 --> 00:09:00.925
because I'm speaking English very quickly, I understand.
207
00:09:00.925 --> 00:09:04.177
So another thing to consider, accidents.
208
00:09:04.177 --> 00:09:06.330
Sort of a situational disability,
209
00:09:06.330 --> 00:09:08.644
where you might be temporarily disabled.
210
00:09:08.644 --> 00:09:11.329
And that comes around from things like broken limbs,
211
00:09:11.329 --> 00:09:15.073
eye injuries, hearing injuries, head trauma.
212
00:09:15.073 --> 00:09:19.022
I am sort of the perfect case of all of these.
213
00:09:19.022 --> 00:09:20.641
All of these scenarios have happened to me.
214
00:09:20.641 --> 00:09:23.230
I've broken bones, jacked up my eye,
215
00:09:23.230 --> 00:09:27.440
been deaf for a while from running concerts.
216
00:09:27.440 --> 00:09:29.167
And I have a row of scars on my head.
217
00:09:29.167 --> 00:09:32.016
So I've collected everything here.
218
00:09:32.016 --> 00:09:34.675
I don't recommend doing that.
219
00:09:34.675 --> 00:09:37.083
If you've had a broken wrist, a fractured wrist,
220
00:09:37.083 --> 00:09:39.622
a repetitive stress injury,
221
00:09:39.622 --> 00:09:42.598
then you might be familiar with having your hand
222
00:09:42.598 --> 00:09:44.928
disabled for a while and in a cast.
223
00:09:44.928 --> 00:09:47.369
Very different to use a mouse or a keyboard
224
00:09:47.369 --> 00:09:49.840
when one of your hands is out of commission,
225
00:09:49.840 --> 00:09:52.089
or the entire arm.
226
00:09:52.089 --> 00:09:54.844
Maybe you poked yourself in the eye.
227
00:09:54.844 --> 00:09:57.907
Just keep clicking Close Window, Close Window.
228
00:09:57.907 --> 00:10:00.529
And now you've lost some depth perception.
229
00:10:00.529 --> 00:10:02.627
Makes it a little bit trickier to make sure you're typing
230
00:10:02.627 --> 00:10:06.134
correctly, grabbing the mouse, opening the door,
231
00:10:06.134 --> 00:10:08.377
pulling something out of a cabinet.
232
00:10:08.377 --> 00:10:11.181
Arguably, some people do it as a fashion choice.
233
00:10:11.181 --> 00:10:12.931
I can't explain that.
234
00:10:14.162 --> 00:10:16.837
There's also this notion of cognitive impairments
235
00:10:16.837 --> 00:10:19.750
that you know are coming.
236
00:10:19.750 --> 00:10:22.541
Or maybe you already have.
237
00:10:22.541 --> 00:10:24.245
So there's a British guy in the front row
238
00:10:24.245 --> 00:10:26.299
who's laughing at this.
239
00:10:26.299 --> 00:10:28.566
That's a wheel of cheese.
240
00:10:28.566 --> 00:10:31.249
These guys are running down a hill at top speed,
241
00:10:31.249 --> 00:10:33.416
chasing a wheel of cheese.
242
00:10:34.548 --> 00:10:37.134
You could argue that none of them is impaired
243
00:10:37.134 --> 00:10:38.967
when this race starts.
244
00:10:40.524 --> 00:10:42.737
But they put ambulances at the bottom of this hill,
245
00:10:42.737 --> 00:10:47.199
because every year when they do this cheese wheel chase,
246
00:10:47.199 --> 00:10:48.415
people get injured.
247
00:10:48.415 --> 00:10:52.270
They always load a bunch of people into ambulances.
248
00:10:52.270 --> 00:10:54.628
This is very much a scenario where they don't start off
249
00:10:54.628 --> 00:10:59.349
disabled, but they absolutely finish this run disabled.
250
00:10:59.349 --> 00:11:03.099
Permanent or not is a different conversation.
251
00:11:03.938 --> 00:11:06.955
You might think that, like me, you are invincible
252
00:11:06.955 --> 00:11:08.815
and allergic to nothing.
253
00:11:08.815 --> 00:11:12.173
But there are situational modifiers that come into play.
254
00:11:12.173 --> 00:11:14.136
You might pretend that you can multitask.
255
00:11:14.136 --> 00:11:16.030
You might work in the sun, eat at your desk,
256
00:11:16.030 --> 00:11:17.986
not have headphones handy.
257
00:11:17.986 --> 00:11:20.447
Or the content's not in your native language,
258
00:11:20.447 --> 00:11:23.048
like mine would be English, usually.
259
00:11:23.048 --> 00:11:27.628
So this is sort of an analog to how I do my work.
260
00:11:27.628 --> 00:11:30.228
I sit at the computer with one hand working
261
00:11:30.228 --> 00:11:33.610
and the other hand holding a taco.
262
00:11:33.610 --> 00:11:35.798
Or, since I'm here for another few days,
263
00:11:35.798 --> 00:11:38.987
a croissant with butter dripping all over my laptop.
264
00:11:38.987 --> 00:11:39.950
Which means I'm limited.
265
00:11:39.950 --> 00:11:42.431
I'm down to one hand, essentially.
266
00:11:42.431 --> 00:11:45.228
And I've always maintained that everybody is
267
00:11:45.228 --> 00:11:47.768
a keyboard user when they're eating lunch
268
00:11:47.768 --> 00:11:49.838
with their mouse hand.
269
00:11:49.838 --> 00:11:50.839
It's really that simple.
270
00:11:50.839 --> 00:11:54.072
We're all keyboard users, every day around lunch.
271
00:11:54.072 --> 00:11:56.164
I like to work on my patio,
272
00:11:56.164 --> 00:11:57.252
this is not my patio,
273
00:11:57.252 --> 00:11:58.169
in the sun.
274
00:11:59.325 --> 00:12:00.598
And when I'm working in the sun,
275
00:12:00.598 --> 00:12:02.123
I have to turn the brightness up all the way
276
00:12:02.123 --> 00:12:03.311
on my computer.
277
00:12:03.311 --> 00:12:04.910
And think about just when you're outside
278
00:12:04.910 --> 00:12:07.812
and you're using your phone and you're trying to tweet
279
00:12:07.812 --> 00:12:10.421
or text or look up the schedule, or whatever.
280
00:12:10.421 --> 00:12:11.307
It's very bright.
281
00:12:11.307 --> 00:12:13.369
You have to turn your screen brightness up.
282
00:12:13.369 --> 00:12:15.151
The contrast becomes an issue.
283
00:12:15.151 --> 00:12:17.644
It's a real thing to consider.
284
00:12:17.644 --> 00:12:20.341
These guys are professionals.
285
00:12:20.341 --> 00:12:23.744
These guys are multitasking pros.
286
00:12:23.744 --> 00:12:26.250
They are so on-the-ball, they brought a tarp.
287
00:12:26.250 --> 00:12:27.760
I mean, how awesome is that?
288
00:12:27.760 --> 00:12:31.681
But look at them, they are multitasking.
289
00:12:31.681 --> 00:12:33.418
One of them has one hand on his phone
290
00:12:33.418 --> 00:12:34.934
and the other on the cigarette.
291
00:12:34.934 --> 00:12:37.627
The other one's not even using his hand for his phone,
292
00:12:37.627 --> 00:12:39.804
he's just that awesome.
293
00:12:39.804 --> 00:12:41.656
But arguably, they're distracted.
294
00:12:41.656 --> 00:12:43.536
They're probably not super-focused on the task
295
00:12:43.536 --> 00:12:44.443
that they're doing.
296
00:12:44.443 --> 00:12:47.972
And there are things we can do to benefit those users.
297
00:12:47.972 --> 00:12:50.473
I know that, I fall into that scenario.
298
00:12:50.473 --> 00:12:54.137
This guy, however, is my favorite.
299
00:12:54.137 --> 00:12:58.054
I would like to point out, that's a typewriter.
300
00:13:01.045 --> 00:13:03.955
I mean really, he's got the whole sun thing sorted,
301
00:13:03.955 --> 00:13:08.244
and contrast, another solar-powered device.
302
00:13:08.244 --> 00:13:10.779
Some people I see regularly working in cafes.
303
00:13:10.779 --> 00:13:13.437
This is a guy who's probably doing some video editing.
304
00:13:13.437 --> 00:13:14.611
Might even be teaching himself,
305
00:13:14.611 --> 00:13:17.786
based on the number of manuals sitting next to that camera.
306
00:13:17.786 --> 00:13:19.939
And this is a case where the headphones are really important
307
00:13:19.939 --> 00:13:21.990
because he can't necessarily hear the audio
308
00:13:21.990 --> 00:13:25.367
if the cafe is full of people behind him,
309
00:13:25.367 --> 00:13:27.338
or they just pulled one espresso.
310
00:13:27.338 --> 00:13:30.282
Then you can't hear anything anymore.
311
00:13:30.282 --> 00:13:32.035
Some of us have to consider what we're doing
312
00:13:32.035 --> 00:13:35.540
when we have a partner in bed with us.
313
00:13:35.540 --> 00:13:37.677
You know, playing audio and video,
314
00:13:37.677 --> 00:13:39.085
not so compelling when you're afraid
315
00:13:39.085 --> 00:13:41.018
of waking up the person next to you.
316
00:13:41.018 --> 00:13:43.954
Or in this case, maybe you don't watch videos of squirrels
317
00:13:43.954 --> 00:13:46.954
while the dog is laying next to you.
318
00:13:48.659 --> 00:13:51.242
That's a big dog, big, big dog.
319
00:13:52.567 --> 00:13:55.222
This is sort of analogous to my living situation.
320
00:13:55.222 --> 00:13:57.639
I live in a tiny, tiny house.
321
00:13:58.510 --> 00:14:01.058
But I live between people with motorcycles.
322
00:14:01.058 --> 00:14:03.167
And they like to have these motorcycle duals
323
00:14:03.167 --> 00:14:04.176
on the weekends.
324
00:14:04.176 --> 00:14:06.248
One of them wheels his motorcycle out and revs it,
325
00:14:06.248 --> 00:14:07.711
and the other one wheels his out and revs it,
326
00:14:07.711 --> 00:14:09.188
and it's rev, rev, rev.
327
00:14:09.188 --> 00:14:11.286
And as a result, I can't have a conversation
328
00:14:11.286 --> 00:14:15.548
or listen to anything, because all I hear is a motorcycle.
329
00:14:15.548 --> 00:14:18.982
This is why my television has closed captions on
330
00:14:18.982 --> 00:14:21.103
permanently, because I never know
331
00:14:21.103 --> 00:14:22.320
when they're going to start.
332
00:14:22.320 --> 00:14:24.856
And I swear that they wait until that really important scene
333
00:14:24.856 --> 00:14:26.313
in Mighty Morphin Power Rangers
334
00:14:26.313 --> 00:14:28.813
where they reveal the bad guy.
335
00:14:29.811 --> 00:14:30.978
Oh, some fans.
336
00:14:32.674 --> 00:14:35.871
Years ago, I had my passport stolen in Spain.
337
00:14:35.871 --> 00:14:38.432
And I sat down at a keyboard with letters
338
00:14:38.432 --> 00:14:40.651
that were familiar, yet different to me.
339
00:14:40.651 --> 00:14:43.427
And all of my touch typing skills fell apart.
340
00:14:43.427 --> 00:14:46.018
And I'm using an operating system that's in Spanish,
341
00:14:46.018 --> 00:14:50.206
and surfing websites that load by default in Spanish.
342
00:14:50.206 --> 00:14:53.317
And I think I can speak some Spanish.
343
00:14:53.317 --> 00:14:55.975
You really can't when you're in a panic situation,
344
00:14:55.975 --> 00:14:58.165
trying to use a full system in a foreign language
345
00:14:58.165 --> 00:15:00.092
on a keyboard you don't know.
346
00:15:00.092 --> 00:15:02.179
So the language barrier becomes a problem, too.
347
00:15:02.179 --> 00:15:03.826
And some of the affordances that we think about
348
00:15:03.826 --> 00:15:07.743
for accessibility can benefit those situations.
349
00:15:08.991 --> 00:15:12.390
I'm from America where we have Thanksgiving every year.
350
00:15:12.390 --> 00:15:15.130
We murder a turkey and eat it.
351
00:15:15.130 --> 00:15:17.589
And the last thing that I want to do is spend
352
00:15:17.589 --> 00:15:21.231
that visit eating this poor murdered turkey,
353
00:15:21.231 --> 00:15:24.121
sitting with my parents changing printer toner
354
00:15:24.121 --> 00:15:28.244
and putting paper in and cleaning all the viruses
355
00:15:28.244 --> 00:15:31.910
off their system and all the custom cursors and icons.
356
00:15:31.910 --> 00:15:34.977
So realistically, you don't want to be tech support
357
00:15:34.977 --> 00:15:36.922
for your family if you don't need to be.
358
00:15:36.922 --> 00:15:39.152
You don't want to lose all that potential time
359
00:15:39.152 --> 00:15:41.265
you could spend hanging out with your family
360
00:15:41.265 --> 00:15:44.097
by sitting, crowding around the computer
361
00:15:44.097 --> 00:15:47.930
and trying to uninstall, uninstall, uninstall.
362
00:15:51.216 --> 00:15:52.102
So I'm gonna talk a little bit
363
00:15:52.102 --> 00:15:55.336
about some user experience models.
364
00:15:55.336 --> 00:15:56.500
Normally I do a show of hands,
365
00:15:56.500 --> 00:16:00.009
but thank God I can't see past the front row.
366
00:16:00.009 --> 00:16:01.009
Hi Rian, hi.
367
00:16:02.724 --> 00:16:06.086
Otherwise, I'd be panicking, which is awesome.
368
00:16:06.086 --> 00:16:08.478
So what I'm gonna do is talk a little bit
369
00:16:08.478 --> 00:16:11.978
about user stories in the context of these
370
00:16:15.243 --> 00:16:16.613
things that I'm putting on the screen.
371
00:16:16.613 --> 00:16:17.674
The word will come to me later.
372
00:16:17.674 --> 00:16:20.309
I'll shout it in the middle of the night.
373
00:16:20.309 --> 00:16:22.059
So here's an example.
374
00:16:25.139 --> 00:16:27.070
For some of what I've been talking about.
375
00:16:27.070 --> 00:16:29.232
As a user on a sun-lit patio,
376
00:16:29.232 --> 00:16:32.514
I want to be able to read the content and see the controls.
377
00:16:32.514 --> 00:16:35.014
This is a tangible user story.
378
00:16:35.909 --> 00:16:37.793
As a user in bed with a sleeping spouse,
379
00:16:37.793 --> 00:16:39.820
I want to watch a training video in silence
380
00:16:39.820 --> 00:16:42.467
so I can get caught up at work.
381
00:16:42.467 --> 00:16:45.111
In order to clink links as a user with no elbow room
382
00:16:45.111 --> 00:16:48.056
in coach class with a tiny trackpad,
383
00:16:48.056 --> 00:16:49.494
I want click areas to be large enough
384
00:16:49.494 --> 00:16:51.686
and adequately spaced.
385
00:16:51.686 --> 00:16:56.004
I know I'm not the only one who flew here on goat class.
386
00:16:56.004 --> 00:16:58.159
So I didn't even bother pulling out the laptop,
387
00:16:58.159 --> 00:17:00.648
because it's just impossible to use.
388
00:17:00.648 --> 00:17:02.392
As a user distracted by the television,
389
00:17:02.392 --> 00:17:04.312
I want clear headings and labels,
390
00:17:04.312 --> 00:17:06.825
so that I don't lose my place.
391
00:17:06.825 --> 00:17:09.006
Pretty straightforward.
392
00:17:09.006 --> 00:17:12.276
These all feed into some personas.
393
00:17:12.276 --> 00:17:14.137
These user stories help inform these personas.
394
00:17:14.137 --> 00:17:16.846
You might have a different model and a different approach.
395
00:17:16.846 --> 00:17:19.413
I'm not trying to tell you a right or wrong way to do it,
396
00:17:19.413 --> 00:17:21.151
just give you some ideas.
397
00:17:21.151 --> 00:17:24.784
What's great is that Sarah Horton and Whitney Quesenbery
398
00:17:24.784 --> 00:17:28.218
have written a book called A Web for Everyone.
399
00:17:28.218 --> 00:17:31.577
And they have these personas for people with disabilities
400
00:17:31.577 --> 00:17:34.076
that are available free online.
401
00:17:34.076 --> 00:17:35.831
And if you look at the slides, there's a link there
402
00:17:35.831 --> 00:17:37.606
and you can follow it.
403
00:17:37.606 --> 00:17:39.711
And they've done some of this hard work for you.
404
00:17:39.711 --> 00:17:41.491
They've identified some of the disability types
405
00:17:41.491 --> 00:17:44.410
and they've created these personas to support them.
406
00:17:44.410 --> 00:17:46.493
In my experience, though,
407
00:17:47.507 --> 00:17:49.514
personas like these tend to get kicked out
408
00:17:49.514 --> 00:17:51.645
pretty early in the process.
409
00:17:51.645 --> 00:17:53.315
So you're trying to get that number down
410
00:17:53.315 --> 00:17:55.822
to three to five personas, in many cases.
411
00:17:55.822 --> 00:17:58.855
So your blind persona, gone.
412
00:17:58.855 --> 00:18:02.007
Your person in a wheelchair, gone.
413
00:18:02.007 --> 00:18:04.573
So instead what I try to do is I take the personas
414
00:18:04.573 --> 00:18:06.731
that correspond to stakeholders and I fold in
415
00:18:06.731 --> 00:18:08.512
some of those user stories.
416
00:18:08.512 --> 00:18:10.893
Some of those things that they will have
417
00:18:10.893 --> 00:18:12.174
some experience with.
418
00:18:12.174 --> 00:18:14.593
I'm appealing to their inherent selfishness.
419
00:18:14.593 --> 00:18:17.444
So I have a stakeholder who I know is always traveling.
420
00:18:17.444 --> 00:18:19.516
What are some of the things they experience?
421
00:18:19.516 --> 00:18:22.546
Coach class, always having a hand tied up carrying equipment
422
00:18:22.546 --> 00:18:25.697
or holding champagne, if it's first class.
423
00:18:25.697 --> 00:18:27.871
Maybe the sun coming through the window, et cetera,
424
00:18:27.871 --> 00:18:31.052
and I fold those into that person's persona.
425
00:18:31.052 --> 00:18:33.641
A business manager, a purchasing agent, whatever.
426
00:18:33.641 --> 00:18:35.611
I look at the things that person does
427
00:18:35.611 --> 00:18:39.901
in his or her job and I fold those into the persona.
428
00:18:39.901 --> 00:18:42.083
And now what you're doing is you're creating personas
429
00:18:42.083 --> 00:18:44.016
that stakeholders identify with
430
00:18:44.016 --> 00:18:46.780
that have temporary disabilities,
431
00:18:46.780 --> 00:18:49.637
or situational disabilities built into them.
432
00:18:49.637 --> 00:18:50.972
And now they're not getting discarded.
433
00:18:50.972 --> 00:18:53.317
Now you're not having a conversation about,
434
00:18:53.317 --> 00:18:56.392
well, we have a colorblind user, or a low vision user,
435
00:18:56.392 --> 00:18:58.233
so we need to make the contrast higher.
436
00:18:58.233 --> 00:18:59.169
No, no.
437
00:18:59.169 --> 00:19:02.690
Hey Bob, VP of guy who spends the money on this project.
438
00:19:02.690 --> 00:19:05.960
I know that you're working in the golf course a lot,
439
00:19:05.960 --> 00:19:07.499
and it must suck in the sun.
440
00:19:07.499 --> 00:19:08.629
So let's kick the contrast up
441
00:19:08.629 --> 00:19:10.930
so you can actually see the screen.
442
00:19:10.930 --> 00:19:13.073
So I'm appealing to the inherent selfishness
443
00:19:13.073 --> 00:19:15.406
of my clients in many cases.
444
00:19:16.341 --> 00:19:17.352
I'm gonna pivot a bit here
445
00:19:17.352 --> 00:19:19.634
and fly through some technical bits,
446
00:19:19.634 --> 00:19:21.924
because I feel like I'm behind schedule.
447
00:19:21.924 --> 00:19:23.584
Am I behind schedule, yeah whatever.
448
00:19:23.584 --> 00:19:26.906
Nobody's going to lunch, right?
449
00:19:26.906 --> 00:19:27.739
Okay.
450
00:19:29.440 --> 00:19:30.695
I don't need to see the room to know
451
00:19:30.695 --> 00:19:33.195
that's not gonna go over well.
452
00:19:35.529 --> 00:19:37.363
Just gonna run through a series of tips.
453
00:19:37.363 --> 00:19:39.885
Use alternative text on images, please.
454
00:19:39.885 --> 00:19:43.164
In a case where the images disappear,
455
00:19:43.164 --> 00:19:46.264
the alternative text is displayed.
456
00:19:46.264 --> 00:19:48.161
You'll note that there's no text for the kid
457
00:19:48.161 --> 00:19:50.159
happily chasing a soccer ball,
458
00:19:50.159 --> 00:19:51.984
which is a photo we took right before he face-planted
459
00:19:51.984 --> 00:19:53.702
into the grass, by the way.
460
00:19:53.702 --> 00:19:55.035
It was so funny.
461
00:19:56.167 --> 00:19:58.718
But the logo in that upper corner
462
00:19:58.718 --> 00:20:01.628
does have the name of the organization, Buffalo Soccer Club,
463
00:20:01.628 --> 00:20:03.226
an inner city youth soccer program my company
464
00:20:03.226 --> 00:20:04.988
helped found a few years ago for,
465
00:20:04.988 --> 00:20:07.903
now has year-round programs.
466
00:20:07.903 --> 00:20:09.812
And I know nothing about soccer, so it was hilarious.
467
00:20:09.812 --> 00:20:12.330
I also fell on my face.
468
00:20:12.330 --> 00:20:14.278
But all of the other images that were in there
469
00:20:14.278 --> 00:20:16.003
were decorations.
470
00:20:16.003 --> 00:20:17.806
And they can go away and that's no big deal.
471
00:20:17.806 --> 00:20:19.734
But that logo is really important.
472
00:20:19.734 --> 00:20:22.817
So it has important alternative text.
473
00:20:23.809 --> 00:20:26.699
I'm gonna blow through some of these slides,
474
00:20:26.699 --> 00:20:29.463
because you can read them at your leisure.
475
00:20:29.463 --> 00:20:30.597
Oh look, there's a flow chart
476
00:20:30.597 --> 00:20:32.466
on how to choose alternative text.
477
00:20:32.466 --> 00:20:33.679
You can look at that when you want.
478
00:20:33.679 --> 00:20:36.207
It's just a handy reference.
479
00:20:36.207 --> 00:20:37.700
Hyperlinks.
480
00:20:37.700 --> 00:20:39.070
It's not uncommon to have sites
481
00:20:39.070 --> 00:20:42.023
where you cannot identify what on the page is a hyperlink
482
00:20:42.023 --> 00:20:45.006
until you hover over it with your mouse.
483
00:20:45.006 --> 00:20:46.289
Just be smart about that.
484
00:20:46.289 --> 00:20:48.172
Avoid those click here links.
485
00:20:48.172 --> 00:20:51.647
Avoid all caps and emoticons and emojis.
486
00:20:51.647 --> 00:20:53.681
Warn users before opening new windows
487
00:20:53.681 --> 00:20:55.887
and downloading giant files.
488
00:20:55.887 --> 00:20:58.191
Good pagination links.
489
00:20:58.191 --> 00:21:00.120
Try to make the links obvious.
490
00:21:00.120 --> 00:21:01.816
Make the link text consistent.
491
00:21:01.816 --> 00:21:03.686
If you're using an image as a link,
492
00:21:03.686 --> 00:21:07.218
make sure the alt text also makes sense.
493
00:21:07.218 --> 00:21:10.440
Please use link underlines wherever possible.
494
00:21:10.440 --> 00:21:13.565
In this image, the color for link text
495
00:21:13.565 --> 00:21:16.022
is the same as their highlight color.
496
00:21:16.022 --> 00:21:17.474
So if it's orange,
497
00:21:17.474 --> 00:21:20.780
I have it in multiple colorblindness simulators.
498
00:21:20.780 --> 00:21:23.036
But if the color is orange,
499
00:21:23.036 --> 00:21:25.278
that doesn't necessarily mean it's a link.
500
00:21:25.278 --> 00:21:27.668
So whenever possible, consider, you know,
501
00:21:27.668 --> 00:21:28.590
you're not Google.
502
00:21:28.590 --> 00:21:29.925
You're not some special snowflake
503
00:21:29.925 --> 00:21:32.776
where everybody understands what your site is about.
504
00:21:32.776 --> 00:21:34.025
Just use underlines.
505
00:21:34.025 --> 00:21:36.219
It's the quickest and easiest way to make sure
506
00:21:36.219 --> 00:21:38.124
the links are understandable.
507
00:21:38.124 --> 00:21:41.686
And I have some references to WCAG Guidelines, as well.
508
00:21:41.686 --> 00:21:43.103
Use focus styles.
509
00:21:44.874 --> 00:21:47.375
You probably can't tell just by looking at this screen,
510
00:21:47.375 --> 00:21:49.372
but this is an animation of me tabbing through
511
00:21:49.372 --> 00:21:51.952
the Virgin American homepage.
512
00:21:51.952 --> 00:21:53.871
I can't tell where the cursor is at any point
513
00:21:53.871 --> 00:21:55.556
as I'm tabbing through the page.
514
00:21:55.556 --> 00:21:57.897
Oh wait, look, the page scrolled.
515
00:21:57.897 --> 00:22:00.743
I still don't know where I am.
516
00:22:00.743 --> 00:22:02.876
It's an infuriating site that's won a lot of awards
517
00:22:02.876 --> 00:22:05.249
for great design, but is incredibly useless
518
00:22:05.249 --> 00:22:08.635
to anybody who has any kind of impairment.
519
00:22:08.635 --> 00:22:10.828
This is really easy to fix.
520
00:22:10.828 --> 00:22:12.817
Everywhere you have a :hover style,
521
00:22:12.817 --> 00:22:15.364
add the :focus selector onto it, as well.
522
00:22:15.364 --> 00:22:18.750
If you have any libraries that use :focus { outline: none}
523
00:22:18.750 --> 00:22:20.307
kill it, remove it.
524
00:22:20.307 --> 00:22:23.807
As Rian had said earlier, just use the tab key.
525
00:22:23.807 --> 00:22:25.784
First thing you do when you go to a site, start tabbing.
526
00:22:25.784 --> 00:22:29.252
If you can't tell where you are, you've got a problem.
527
00:22:29.252 --> 00:22:31.936
I talked about color contrast, no I didn't.
528
00:22:31.936 --> 00:22:34.376
I did, somebody, whatever.
529
00:22:34.376 --> 00:22:36.788
These are screenshots of that soccer club,
530
00:22:36.788 --> 00:22:39.344
showing it in three different views.
531
00:22:39.344 --> 00:22:41.658
This is, if you have tritanopia,
532
00:22:41.658 --> 00:22:43.991
protanopia, or deuteranopia,
533
00:22:45.267 --> 00:22:47.127
those are three forms of color blindness.
534
00:22:47.127 --> 00:22:49.704
It's important to make sure that there's sufficient contrast
535
00:22:49.704 --> 00:22:53.517
between content and links and navigation items
536
00:22:53.517 --> 00:22:55.388
and menus, et cetera.
537
00:22:55.388 --> 00:22:57.472
And there are some really great tools online
538
00:22:57.472 --> 00:22:59.190
to help walk you through that.
539
00:22:59.190 --> 00:23:01.627
And there are some widgets you can add to your browser
540
00:23:01.627 --> 00:23:04.943
for color blindness simulators,
541
00:23:04.943 --> 00:23:08.960
which you can also add into Adobe Photoshop.
542
00:23:08.960 --> 00:23:11.141
Use the <label> element properly.
543
00:23:11.141 --> 00:23:13.910
If I click the label text next to the field,
544
00:23:13.910 --> 00:23:16.051
the focus should go to the field.
545
00:23:16.051 --> 00:23:18.146
It's just a matter of matching the for attribute
546
00:23:18.146 --> 00:23:20.605
of the label with the ID attribute of the field,
547
00:23:20.605 --> 00:23:22.272
really easy to test.
548
00:23:24.092 --> 00:23:25.692
Use HTML5.
549
00:23:25.692 --> 00:23:27.027
Look, it's a layout.
550
00:23:27.027 --> 00:23:28.314
It's one you're probably familiar with.
551
00:23:28.314 --> 00:23:29.984
You can probably, without thinking too hard,
552
00:23:29.984 --> 00:23:32.743
guess what the HTML5 elements would be,
553
00:23:32.743 --> 00:23:34.533
and oh, you were right.
554
00:23:34.533 --> 00:23:35.676
Use those elements.
555
00:23:35.676 --> 00:23:37.918
They already have nicely built-in support
556
00:23:37.918 --> 00:23:39.526
for screen readers.
557
00:23:39.526 --> 00:23:40.777
If your site is responsive,
558
00:23:40.777 --> 00:23:43.579
for all contexts where we're just talking
559
00:23:43.579 --> 00:23:46.888
about a narrower screen, same thing.
560
00:23:46.888 --> 00:23:49.457
Just HTML5, still applies,
561
00:23:49.457 --> 00:23:51.867
still very valuable for a ton of users.
562
00:23:51.867 --> 00:23:54.885
Try to use only one main element per page.
563
00:23:54.885 --> 00:23:57.406
You could use more than one main element, but don't,
564
00:23:57.406 --> 00:23:59.114
because the exception for that is too long
565
00:23:59.114 --> 00:24:02.205
for me to get into here with the little time I have left.
566
00:24:02.205 --> 00:24:04.295
And I know you all want lunch.
567
00:24:04.295 --> 00:24:06.290
I think you want lunch.
568
00:24:06.290 --> 00:24:08.616
Use headings wisely.
569
00:24:08.616 --> 00:24:10.973
So I have an article with a view,
570
00:24:10.973 --> 00:24:14.945
an outlined view just based on the headings structure.
571
00:24:14.945 --> 00:24:16.636
And even if you can't read the text,
572
00:24:16.636 --> 00:24:18.580
you can see it indents a little bit.
573
00:24:18.580 --> 00:24:20.655
And that's because my heading structure corresponds
574
00:24:20.655 --> 00:24:22.616
to the structure of the content.
575
00:24:22.616 --> 00:24:25.861
H1 for the main title, and then a subsection is an h2,
576
00:24:25.861 --> 00:24:28.415
and a sub to that section is an h3.
577
00:24:28.415 --> 00:24:30.567
And I step back out of it to an h2.
578
00:24:30.567 --> 00:24:32.706
Just use good heading structure.
579
00:24:32.706 --> 00:24:36.327
If you've ever heard about the document outline algorithm,
580
00:24:36.327 --> 00:24:37.476
it's a fiction.
581
00:24:37.476 --> 00:24:38.581
It doesn't exist.
582
00:24:38.581 --> 00:24:40.664
No browser has ever supported it.
583
00:24:40.664 --> 00:24:44.187
So don't think that you can just do h1's all over the place.
584
00:24:44.187 --> 00:24:48.213
That can be problematic for some users.
585
00:24:48.213 --> 00:24:51.546
Know whether you need to use a <button>,
586
00:24:52.525 --> 00:24:55.192
an input-type submit, or an <a>.
587
00:24:56.269 --> 00:24:58.496
You can style them all to look the same.
588
00:24:58.496 --> 00:25:01.068
But that doesn't necessarily mean they are the same.
589
00:25:01.068 --> 00:25:03.359
Don't use a <div> or a <span>.
590
00:25:03.359 --> 00:25:05.339
If the control takes you to another URL,
591
00:25:05.339 --> 00:25:07.769
if you can right-click and open a new window,
592
00:25:07.769 --> 00:25:09.212
use an <a href>.
593
00:25:09.212 --> 00:25:11.043
If it changes something on the current page,
594
00:25:11.043 --> 00:25:13.822
hides something, toggles something, use a <button>.
595
00:25:13.822 --> 00:25:15.982
If it's going to submit form fields,
596
00:25:15.982 --> 00:25:18.190
I recommend input-type submit,
597
00:25:18.190 --> 00:25:20.572
only because button-type submit I find button
598
00:25:20.572 --> 00:25:23.987
usually has some overlap with other styles.
599
00:25:23.987 --> 00:25:25.888
Don't use tab index greater than zero,
600
00:25:25.888 --> 00:25:27.349
otherwise you run into this problem,
601
00:25:27.349 --> 00:25:28.722
where as soon as I start tabbing on the page,
602
00:25:28.722 --> 00:25:30.153
it jumps me down to the CAPTCHA,
603
00:25:30.153 --> 00:25:34.737
because they have tab index 1, 2, 3, and 4 on the CAPTCHA.
604
00:25:34.737 --> 00:25:35.757
Whether or not you use CAPTCHA
605
00:25:35.757 --> 00:25:37.323
is whole different discussion.
606
00:25:37.323 --> 00:25:38.802
Also, don't use CAPTCHA.
607
00:25:38.802 --> 00:25:41.197
(audience laughing)
608
00:25:41.197 --> 00:25:43.614
Okay, that's a good response.
609
00:25:44.478 --> 00:25:46.711
Don't use tab index 1 or greater.
610
00:25:46.711 --> 00:25:48.909
That's the gist of this.
611
00:25:48.909 --> 00:25:52.248
It is okay in some cases to use a tab index of 0.
612
00:25:52.248 --> 00:25:55.528
This is an example of a grid I had to build for a client
613
00:25:55.528 --> 00:25:58.770
where they wanted things to only show on hover,
614
00:25:58.770 --> 00:26:02.193
or make people scroll to see the content.
615
00:26:02.193 --> 00:26:04.216
If you have scrolling content areas on your page,
616
00:26:04.216 --> 00:26:07.823
a keyboard user can't get in there to make it scroll.
617
00:26:07.823 --> 00:26:10.541
A tab index of 0 on that content area
618
00:26:10.541 --> 00:26:12.252
now puts focus on it,
619
00:26:12.252 --> 00:26:13.978
and a keyboard user can use the arrow keys
620
00:26:13.978 --> 00:26:16.254
to scroll up and down and get to the content
621
00:26:16.254 --> 00:26:18.379
that was otherwise hidden.
622
00:26:18.379 --> 00:26:21.233
Please set the lang attribute on html.
623
00:26:21.233 --> 00:26:22.589
Make it look appropriate for the language of the content
624
00:26:22.589 --> 00:26:23.878
on the page.
625
00:26:23.878 --> 00:26:27.844
I have this whole demo here where I show off how
626
00:26:27.844 --> 00:26:31.356
Firefox automatically chooses between commas and decimals
627
00:26:31.356 --> 00:26:33.971
based on your language settings.
628
00:26:33.971 --> 00:26:36.335
But that's like 20 minutes to explain,
629
00:26:36.335 --> 00:26:39.118
and it's not at all interesting.
630
00:26:39.118 --> 00:26:41.277
But do know that it has wonderful benefits
631
00:26:41.277 --> 00:26:42.860
for screen readers.
632
00:26:45.374 --> 00:26:48.252
You can force screeners to say things in the wrong accent,
633
00:26:48.252 --> 00:26:49.260
which is hilarious.
634
00:26:49.260 --> 00:26:52.026
If you want to make like a dance techno German version
635
00:26:52.026 --> 00:26:55.878
of Nic Cage songs, but that's just me.
636
00:26:55.878 --> 00:26:57.530
It's also a separate talk.
637
00:26:57.530 --> 00:27:00.918
If you saw Morton's talk this morning about Grid,
638
00:27:00.918 --> 00:27:02.922
where he talked about flex, et cetera.
639
00:27:02.922 --> 00:27:04.086
Something I want you to keep in mind,
640
00:27:04.086 --> 00:27:06.002
source order matters.
641
00:27:06.002 --> 00:27:07.369
As people tab through the page,
642
00:27:07.369 --> 00:27:11.858
they tab through it in the order of the code in the DOM.
643
00:27:11.858 --> 00:27:15.311
That doesn't mean don't screw around with it,
644
00:27:15.311 --> 00:27:16.913
but we've learned some lessons from floats
645
00:27:16.913 --> 00:27:18.652
and absolute positioning.
646
00:27:18.652 --> 00:27:21.709
Flexbox has that order property which can throw things off,
647
00:27:21.709 --> 00:27:23.136
so please don't use that.
648
00:27:23.136 --> 00:27:24.915
And Grid has the same risk.
649
00:27:24.915 --> 00:27:26.127
So just be careful.
650
00:27:26.127 --> 00:27:27.424
Understand what it will do.
651
00:27:27.424 --> 00:27:30.236
Tab through the page, see the impact.
652
00:27:30.236 --> 00:27:32.745
Definitely don't disable zoom.
653
00:27:32.745 --> 00:27:33.739
You'll never see Bill Murray telling you
654
00:27:33.739 --> 00:27:35.830
that you're awesome.
655
00:27:35.830 --> 00:27:37.663
'Cause you're awesome.
656
00:27:38.772 --> 00:27:40.683
That's my Bill Murray moment.
657
00:27:40.683 --> 00:27:41.898
Yeah, whatever.
658
00:27:41.898 --> 00:27:45.618
If you go into a page, just remove the user-scalable=no
659
00:27:45.618 --> 00:27:48.353
and the maximum-scale=1.0, and looks, it's fixed.
660
00:27:48.353 --> 00:27:51.790
Mobile browsers tend to override it now, anyway.
661
00:27:51.790 --> 00:27:54.634
It's still good practice to get rid of it.
662
00:27:54.634 --> 00:27:56.939
Please avoid infinite scroll.
663
00:27:56.939 --> 00:27:59.062
If you have a footer,
664
00:27:59.062 --> 00:28:01.041
or you have content in the right column,
665
00:28:01.041 --> 00:28:02.701
maybe after that scroll area,
666
00:28:02.701 --> 00:28:04.214
and you want people to be able to get to it
667
00:28:04.214 --> 00:28:06.413
hitting the tab key, they'll never get there.
668
00:28:06.413 --> 00:28:10.011
So I can never get to that grid on the right side
669
00:28:10.011 --> 00:28:11.145
when I'm on this page.
670
00:28:11.145 --> 00:28:12.727
It's infuriating.
671
00:28:12.727 --> 00:28:15.526
It destroys the back button, as well.
672
00:28:15.526 --> 00:28:18.458
You can't share those URLs to a specific place.
673
00:28:18.458 --> 00:28:21.544
Please use captions and subtitles whenever possible.
674
00:28:21.544 --> 00:28:24.039
If you're doing video or audio, transcripts are ace.
675
00:28:24.039 --> 00:28:26.324
Captions and subtitles are ace, as well.
676
00:28:26.324 --> 00:28:30.703
If you've ever used YouTube's automatic captioning feature,
677
00:28:30.703 --> 00:28:32.489
it creates some terrible things.
678
00:28:32.489 --> 00:28:36.239
This one says, "While so long to his Viagra."
679
00:28:37.933 --> 00:28:42.443
This is in Sweden when a guy was introducing me for a talk.
680
00:28:42.443 --> 00:28:44.526
I don't know how he knew.
681
00:28:46.424 --> 00:28:49.999
But the nice thing is there's this site NoMoreCraptions.com
682
00:28:49.999 --> 00:28:52.118
where you can take the auto-generated captions
683
00:28:52.118 --> 00:28:55.876
from YouTube and hack them up, fix them, make the text good.
684
00:28:55.876 --> 00:28:59.139
And it'll output it into all these different file formats.
685
00:28:59.139 --> 00:29:02.195
Really handy if you find yourself doing talks, for example,
686
00:29:02.195 --> 00:29:03.974
grab the YouTube video, autocaption it,
687
00:29:03.974 --> 00:29:05.807
clean it, reupload it.
688
00:29:07.511 --> 00:29:10.073
Everybody uses them, by the way.
689
00:29:10.073 --> 00:29:11.934
Oh look, I have a whole other slide that has some links
690
00:29:11.934 --> 00:29:13.402
to resources to help walk you through
691
00:29:13.402 --> 00:29:15.715
some of these things.
692
00:29:15.715 --> 00:29:17.715
Really quick, I'm just gonna touch a little bit
693
00:29:17.715 --> 00:29:19.212
on ARIA here.
694
00:29:19.212 --> 00:29:21.635
Rian had mentioned it earlier.
695
00:29:21.635 --> 00:29:23.918
For the most part, you don't need to worry about ARIA
696
00:29:23.918 --> 00:29:26.213
unless you're building unique custom elements
697
00:29:26.213 --> 00:29:28.628
that aren't already defined in HTML.
698
00:29:28.628 --> 00:29:32.311
So don't get too excited about ARIA,
699
00:29:32.311 --> 00:29:35.249
because it can be very, very risky.
700
00:29:35.249 --> 00:29:36.524
There are five rules to keep in mind
701
00:29:36.524 --> 00:29:38.811
if you're gonna play with ARIA.
702
00:29:38.811 --> 00:29:40.677
If you can use a native HTML5 element
703
00:29:40.677 --> 00:29:44.009
that already does what you want, then do it.
704
00:29:44.009 --> 00:29:45.718
Use a <button> instead of a <div>
705
00:29:45.718 --> 00:29:47.885
with an unclick, for example.
706
00:29:47.885 --> 00:29:49.852
Don't change native semantics.
707
00:29:49.852 --> 00:29:51.933
If you've got a heading and you want that to be a <button>
708
00:29:51.933 --> 00:29:55.143
don't, it's gonna throw everybody off.
709
00:29:55.143 --> 00:29:58.618
All of your interactive controls that you build with ARIA
710
00:29:58.618 --> 00:30:00.666
must be usable with the keyboard.
711
00:30:00.666 --> 00:30:04.628
They have to be able to perform those same actions.
712
00:30:04.628 --> 00:30:06.566
Definitely don't use a role="presentation"
713
00:30:06.566 --> 00:30:09.814
or aria-hidden="true" if it's a focusable element,
714
00:30:09.814 --> 00:30:12.154
because that means that some users can never actually get
715
00:30:12.154 --> 00:30:14.237
focus on to that element.
716
00:30:15.311 --> 00:30:18.376
And all interactive elements must have an accessible name.
717
00:30:18.376 --> 00:30:19.652
So a button has to have a name.
718
00:30:19.652 --> 00:30:20.725
A link has to have a name.
719
00:30:20.725 --> 00:30:22.523
A tab has to have a name.
720
00:30:22.523 --> 00:30:24.219
And usually it's visible text.
721
00:30:24.219 --> 00:30:27.691
And if possible, you want to convey the current state
722
00:30:27.691 --> 00:30:29.823
and what it is doing at the time.
723
00:30:29.823 --> 00:30:31.797
And again, Rian had shown a little bit of that
724
00:30:31.797 --> 00:30:35.270
with the ARIA expanded example in her talk.
725
00:30:35.270 --> 00:30:37.649
And if you're in the future watching this on YouTube,
726
00:30:37.649 --> 00:30:40.560
you can just go to Rian's talk on YouTube
727
00:30:40.560 --> 00:30:43.045
and catch up on that, as well.
728
00:30:43.045 --> 00:30:46.792
And if you're in the future, I'm sorry.
729
00:30:46.792 --> 00:30:49.368
Definitely one thing, I have this one example
730
00:30:49.368 --> 00:30:52.710
I want to show you on how not to do things.
731
00:30:52.710 --> 00:30:55.374
This <div onclick> event is a problem
732
00:30:55.374 --> 00:30:59.088
because it won't work for a keyboard user.
733
00:30:59.088 --> 00:31:02.514
So I add a tab index, so now a keyboard user can get to it.
734
00:31:02.514 --> 00:31:04.230
The problem is now I need to trap
735
00:31:04.230 --> 00:31:06.207
the keyboard action, as well.
736
00:31:06.207 --> 00:31:09.364
So I have to listen for an onkeypress event.
737
00:31:09.364 --> 00:31:12.480
And at the same time, I then have to make it
738
00:31:12.480 --> 00:31:14.788
not scroll the page because I hit the space bar,
739
00:31:14.788 --> 00:31:16.810
because I think it's maybe a button.
740
00:31:16.810 --> 00:31:19.350
Oh, and then I have to throw a role of button on it,
741
00:31:19.350 --> 00:31:21.935
so it announces itself as a button in the screen reader,
742
00:31:21.935 --> 00:31:25.010
when all along, all I had to do was this.
743
00:31:25.010 --> 00:31:26.697
And it really is that simple.
744
00:31:26.697 --> 00:31:28.660
You don't need to overengineer this stuff.
745
00:31:28.660 --> 00:31:31.136
Most of these things are already built for you.
746
00:31:31.136 --> 00:31:34.136
Wow, I'm gonna go over a little bit.
747
00:31:35.437 --> 00:31:36.736
Eh, whatever.
748
00:31:36.736 --> 00:31:40.903
So I had a whole thing I was gonna say about this,
749
00:31:42.086 --> 00:31:44.600
but mostly you can go watch the video
750
00:31:44.600 --> 00:31:46.517
and see the transcript.
751
00:31:49.487 --> 00:31:53.244
But Rian said something back in March of 2016
752
00:31:53.244 --> 00:31:55.198
that I think is really important.
753
00:31:55.198 --> 00:31:57.898
All new or updated code released into WordPress core
754
00:31:57.898 --> 00:32:01.158
and bundled themes must conform with the WCAG 2.0 guidelines
755
00:32:01.158 --> 00:32:02.905
at level AA.
756
00:32:02.905 --> 00:32:05.766
This is important because those are the standards,
757
00:32:05.766 --> 00:32:08.269
the WCAG 2.0 AA is the standard
758
00:32:08.269 --> 00:32:12.179
that is being recognized by governments, in lawsuits,
759
00:32:12.179 --> 00:32:14.067
by third parties who are getting on board
760
00:32:14.067 --> 00:32:15.486
with accessibility.
761
00:32:15.486 --> 00:32:18.975
If you want stuff to be in core,
762
00:32:18.975 --> 00:32:20.777
you need to follow this, anyway.
763
00:32:20.777 --> 00:32:22.570
So get on board with it and accept this.
764
00:32:22.570 --> 00:32:23.965
I think it's a great statement,
765
00:32:23.965 --> 00:32:27.240
and I think it's awesome that WordPress is doing that.
766
00:32:27.240 --> 00:32:30.157
There's some notes related to that.
767
00:32:33.431 --> 00:32:34.987
There's the accessibility-ready tag,
768
00:32:34.987 --> 00:32:36.735
which you can get for your theme,
769
00:32:36.735 --> 00:32:39.302
including some information on how to make that happen.
770
00:32:39.302 --> 00:32:41.219
Note that all plug-ins,
771
00:32:42.466 --> 00:32:44.471
the accessibility on plug-ins is the responsibility
772
00:32:44.471 --> 00:32:45.989
of the plug-in author.
773
00:32:45.989 --> 00:32:50.330
So as far as I know, there's still no guarantees on that.
774
00:32:50.330 --> 00:32:53.209
I would also like to note Rian Rietveld,
775
00:32:53.209 --> 00:32:55.262
a year-and-a-half ago, was it,
776
00:32:55.262 --> 00:32:57.279
won the Heroes of Accessibility Award
777
00:32:57.279 --> 00:32:59.650
in the Individual Achievement Category.
778
00:32:59.650 --> 00:33:01.283
She doesn't like it when I say this,
779
00:33:01.283 --> 00:33:03.592
but I think we all need to acknowledge.
780
00:33:03.592 --> 00:33:06.759
(audience applauding)
781
00:33:11.593 --> 00:33:14.608
Rian's contribution because of the status of WordPress
782
00:33:14.608 --> 00:33:18.866
has an outsized impact on the web as a whole,
783
00:33:18.866 --> 00:33:19.874
and I think it's awesome.
784
00:33:19.874 --> 00:33:21.449
And I'm glad that she did that.
785
00:33:21.449 --> 00:33:22.826
And as a result, I'm glad I know you,
786
00:33:22.826 --> 00:33:24.998
as opposed to me saying, who?
787
00:33:24.998 --> 00:33:26.781
Who did that?
788
00:33:26.781 --> 00:33:30.487
There are currently 134 accessible-ready themes
789
00:33:30.487 --> 00:33:32.802
that you can just download and work with.
790
00:33:32.802 --> 00:33:34.220
You can just go.
791
00:33:34.220 --> 00:33:36.897
So grab them, ready to go.
792
00:33:36.897 --> 00:33:39.297
There are some plug-ins that are out there now
793
00:33:39.297 --> 00:33:41.791
that have been out there for a while, rather,
794
00:33:41.791 --> 00:33:43.214
that help make things accessible.
795
00:33:43.214 --> 00:33:47.512
I think Access Monitor uses Tenon to do checking.
796
00:33:47.512 --> 00:33:49.594
Nice thing is I was signaled I have five minutes,
797
00:33:49.594 --> 00:33:52.760
and I'm at the wrap-up portion of this thing.
798
00:33:52.760 --> 00:33:55.083
Here's the general message I want everybody to understand
799
00:33:55.083 --> 00:33:56.471
coming out of this,
800
00:33:56.471 --> 00:33:58.461
this whole selfish aspect of it.
801
00:33:58.461 --> 00:34:01.193
Supporting accessibility now is really
802
00:34:01.193 --> 00:34:03.443
working to help future you.
803
00:34:04.377 --> 00:34:05.676
That's what we're talking about.
804
00:34:05.676 --> 00:34:09.524
You're all probably capable of using your equipment today.
805
00:34:09.524 --> 00:34:12.239
But 10 years, 20 years, that might not be the case.
806
00:34:12.239 --> 00:34:14.314
You might be dependent on somebody else.
807
00:34:14.314 --> 00:34:17.786
So getting it in now is gonna help future you.
808
00:34:17.786 --> 00:34:20.326
It also helps the injured version of you,
809
00:34:20.326 --> 00:34:22.054
or the encumbered version of you,
810
00:34:22.054 --> 00:34:23.813
which could be today or next week,
811
00:34:23.813 --> 00:34:25.963
or tomorrow morning, depending on how much you drink
812
00:34:25.963 --> 00:34:28.299
at the party tonight.
813
00:34:28.299 --> 00:34:32.475
Also, get younger developers to help you.
814
00:34:32.475 --> 00:34:34.027
Get them to buy into it now.
815
00:34:34.027 --> 00:34:36.965
Force them, train them, get them interested.
816
00:34:36.965 --> 00:34:40.884
Because once you've moved out of what you're doing today
817
00:34:40.884 --> 00:34:43.868
into a different role, you need other people to support this
818
00:34:43.868 --> 00:34:45.833
and to support future you.
819
00:34:45.833 --> 00:34:47.157
So you have to teach them well.
820
00:34:47.157 --> 00:34:48.655
You have to prepare them for this.
821
00:34:48.655 --> 00:34:51.148
They have to be able to do it well.
822
00:34:51.148 --> 00:34:54.262
I have a couple examples where I wrap up here.
823
00:34:54.262 --> 00:34:57.636
This one is what I call the stairamp.
824
00:34:57.636 --> 00:35:00.450
This is often shown as an example
825
00:35:00.450 --> 00:35:03.323
of how things can be accessible and beautiful.
826
00:35:03.323 --> 00:35:05.826
And what a lot of people who use this in their talks
827
00:35:05.826 --> 00:35:08.554
don't understand is that this is a deathtrap.
828
00:35:08.554 --> 00:35:12.304
This is basically a wheelchair murder device.
829
00:35:13.274 --> 00:35:16.357
The slope on the ramp, way too steep.
830
00:35:18.510 --> 00:35:19.548
Way too steep.
831
00:35:19.548 --> 00:35:22.895
Each one of them ends in a concrete wall,
832
00:35:22.895 --> 00:35:25.317
with the exception of this one, which I believe,
833
00:35:25.317 --> 00:35:29.596
I've been told ends in a pit of crocodiles.
834
00:35:29.596 --> 00:35:31.804
If you are like me and you take stairs two at a time,
835
00:35:31.804 --> 00:35:33.069
it's hilarious.
836
00:35:33.069 --> 00:35:36.071
It's step, step, stumble, step, step, stumble.
837
00:35:36.071 --> 00:35:39.626
This is a deathtrap, it really is.
838
00:35:39.626 --> 00:35:40.997
What's important to note, though,
839
00:35:40.997 --> 00:35:42.676
is this was built based on a checklist.
840
00:35:42.676 --> 00:35:45.362
Somebody said we need to get a ramp into those stairs.
841
00:35:45.362 --> 00:35:46.626
And they followed that checklist.
842
00:35:46.626 --> 00:35:48.311
There's a ramp.
843
00:35:48.311 --> 00:35:49.826
That's not what accessibility is.
844
00:35:49.826 --> 00:35:51.307
It's not just a checklist.
845
00:35:51.307 --> 00:35:53.190
There's so much more that needs to happen.
846
00:35:53.190 --> 00:35:56.429
There's an aspect of maintenance that's involved here.
847
00:35:56.429 --> 00:35:58.377
So a friend of mine who uses a wheelchair
848
00:35:58.377 --> 00:36:00.937
was going to his pharmacy.
849
00:36:00.937 --> 00:36:03.341
And when he got to the ramp to wheel himself
850
00:36:03.341 --> 00:36:06.307
into the pharmacy, he noticed that they put a potted tree
851
00:36:06.307 --> 00:36:08.084
on the ramp.
852
00:36:08.084 --> 00:36:09.573
So they shoveled all the other parts,
853
00:36:09.573 --> 00:36:11.968
but they put a potted tree on the ramp.
854
00:36:11.968 --> 00:36:13.749
He could no longer get into the pharmacy.
855
00:36:13.749 --> 00:36:16.451
I mean, good for them, they built a ramp.
856
00:36:16.451 --> 00:36:17.284
Checklist.
857
00:36:18.358 --> 00:36:20.288
But they didn't think about how to maintain it.
858
00:36:20.288 --> 00:36:22.975
And sometimes maintenance is really nothing more
859
00:36:22.975 --> 00:36:26.194
than just not breaking the crap you've already built.
860
00:36:26.194 --> 00:36:27.456
Really can be that simple.
861
00:36:27.456 --> 00:36:29.094
It's an ongoing process.
862
00:36:29.094 --> 00:36:30.432
And when you build it right the first time,
863
00:36:30.432 --> 00:36:34.547
you don't need to stress about it going forward.
864
00:36:34.547 --> 00:36:36.919
I have a ton of links in here at the end,
865
00:36:36.919 --> 00:36:40.520
a pile of resources that you can read at your leisure.
866
00:36:40.520 --> 00:36:43.092
Again, maybe over drinks, I don't know.
867
00:36:43.092 --> 00:36:46.366
And if I recall correctly, that's my entire talk.
868
00:36:46.366 --> 00:36:49.533
(audience applauding)
869
00:36:50.897 --> 00:36:51.730
I'm done.
870
00:36:52.723 --> 00:36:54.223
That's 121 slides.
871
00:36:56.684 --> 00:37:00.005
We have time for half a question.
872
00:37:00.005 --> 00:37:02.338
Um, are you gonna be around?
873
00:37:02.338 --> 00:37:03.299
Yeah, I'm gonna be around.
874
00:37:03.299 --> 00:37:04.238
Are you gonna have a lunch?
875
00:37:04.238 --> 00:37:05.150
I'm gonna have lunch.
876
00:37:05.150 --> 00:37:07.389
You gonna be that expert by coming to the party?
877
00:37:07.389 --> 00:37:08.365
What?
878
00:37:08.365 --> 00:37:09.326
Coming to the party?
879
00:37:09.326 --> 00:37:10.316
Tonight?
Yeah.
880
00:37:10.316 --> 00:37:11.238
Yeah.
881
00:37:11.238 --> 00:37:12.515
All right, shall we do questions at the party
882
00:37:12.515 --> 00:37:14.468
and have lunch now?
883
00:37:14.468 --> 00:37:15.804
We could do, you know.
884
00:37:15.804 --> 00:37:16.785
Sound good?
885
00:37:16.785 --> 00:37:18.615
Or if there are quick questions on the floor?
886
00:37:18.615 --> 00:37:20.605
One last call for questions on the floor?
887
00:37:20.605 --> 00:37:24.400
Raise your hands or go to a microphone.
888
00:37:24.400 --> 00:37:25.707
Lunchtime it is.
889
00:37:25.707 --> 00:37:26.744
Thank you very much, Adrian.
890
00:37:26.744 --> 00:37:28.161
Thank you--
Bye!