WEBVTT
1
00:00:02.921 --> 00:00:03.754
Okay.
2
00:00:03.754 --> 00:00:05.925
So I'm going to dive right in.
3
00:00:05.925 --> 00:00:08.373
Thank you for coming to my talk.
4
00:00:08.373 --> 00:00:10.857
I know you have a wonderful selection
5
00:00:10.857 --> 00:00:13.994
of accessibility talks in this time slot.
6
00:00:13.994 --> 00:00:17.602
So, clearly this is the one that still had seats available.
7
00:00:17.602 --> 00:00:20.957
I have, if you follow me on Twitter at all,
8
00:00:20.957 --> 00:00:24.651
I'm sorry but I noted that I had 108 slides
9
00:00:24.651 --> 00:00:27.353
in 40 minutes and after a lot of work
10
00:00:27.353 --> 00:00:30.504
I've gotten it down to 120 slides.
11
00:00:30.504 --> 00:00:34.153
So we're going to see how many of those I get through.
12
00:00:34.153 --> 00:00:35.658
To manage your expectations,
13
00:00:35.658 --> 00:00:39.956
all of my slides will be available online later.
14
00:00:39.956 --> 00:00:42.095
(muffled speaking)
15
00:00:42.095 --> 00:00:44.034
So again, at the end of my talk.
16
00:00:44.034 --> 00:00:46.828
That's Roselli, R-O-S-E-L dot L-I
17
00:00:46.828 --> 00:00:49.855
slash W-C-L-D-N.
18
00:00:49.855 --> 00:00:51.924
And I'm saying this now partly because,
19
00:00:51.924 --> 00:00:54.462
as I manage my own time,
20
00:00:54.462 --> 00:00:56.493
I have a whole chunk of slides
21
00:00:56.493 --> 00:00:57.634
that I'm just gonna fly through
22
00:00:57.634 --> 00:01:00.072
because they're mostly technical stuff.
23
00:01:00.072 --> 00:01:02.141
And the nice thing about technical stuff is
24
00:01:02.141 --> 00:01:05.320
it's so boring that you guys can read it on your own time
25
00:01:05.320 --> 00:01:08.413
and when you fall asleep, I won't be personally hurt
26
00:01:08.413 --> 00:01:10.290
or emotionally traumatized.
27
00:01:10.290 --> 00:01:12.870
I really thought it would come to that point obviously.
28
00:01:12.870 --> 00:01:14.747
(audience laughs)
29
00:01:14.747 --> 00:01:16.830
Such an auspicious start.
30
00:01:17.886 --> 00:01:19.646
Quick question.
31
00:01:19.646 --> 00:01:22.266
How many people here use WordPress
32
00:01:22.266 --> 00:01:24.516
for CMS or a blog platform?
33
00:01:26.387 --> 00:01:27.651
That's good, okay.
34
00:01:27.651 --> 00:01:29.098
Most of you.
35
00:01:29.098 --> 00:01:31.719
How many of you use, in addition to WordPress,
36
00:01:31.719 --> 00:01:34.320
some other platform besides WordPress
37
00:01:34.320 --> 00:01:36.487
as a blog or CMS platform.
38
00:01:37.846 --> 00:01:40.662
Okay, usually I see a much higher ratio.
39
00:01:40.662 --> 00:01:42.233
Part of the reason I always ask that question
40
00:01:42.233 --> 00:01:43.460
is because I'm going to be talking to you
41
00:01:43.460 --> 00:01:46.104
about things that apply regardless of platform.
42
00:01:46.104 --> 00:01:47.937
There's a ton in here about WordPress,
43
00:01:47.937 --> 00:01:50.384
but I am gonna be talking a little bit
44
00:01:50.384 --> 00:01:51.801
broader than that.
45
00:01:51.801 --> 00:01:55.652
So, really quick, this slide is dedicated to my ego.
46
00:01:55.652 --> 00:01:56.578
Yay.
47
00:01:56.578 --> 00:01:58.156
I have a website.
48
00:01:58.156 --> 00:02:00.705
I only put it here because I write on accessibility
49
00:02:00.705 --> 00:02:03.842
pretty regularly, so AdrianRoselli.com.
50
00:02:03.842 --> 00:02:07.493
And then people tend to avoid me on Twitter @aardrian.
51
00:02:07.493 --> 00:02:12.268
That's A-A-R-D-R-I-A-N (mumbles).
52
00:02:12.268 --> 00:02:14.084
I'm here because the Paciello Group
53
00:02:14.084 --> 00:02:15.761
was able to pay for me to come here.
54
00:02:15.761 --> 00:02:18.846
Otherwise I couldn't afford to fly across an ocean
55
00:02:18.846 --> 00:02:22.234
to tell you all these lovely, wonderful things.
56
00:02:22.234 --> 00:02:24.010
So, right off the bat.
57
00:02:24.010 --> 00:02:27.590
Some of you have probably seen the a11y hashtag
58
00:02:27.590 --> 00:02:30.933
or seen it used, maybe not on Twitter or elsewhere.
59
00:02:30.933 --> 00:02:33.793
And it's not uncommon for people to say what is that.
60
00:02:33.793 --> 00:02:36.703
What is ally, who is ally, what does ally mean?
61
00:02:36.703 --> 00:02:38.125
So, real quick.
62
00:02:38.125 --> 00:02:41.415
Accessibility, A-1-1-Y means accessibility.
63
00:02:41.415 --> 00:02:42.919
It's just a numeronym.
64
00:02:42.919 --> 00:02:46.193
It's a pretty common technique in some communities
65
00:02:46.193 --> 00:02:48.174
where you just remove all the middle letters
66
00:02:48.174 --> 00:02:51.154
and you replace it a couple characters.
67
00:02:51.154 --> 00:02:53.270
So localization is L-10-N,
68
00:02:53.270 --> 00:02:55.699
internationalization is I-18-N.
69
00:02:55.699 --> 00:02:59.570
When you see A-1-1-Y, or A-11-Y, or a11y,
70
00:02:59.570 --> 00:03:04.183
it means accessibility in almost all those cases.
71
00:03:04.183 --> 00:03:05.737
The thing about accessibility though
72
00:03:05.737 --> 00:03:06.943
as I've discovered over the years
73
00:03:06.943 --> 00:03:09.159
is that it typically gets no respect.
74
00:03:09.159 --> 00:03:10.247
It's sort of an afterthought,
75
00:03:10.247 --> 00:03:13.094
it's a thing people aren't really too interested in.
76
00:03:13.094 --> 00:03:16.004
When I had my own company, and we were using the offices,
77
00:03:16.004 --> 00:03:19.129
we were going for colors to paint everything.
78
00:03:19.129 --> 00:03:22.135
That nice blue is called online blue.
79
00:03:22.135 --> 00:03:24.253
Lime green, I don't know why they call it that.
80
00:03:24.253 --> 00:03:26.321
The ceiling was hyperspace gray,
81
00:03:26.321 --> 00:03:29.379
you know, real high-tech sounding terms.
82
00:03:29.379 --> 00:03:31.212
Oh yeah, we moved out.
83
00:03:32.674 --> 00:03:34.738
But, accessible beige.
84
00:03:34.738 --> 00:03:37.212
(audience laughs)
85
00:03:37.212 --> 00:03:39.578
So the color of computers.
86
00:03:39.578 --> 00:03:42.115
You know, old IBM computers from the 1980s,
87
00:03:42.115 --> 00:03:43.780
that was the color that my partners
88
00:03:43.780 --> 00:03:45.639
wanted to paint my office because
89
00:03:45.639 --> 00:03:47.452
I did the accessibility stuff and they thought,
90
00:03:47.452 --> 00:03:48.869
accessible beige.
91
00:03:50.189 --> 00:03:51.244
Buncha jerks.
92
00:03:51.244 --> 00:03:52.777
(audience laughs)
93
00:03:52.777 --> 00:03:55.127
So these are the things we're gonna run through.
94
00:03:55.127 --> 00:03:57.090
Some statistics just to give you a little bit of grounding.
95
00:03:57.090 --> 00:03:58.903
I'm gonna fly through those though.
96
00:03:58.903 --> 00:04:02.103
I'm gonna talk about this whole concept of being selfish.
97
00:04:02.103 --> 00:04:03.549
The technical bits, that's probably the part
98
00:04:03.549 --> 00:04:06.711
I'm gonna skip the most, just so ya know.
99
00:04:06.711 --> 00:04:08.714
So, statistics, right off.
100
00:04:08.714 --> 00:04:12.556
These are U.S., this particular slide is U.S.-focused.
101
00:04:12.556 --> 00:04:15.884
Because if you haven't figured out by my accent,
102
00:04:15.884 --> 00:04:18.359
yes, I'm from the United States.
103
00:04:18.359 --> 00:04:20.876
I don't know if that was obvious, I'll just keep talking.
104
00:04:20.876 --> 00:04:22.209
So, in the U.S.,
105
00:04:23.799 --> 00:04:25.484
any disability, when we look at the numbers
106
00:04:25.484 --> 00:04:27.767
for who has any type of disability,
107
00:04:27.767 --> 00:04:30.242
which includes visual, hearing, mobility, cognitive,
108
00:04:30.242 --> 00:04:34.060
we're looking at, in that age range of 21-64,
109
00:04:34.060 --> 00:04:35.794
10% of the population.
110
00:04:35.794 --> 00:04:39.420
You'll note that in the 75 and up age,
111
00:04:39.420 --> 00:04:40.837
it hits 50%.
112
00:04:41.703 --> 00:04:44.176
Sort of a theme that happens.
113
00:04:44.176 --> 00:04:47.009
Worldwide, 285 million people have
114
00:04:47.932 --> 00:04:50.834
some sort of vision impairment.
115
00:04:50.834 --> 00:04:53.500
And 82% of those people living with blindness
116
00:04:53.500 --> 00:04:55.036
are 50 and above.
117
00:04:55.036 --> 00:04:57.127
There's a bit of an age factor there as well
118
00:04:57.127 --> 00:04:59.687
as we see from some of these other stats.
119
00:04:59.687 --> 00:05:03.075
Hearing impairments affect 360 million people worldwide.
120
00:05:03.075 --> 00:05:04.978
That's disabling hearing loss.
121
00:05:04.978 --> 00:05:06.898
That means that they really do need help
122
00:05:06.898 --> 00:05:09.906
to get by in say an event like this
123
00:05:09.906 --> 00:05:12.658
where you're socializing with a room full of other people
124
00:05:12.658 --> 00:05:14.471
who are also socializing,
125
00:05:14.471 --> 00:05:18.076
all of whom have more interesting things to say.
126
00:05:18.076 --> 00:05:21.274
So, 36 million American adults
127
00:05:21.274 --> 00:05:24.284
report some degree of hearing loss.
128
00:05:24.284 --> 00:05:27.783
Mobility impairments, relatively low as you're younger
129
00:05:27.783 --> 00:05:29.212
but they tend to increase.
130
00:05:29.212 --> 00:05:30.450
So, five and a half percent
131
00:05:30.450 --> 00:05:33.692
in the 21-64 year old age bracket in the U.S.,
132
00:05:33.692 --> 00:05:38.042
goes up to a third of the population that are 75 and older.
133
00:05:38.042 --> 00:05:40.711
Cognitive impairments are always a little bit trickier
134
00:05:40.711 --> 00:05:42.546
for people to sort of get their arms around.
135
00:05:42.546 --> 00:05:44.699
It includes, this is just some of them,
136
00:05:44.699 --> 00:05:48.177
dyslexia, dyscalculia, which is the numbers version
137
00:05:48.177 --> 00:05:51.036
of dyslexia, to simplify it.
138
00:05:51.036 --> 00:05:55.922
Memory issues, distractions, the list goes on and on and on.
139
00:05:55.922 --> 00:06:00.089
In the U.S., that number is about 4.3% of the
140
00:06:01.212 --> 00:06:02.663
population in my age bracket,
141
00:06:02.663 --> 00:06:04.796
and then again continues to climb.
142
00:06:04.796 --> 00:06:07.100
But one thing I've learned is that
143
00:06:07.100 --> 00:06:09.340
showing the stats doesn't really make the case.
144
00:06:09.340 --> 00:06:11.309
I show the stats because I want people to understand
145
00:06:11.309 --> 00:06:15.271
first and foremost this is a real population of people.
146
00:06:15.271 --> 00:06:17.703
If you're more like me, you don't care.
147
00:06:17.703 --> 00:06:19.559
Screw them, I really don't care.
148
00:06:19.559 --> 00:06:22.028
My whole treatise is about being selfish.
149
00:06:22.028 --> 00:06:23.736
So that's what I'm here to talk to you about.
150
00:06:23.736 --> 00:06:26.919
If you were in Heather Burns' talk earlier today,
151
00:06:26.919 --> 00:06:29.478
you might have seen this pyramid,
152
00:06:29.478 --> 00:06:31.439
and if you weren't, cool, now you get to see it
153
00:06:31.439 --> 00:06:32.892
for the first time I guess.
154
00:06:32.892 --> 00:06:34.876
So WebAIM is an organization called
155
00:06:34.876 --> 00:06:36.540
Web Accessibility in Mind,
156
00:06:36.540 --> 00:06:39.420
and they have this hierarchy that they see
157
00:06:39.420 --> 00:06:41.680
as motivating accessibility change.
158
00:06:41.680 --> 00:06:44.391
And, when you start off by guilting people,
159
00:06:44.391 --> 00:06:46.354
you're not going to be as effective.
160
00:06:46.354 --> 00:06:48.956
Punishment means that they've already done something
161
00:06:48.956 --> 00:06:52.519
and that just creates a bad relationship afterward.
162
00:06:52.519 --> 00:06:54.119
You make it a requirement, they'll do it,
163
00:06:54.119 --> 00:06:56.487
but they're not necessarily so interested.
164
00:06:56.487 --> 00:06:58.492
If you start to reward people then they
165
00:06:58.492 --> 00:07:01.519
start to pick it up a little bit more.
166
00:07:01.519 --> 00:07:03.335
You wanna work to get them enlightened,
167
00:07:03.335 --> 00:07:05.895
and ultimately you want them to be inspired.
168
00:07:05.895 --> 00:07:08.259
You want them to just know it as the right thing to do
169
00:07:08.259 --> 00:07:10.439
and feel that's something that sets them apart
170
00:07:10.439 --> 00:07:11.996
and the product.
171
00:07:11.996 --> 00:07:14.535
I, again, am wired very selfishly.
172
00:07:14.535 --> 00:07:15.772
So I modified it.
173
00:07:15.772 --> 00:07:17.394
I put a star on top of this tree.
174
00:07:17.394 --> 00:07:18.994
(audience laughs)
175
00:07:18.994 --> 00:07:22.383
And it's all about making it about me.
176
00:07:22.383 --> 00:07:24.626
So, you might have been in some talks already
177
00:07:24.626 --> 00:07:29.191
or heard people talking about the users, not this guy.
178
00:07:29.191 --> 00:07:31.026
So, to run through some of these things.
179
00:07:31.026 --> 00:07:35.058
Getting older affects nearly everybody.
180
00:07:35.058 --> 00:07:36.530
Except those who are fortunate enough
181
00:07:36.530 --> 00:07:39.751
to not have to get older, I should really rethink that.
182
00:07:39.751 --> 00:07:43.504
So, it does carry risks and side effects, as I note.
183
00:07:43.504 --> 00:07:44.914
And it's definitely not for the young,
184
00:07:44.914 --> 00:07:47.538
as evidenced by how few young people are old.
185
00:07:47.538 --> 00:07:50.439
(audience laughs)
186
00:07:50.439 --> 00:07:53.959
The only thing separating these two couples
187
00:07:53.959 --> 00:07:56.391
besides about four feet
188
00:07:56.391 --> 00:07:59.058
is probably 30, 40 years.
189
00:07:59.058 --> 00:08:01.426
But, really they're doing the same thing.
190
00:08:01.426 --> 00:08:02.684
They're living the same life.
191
00:08:02.684 --> 00:08:04.498
They're both arguing about probably where
192
00:08:04.498 --> 00:08:06.226
they're going to go get some food next.
193
00:08:06.226 --> 00:08:08.166
I don't know for sure.
194
00:08:08.166 --> 00:08:10.279
The only thing separating these two women besides
195
00:08:10.279 --> 00:08:12.434
the fact that one of them is using a solar-powered
196
00:08:12.434 --> 00:08:17.020
piece of technology, is probably about 40 years again.
197
00:08:17.020 --> 00:08:18.748
They're doing the same thing.
198
00:08:18.748 --> 00:08:20.946
They're hanging out, they're reading.
199
00:08:20.946 --> 00:08:23.783
Well, she might be Tweeting, I don't know.
200
00:08:23.783 --> 00:08:25.490
But conceptually they're doing the same thing.
201
00:08:25.490 --> 00:08:28.626
The only difference for them is age.
202
00:08:28.626 --> 00:08:31.354
Really not that different.
203
00:08:31.354 --> 00:08:33.657
Accidents happen to people.
204
00:08:33.657 --> 00:08:35.260
A lot.
205
00:08:35.260 --> 00:08:36.494
I am evidence of that.
206
00:08:36.494 --> 00:08:38.887
I could show you the row of scars across my head
207
00:08:38.887 --> 00:08:40.679
and all the other things I've broken over the years
208
00:08:40.679 --> 00:08:42.087
but then it gets kinda weird,
209
00:08:42.087 --> 00:08:44.903
and I might be in violation of the code of conduct.
210
00:08:44.903 --> 00:08:47.548
So, accidents come in the form of everything like
211
00:08:47.548 --> 00:08:49.808
broken limbs, eye injuries,
212
00:08:49.808 --> 00:08:53.159
hearing injuries, head trauma, et cetera.
213
00:08:53.159 --> 00:08:56.722
If you've ever broken a wrist and tried to use a computer
214
00:08:56.722 --> 00:08:58.066
you realize how quickly
215
00:08:58.066 --> 00:09:01.436
rather you quickly realize how difficult it is
216
00:09:01.436 --> 00:09:03.058
to do things like operate the mouse,
217
00:09:03.058 --> 00:09:05.468
use the keyboard, close the lid.
218
00:09:05.468 --> 00:09:09.635
Actually click save instead of reply at the wrong time.
219
00:09:10.844 --> 00:09:13.746
Sometimes just having a temporary vision problem
220
00:09:13.746 --> 00:09:16.156
means that you lose your depth perception
221
00:09:16.156 --> 00:09:17.202
and instead of grabbing the mouse
222
00:09:17.202 --> 00:09:19.314
you end up pushing it off the table.
223
00:09:19.314 --> 00:09:20.743
Hilarious.
224
00:09:20.743 --> 00:09:21.895
And now that they're all wireless,
225
00:09:21.895 --> 00:09:23.065
now you have to go hunting for it,
226
00:09:23.065 --> 00:09:25.522
you can't just reel it in.
227
00:09:25.522 --> 00:09:28.999
Some people do it as a fashion choice, okay.
228
00:09:28.999 --> 00:09:31.193
Some people arguably
229
00:09:31.193 --> 00:09:34.759
might start an activity with a cognitive issue.
230
00:09:34.759 --> 00:09:36.679
But they definitely end with more issues.
231
00:09:36.679 --> 00:09:38.897
(audience laughs)
232
00:09:38.897 --> 00:09:41.927
That wheel of cheese that they're chasing down a hill
233
00:09:41.927 --> 00:09:45.255
by the way is a tradition somewhere in this country.
234
00:09:45.255 --> 00:09:49.500
You all should know better than I, I hope, cause I forgot.
235
00:09:49.500 --> 00:09:51.181
Anyway what's interesting about this
236
00:09:51.181 --> 00:09:53.127
is at the bottom of the hill they have a team
237
00:09:53.127 --> 00:09:55.068
of ambulances waiting.
238
00:09:55.068 --> 00:09:56.220
(audience laughs)
239
00:09:56.220 --> 00:09:59.379
It's not a function of if somebody gets hurt.
240
00:09:59.379 --> 00:10:02.386
After every one of these somebody walks away
241
00:10:02.386 --> 00:10:04.196
temporarily disabled.
242
00:10:04.196 --> 00:10:08.060
Maybe from, depending on whether or not they got the cheese.
243
00:10:08.060 --> 00:10:09.468
(audience laughs)
244
00:10:09.468 --> 00:10:12.135
If, like me, you believe that you are invincible,
245
00:10:12.135 --> 00:10:13.539
and allergic to nothing,
246
00:10:13.539 --> 00:10:15.442
then there are other things you have to bear in mind.
247
00:10:15.442 --> 00:10:16.487
Multi-tasking.
248
00:10:16.487 --> 00:10:18.258
Sunlight can be a great weakness.
249
00:10:18.258 --> 00:10:20.262
Eating at your desk, not having headphones handy.
250
00:10:20.262 --> 00:10:23.036
Just not even working in your native language.
251
00:10:23.036 --> 00:10:25.490
And I thought my native language was English
252
00:10:25.490 --> 00:10:27.127
until I came here.
253
00:10:27.127 --> 00:10:28.668
So that's awkward.
254
00:10:28.668 --> 00:10:31.824
But this is how I spend a lot of my days.
255
00:10:31.824 --> 00:10:36.391
I try not to get a taco filling bits into my keyboard
256
00:10:36.391 --> 00:10:39.058
because it's a laptop and you can't just shake,
257
00:10:39.058 --> 00:10:40.225
it's very bad.
258
00:10:41.191 --> 00:10:44.391
I like to sit on my patio or on my porch
259
00:10:44.391 --> 00:10:46.887
and if you've ever used a phone in the sun,
260
00:10:46.887 --> 00:10:49.532
or tried to work in the sun, it's really difficult.
261
00:10:49.532 --> 00:10:50.960
You're turning the brightness all the way up,
262
00:10:50.960 --> 00:10:52.628
and then how long does your battery last.
263
00:10:52.628 --> 00:10:54.946
Oh, it already ran out.
264
00:10:54.946 --> 00:10:57.354
These guys I think are professionals.
265
00:10:57.354 --> 00:10:58.978
(audience laughs)
266
00:10:58.978 --> 00:11:01.346
I would like to point out, though, that neither of them
267
00:11:01.346 --> 00:11:04.162
has a free hand to actually use the computer.
268
00:11:04.162 --> 00:11:05.975
(audience laughs)
269
00:11:05.975 --> 00:11:07.170
But they brought the tarp.
270
00:11:07.170 --> 00:11:09.858
I mean these guys are on top of it, but this is a function
271
00:11:09.858 --> 00:11:11.778
of they're not just in the sun,
272
00:11:11.778 --> 00:11:14.402
they're distracted, they're doing other things.
273
00:11:14.402 --> 00:11:17.559
And if, by chance they had to use email or fill out
274
00:11:17.559 --> 00:11:20.802
an online application or sign up for a bank account,
275
00:11:20.802 --> 00:11:23.596
you know nine times out of 10 they're doing it wrong.
276
00:11:23.596 --> 00:11:25.217
Every keystroke.
277
00:11:25.217 --> 00:11:27.753
This guy's my favorite though.
278
00:11:27.753 --> 00:11:29.143
I would like to point out, part of the reason
279
00:11:29.143 --> 00:11:32.018
he's my favorite is because his laptop is a typewriter.
280
00:11:32.018 --> 00:11:34.004
(audience laughs)
281
00:11:34.004 --> 00:11:36.352
Solar powered, baby.
282
00:11:36.352 --> 00:11:39.447
Sometimes you find that you're working in a public space
283
00:11:39.447 --> 00:11:41.708
because it's the only option you have.
284
00:11:41.708 --> 00:11:44.140
I can tell you, the Airbnb flat that I have right now
285
00:11:44.140 --> 00:11:46.060
is a little too small.
286
00:11:46.060 --> 00:11:47.810
So I will probably be working in cafes
287
00:11:47.810 --> 00:11:49.643
for the next few days.
288
00:11:50.690 --> 00:11:53.416
This is a case where the headphones become really important.
289
00:11:53.416 --> 00:11:54.764
He's doing video work.
290
00:11:54.764 --> 00:11:55.980
It's very hard to do video work
291
00:11:55.980 --> 00:11:57.280
when there's a lot of background noise
292
00:11:57.280 --> 00:11:59.116
because, well, you can't hear anything.
293
00:11:59.116 --> 00:12:00.524
And maybe you don't want everybody
294
00:12:00.524 --> 00:12:02.633
to hear what you're up to anyway.
295
00:12:02.633 --> 00:12:04.663
Also the consideration of having a significant other
296
00:12:04.663 --> 00:12:05.922
in bed with you.
297
00:12:05.922 --> 00:12:06.944
(audience laughs)
298
00:12:06.944 --> 00:12:08.140
I work in bed.
299
00:12:08.140 --> 00:12:10.060
I don't know that I would wanna wake up a dog that big
300
00:12:10.060 --> 00:12:13.154
because I'm watching a video or dictating something
301
00:12:13.154 --> 00:12:14.690
or just shouting at my computer
302
00:12:14.690 --> 00:12:17.909
because the error messages are so arcane.
303
00:12:17.909 --> 00:12:22.796
This photo is kind of analogous to my how I live.
304
00:12:22.796 --> 00:12:24.373
I don't live in apartments,
305
00:12:24.373 --> 00:12:28.002
but I do live somewhere where I am flanked by motorcycles,
306
00:12:28.002 --> 00:12:29.751
and on the weekends these guys
307
00:12:29.751 --> 00:12:31.735
like to have motorcycle duels.
308
00:12:31.735 --> 00:12:35.340
They wanna show whose motorcycle is louder and throatier.
309
00:12:35.340 --> 00:12:37.598
And if I am trying to do any work
310
00:12:37.598 --> 00:12:39.564
that's very much a problem.
311
00:12:39.564 --> 00:12:41.484
It also explains why I have closed captions
312
00:12:41.484 --> 00:12:44.343
on my television permanently.
313
00:12:44.343 --> 00:12:45.751
I never know when they're gonna start it up,
314
00:12:45.751 --> 00:12:47.522
and it's usually during like the critical scene
315
00:12:47.522 --> 00:12:50.782
of Mighty Morphin' Power Rangers.
316
00:12:50.782 --> 00:12:54.775
I have been this person in a foreign country
317
00:12:54.775 --> 00:12:57.611
trying to look up information about the flight
318
00:12:57.611 --> 00:13:00.446
that might have been canceled on a keyboard
319
00:13:00.446 --> 00:13:02.583
that has characters I don't recognize,
320
00:13:02.583 --> 00:13:04.690
looking at a website that is localized
321
00:13:04.690 --> 00:13:08.983
for the region I'm in as opposed to the language I speak.
322
00:13:08.983 --> 00:13:10.796
And all of a sudden, I feel like I have
323
00:13:10.796 --> 00:13:12.332
a cognitive disability because
324
00:13:12.332 --> 00:13:13.612
I don't know what I'm looking at.
325
00:13:13.612 --> 00:13:15.319
It makes no sense to me.
326
00:13:15.319 --> 00:13:17.643
This happens more often than I think
327
00:13:17.643 --> 00:13:20.162
people are really willing to admit,
328
00:13:20.162 --> 00:13:22.466
and if you, from my experience,
329
00:13:22.466 --> 00:13:24.535
just bouncing around Europe and Southeast Asia,
330
00:13:24.535 --> 00:13:26.860
when I go into any place that has these public terminals,
331
00:13:26.860 --> 00:13:29.483
there are a lot of really confused people sitting at them.
332
00:13:29.483 --> 00:13:32.876
They're not locals, they're just confused.
333
00:13:32.876 --> 00:13:35.010
Another thing to consider though is that
334
00:13:35.010 --> 00:13:36.885
if you're in this room you probably have
335
00:13:36.885 --> 00:13:39.148
some comfort level with technology,
336
00:13:39.148 --> 00:13:42.199
which means that when it comes to family events,
337
00:13:42.199 --> 00:13:45.591
the holidays, you might be tech support.
338
00:13:45.591 --> 00:13:46.850
That sucks.
339
00:13:46.850 --> 00:13:48.279
I don't like going to my parents house
340
00:13:48.279 --> 00:13:50.071
and changing printer paper and printer cartridges
341
00:13:50.071 --> 00:13:53.378
and updating all the software on their machine
342
00:13:53.378 --> 00:13:55.485
and, you know, doing all the Windows checks,
343
00:13:55.485 --> 00:13:58.711
and reboots galore, I just wanna eat the turkey.
344
00:13:58.711 --> 00:14:00.204
It's a simple goal.
345
00:14:00.204 --> 00:14:01.037
So, if you
346
00:14:02.274 --> 00:14:05.431
if you're in a situation where you're always helping
347
00:14:05.431 --> 00:14:07.841
other people, you might start to recognize
348
00:14:07.841 --> 00:14:09.548
that if the interfaces were a little bit easier
349
00:14:09.548 --> 00:14:13.815
maybe you wouldn't have to spend so much of that time.
350
00:14:13.815 --> 00:14:17.463
You could eat turkey if turkey's a thing here.
351
00:14:17.463 --> 00:14:18.636
Not so much.
352
00:14:18.636 --> 00:14:20.384
(audience laughs)
353
00:14:20.384 --> 00:14:22.685
Yeah, that's why we left.
354
00:14:22.685 --> 00:14:25.518
(audience laughs)
355
00:14:26.444 --> 00:14:27.277
Anyway, so
356
00:14:28.642 --> 00:14:30.391
still gonna stick sort of high-level here,
357
00:14:30.391 --> 00:14:32.375
I'm gonna talk a little bit about user experience models.
358
00:14:32.375 --> 00:14:35.980
I've given you sort of the context for selfish
359
00:14:35.980 --> 00:14:38.796
and I'm gonna pull it into user stories.
360
00:14:38.796 --> 00:14:42.978
Not gonna spend too much time on this, but
361
00:14:42.978 --> 00:14:47.145
sort of a, is anybody here not familiar with user stories?
362
00:14:48.012 --> 00:14:49.420
This is awesome, I don't have to spend
363
00:14:49.420 --> 00:14:51.850
14 minutes on this slide.
364
00:14:51.850 --> 00:14:52.894
It's a thing.
365
00:14:52.894 --> 00:14:55.476
So I have these really simple user stories
366
00:14:55.476 --> 00:14:58.082
that are based on this selfish model.
367
00:14:58.082 --> 00:14:59.426
And lemme give you a little bit of context
368
00:14:59.426 --> 00:15:01.644
as you're reading that anyway.
369
00:15:01.644 --> 00:15:04.119
I have found that when I put together personas
370
00:15:04.119 --> 00:15:05.932
and user stories for clients,
371
00:15:05.932 --> 00:15:10.455
they often don't understand who that accessible persona is.
372
00:15:10.455 --> 00:15:13.079
They're not necessarily invested in it, or interested in it.
373
00:15:13.079 --> 00:15:15.234
All it does is represent extra work
374
00:15:15.234 --> 00:15:16.748
they're going to have to do.
375
00:15:16.748 --> 00:15:19.006
And in many organizations when they are looking at
376
00:15:19.006 --> 00:15:20.802
how many personas they have,
377
00:15:20.802 --> 00:15:23.212
they're saying, we need to get down to three or four,
378
00:15:23.212 --> 00:15:25.324
maybe five on the high end.
379
00:15:25.324 --> 00:15:28.050
Who do you think is the first persona to get cut?
380
00:15:28.050 --> 00:15:30.418
Jerry, the guy in the wheelchair.
381
00:15:30.418 --> 00:15:31.928
Lucy, the one who can't see.
382
00:15:31.928 --> 00:15:33.788
Those, gone, every time.
383
00:15:33.788 --> 00:15:37.778
So, I have started to fold these selfish concepts
384
00:15:37.778 --> 00:15:41.017
into personas, and I'm showing you the user stories first
385
00:15:41.017 --> 00:15:43.388
cause it's a little bit more digestible.
386
00:15:43.388 --> 00:15:46.353
So, as a user on a sun-lit patio,
387
00:15:46.353 --> 00:15:48.231
I want to be able to read the content
388
00:15:48.231 --> 00:15:50.897
and see the controls of a webpage.
389
00:15:50.897 --> 00:15:52.988
This affects a lot of people.
390
00:15:52.988 --> 00:15:55.356
As a user in bed with a sleeping spouse,
391
00:15:55.356 --> 00:15:57.554
I wanna watch a training video in silence,
392
00:15:57.554 --> 00:15:59.708
so I can get caught up at work.
393
00:15:59.708 --> 00:16:00.924
This is a real use case.
394
00:16:00.924 --> 00:16:02.716
This is a real thing that happens.
395
00:16:02.716 --> 00:16:05.125
In order to click links as a user with no elbow room
396
00:16:05.125 --> 00:16:07.474
in coach class with a tiny trackpad.
397
00:16:07.474 --> 00:16:09.758
(audience laughs)
398
00:16:09.758 --> 00:16:12.000
So you were all on my flight, too.
399
00:16:12.000 --> 00:16:13.578
I want click areas to be large enough
400
00:16:13.578 --> 00:16:15.411
and adequately spaced.
401
00:16:16.266 --> 00:16:17.952
As a user distracted by the TV,
402
00:16:17.952 --> 00:16:19.466
I want clear headings and labels
403
00:16:19.466 --> 00:16:21.749
so that I don't lose my place.
404
00:16:21.749 --> 00:16:25.525
This really speaks to my inability to have a good work ethic
405
00:16:25.525 --> 00:16:29.301
cause I just sit on the couch and watch, yeah.
406
00:16:29.301 --> 00:16:31.904
So, for what it's worth
407
00:16:31.904 --> 00:16:35.338
there are some personas from the book A Web for Everyone.
408
00:16:35.338 --> 00:16:36.894
There's a free chapter online,
409
00:16:36.894 --> 00:16:39.218
and these personas are free for you to grab.
410
00:16:39.218 --> 00:16:41.760
Sarah Horton and Whitney Quesenbery wrote this
411
00:16:41.760 --> 00:16:43.466
and the personas are great.
412
00:16:43.466 --> 00:16:46.346
And they are personas for people with disabilities.
413
00:16:46.346 --> 00:16:49.141
And I encourage you to go steal them.
414
00:16:49.141 --> 00:16:51.317
And use them wherever you can.
415
00:16:51.317 --> 00:16:55.484
I also encourage you to look at creating a persona,
416
00:16:57.390 --> 00:16:58.970
yeah, that is me.
417
00:16:58.970 --> 00:17:01.360
Maybe this isn't as good an example as I was
418
00:17:01.360 --> 00:17:02.693
hoping it to be.
419
00:17:04.645 --> 00:17:05.978
Am I doing that?
420
00:17:10.210 --> 00:17:11.248
(audience giggles)
421
00:17:11.248 --> 00:17:12.718
Is that better?
422
00:17:12.718 --> 00:17:13.718
Okay.
423
00:17:13.718 --> 00:17:16.346
So I'll stand here for a minute, okay, so.
424
00:17:16.346 --> 00:17:18.797
It is not uncommon to be in a situation where the personas,
425
00:17:18.797 --> 00:17:21.232
once they're discarded, you're not gonna get them back,
426
00:17:21.232 --> 00:17:24.218
but what you can do is you can take the persona
427
00:17:24.218 --> 00:17:26.928
that might speak to a particular stakeholder,
428
00:17:26.928 --> 00:17:31.130
the president, the client relations person, whatever,
429
00:17:31.130 --> 00:17:33.155
take that persona where they've already identified with it
430
00:17:33.155 --> 00:17:35.244
and fold in a trait
431
00:17:35.244 --> 00:17:37.104
and maybe the trait is
432
00:17:37.104 --> 00:17:39.514
that person travels, is always on the train.
433
00:17:39.514 --> 00:17:41.370
And now you can fold in the fact that
434
00:17:41.370 --> 00:17:42.778
there's a mobility impairment.
435
00:17:42.778 --> 00:17:45.528
And for another persona, say this one always works in a cafe
436
00:17:45.528 --> 00:17:49.410
in the sun and can't always hear because of the noise,
437
00:17:49.410 --> 00:17:52.165
and now you've folded in hearing and mobility
438
00:17:52.165 --> 00:17:53.957
and maybe visual impairments.
439
00:17:53.957 --> 00:17:57.260
So don't necessarily try to build these separate,
440
00:17:57.260 --> 00:17:59.480
discrete personas and user stories.
441
00:17:59.480 --> 00:18:03.813
Instead, appeal to the inherent selfishness of your clients
442
00:18:03.813 --> 00:18:06.181
and build them into the personas
443
00:18:06.181 --> 00:18:09.509
and the things that they do into those personas.
444
00:18:09.509 --> 00:18:13.909
I've had some reasonably good luck with that.
445
00:18:13.909 --> 00:18:15.487
Mostly because they see themselves
446
00:18:15.487 --> 00:18:17.493
and they say, "Yeah, I understand that.
447
00:18:17.493 --> 00:18:22.186
"Boy that is a pain in the ass using a trackpad on a train."
448
00:18:22.186 --> 00:18:24.405
This is the part where I look at my watch because
449
00:18:24.405 --> 00:18:25.941
I'm terrible at managing time,
450
00:18:25.941 --> 00:18:27.751
and I told the timekeeper not to bother cause
451
00:18:27.751 --> 00:18:30.336
I'm not gonna pay attention anyway.
452
00:18:30.336 --> 00:18:31.402
Right?
453
00:18:31.402 --> 00:18:33.621
(audience laughs)
454
00:18:33.621 --> 00:18:35.817
She knows, yeah, she knows me already.
455
00:18:35.817 --> 00:18:38.186
So I'm gonna go through some technical bits.
456
00:18:38.186 --> 00:18:41.405
Much of the rest of this is about code stuff.
457
00:18:41.405 --> 00:18:44.048
I may dwell on a few bits of it, but the nice thing is,
458
00:18:44.048 --> 00:18:48.762
all of these samples will be out there for you to look at.
459
00:18:48.762 --> 00:18:50.874
Use alt text on images.
460
00:18:50.874 --> 00:18:52.709
Please, for the love of god.
461
00:18:52.709 --> 00:18:56.185
So, this is Buffalo Soccer Club, I'm very proud of this,
462
00:18:56.185 --> 00:18:57.849
it's an inner-city youth soccer program
463
00:18:57.849 --> 00:19:00.942
that I co-founded back in Buffalo, New York,
464
00:19:00.942 --> 00:19:03.204
where I'm from by the way.
465
00:19:03.204 --> 00:19:05.166
We think it's pretty awesome.
466
00:19:05.166 --> 00:19:07.833
Not gonna bore you too much with it other than the pictures.
467
00:19:07.833 --> 00:19:10.606
So this is the page showing, hey, here it is,
468
00:19:10.606 --> 00:19:12.526
and here's a happy kid playing soccer.
469
00:19:12.526 --> 00:19:15.684
If I turn off the images, though.
470
00:19:15.684 --> 00:19:19.012
The kid playing soccer, there's no text behind it at all.
471
00:19:19.012 --> 00:19:20.544
It's strictly decorative.
472
00:19:20.544 --> 00:19:22.830
The logo up there does have text behind it
473
00:19:22.830 --> 00:19:23.940
because that's important,
474
00:19:23.940 --> 00:19:25.794
that's the name of the organization.
475
00:19:25.794 --> 00:19:28.180
All the other places where there were images,
476
00:19:28.180 --> 00:19:29.550
that were strictly decorative,
477
00:19:29.550 --> 00:19:31.833
there's no alt text behind them.
478
00:19:31.833 --> 00:19:33.833
So the notion here is to
479
00:19:35.198 --> 00:19:38.428
use alt text, be smart about where you use the alt text
480
00:19:38.428 --> 00:19:41.161
so you're not creating too verbose of a page
481
00:19:41.161 --> 00:19:42.842
for a screen reader.
482
00:19:42.842 --> 00:19:45.426
Can you still make sense of the page without the images?
483
00:19:45.426 --> 00:19:47.049
Is any of the content missing?
484
00:19:47.049 --> 00:19:48.756
Which is a sign that maybe you have some text
485
00:19:48.756 --> 00:19:51.316
set in a graphic, that's a problem.
486
00:19:51.316 --> 00:19:54.452
Can you still use the site, and is your alt text useful?
487
00:19:54.452 --> 00:19:56.756
There's this wonderful chart.
488
00:19:56.756 --> 00:19:58.545
Yeah, don't worry, you don't have to,
489
00:19:58.545 --> 00:20:01.022
but there's this chart that later on you can look at,
490
00:20:01.022 --> 00:20:05.118
and it's just a way to get you familiar with those steps on
491
00:20:05.118 --> 00:20:09.917
how to decide what alt text to use and what is appropriate.
492
00:20:09.917 --> 00:20:11.369
Hyperlinks.
493
00:20:11.369 --> 00:20:13.054
This is an example of a page that I can never tell
494
00:20:13.054 --> 00:20:15.294
what is a link on here.
495
00:20:15.294 --> 00:20:19.964
I never know which element on this page is a link.
496
00:20:19.964 --> 00:20:22.420
Some simple tips for hyperlinks,
497
00:20:22.420 --> 00:20:25.640
and this is really basic stuff but incredibly useful.
498
00:20:25.640 --> 00:20:28.436
Avoid the click heres, the mores, the link tos,
499
00:20:28.436 --> 00:20:30.697
the keep reading, et cetera.
500
00:20:30.697 --> 00:20:34.473
Avoid all caps, maybe don't make a URL a link
501
00:20:34.473 --> 00:20:37.693
because a screen reader's gonna announce the entire thing.
502
00:20:37.693 --> 00:20:39.145
Emoticons are probably worth avoiding,
503
00:20:39.145 --> 00:20:42.558
not just because they have cultural cues embedded in them
504
00:20:42.558 --> 00:20:46.014
but a lot of screen readers can't announce them anyway.
505
00:20:46.014 --> 00:20:48.980
Maybe warn people before you open a new window.
506
00:20:48.980 --> 00:20:51.561
Maybe inform them that they're going to download something
507
00:20:51.561 --> 00:20:54.718
and that it's a 200 meg PDF because
508
00:20:54.718 --> 00:20:57.172
I don't know why people do that but they do.
509
00:20:57.172 --> 00:20:59.262
Make sure the links are underlined and obvious.
510
00:20:59.262 --> 00:21:00.838
Make sure that if your image is a link
511
00:21:00.838 --> 00:21:02.654
that there's alt text behind it
512
00:21:02.654 --> 00:21:04.404
that's still valuable and useful.
513
00:21:04.404 --> 00:21:06.468
Make sure the link text is consistent.
514
00:21:06.468 --> 00:21:08.926
If you're gonna keep linking to the same resource
515
00:21:08.926 --> 00:21:11.294
like that 200 megabyte PDF that
516
00:21:11.294 --> 00:21:12.873
you're all suddenly fascinated with.
517
00:21:12.873 --> 00:21:14.281
At least every time you link to it,
518
00:21:14.281 --> 00:21:17.929
mention, oh yeah, this is that 200 megabyte PDF.
519
00:21:17.929 --> 00:21:20.084
You should stop clicking.
520
00:21:20.084 --> 00:21:21.748
Use link underlines.
521
00:21:21.748 --> 00:21:23.561
Color alone is inadequate.
522
00:21:23.561 --> 00:21:26.612
I have it showing in the through some different types
523
00:21:26.612 --> 00:21:27.785
of color blindness here.
524
00:21:27.785 --> 00:21:29.918
But what's most important is that orange
525
00:21:29.918 --> 00:21:31.305
is the color for links,
526
00:21:31.305 --> 00:21:33.140
orange is also their call-out color,
527
00:21:33.140 --> 00:21:34.846
the, hey look at this thing.
528
00:21:34.846 --> 00:21:39.013
So I never know what is a link on the Verge site because
529
00:21:39.902 --> 00:21:43.508
the same color is used to highlight stuff.
530
00:21:43.508 --> 00:21:44.574
You're not Google.
531
00:21:44.574 --> 00:21:46.279
I don't care how awesome your site is.
532
00:21:46.279 --> 00:21:47.582
I don't care
533
00:21:47.582 --> 00:21:49.225
who you think you are.
534
00:21:49.225 --> 00:21:50.228
You're not Google.
535
00:21:50.228 --> 00:21:51.737
Google can get away with it
536
00:21:51.737 --> 00:21:53.833
because everybody understands the layout
537
00:21:53.833 --> 00:21:57.097
of the search results, and we all know what we're getting.
538
00:21:57.097 --> 00:22:00.251
They know the layout, they're used to it.
539
00:22:00.251 --> 00:22:01.897
There's all this lovely stuff
540
00:22:01.897 --> 00:22:05.140
in the web content accessibility guidelines that coaches you
541
00:22:05.140 --> 00:22:06.548
and what really you need to know is
542
00:22:06.548 --> 00:22:09.234
just make sure you leave the link underlines in place
543
00:22:09.234 --> 00:22:11.262
for everybody's benefit.
544
00:22:11.262 --> 00:22:12.679
Use focus styles.
545
00:22:13.673 --> 00:22:16.596
I am tabbing through the Virgin America page right now.
546
00:22:16.596 --> 00:22:18.260
All you can see is that this is updating.
547
00:22:18.260 --> 00:22:21.140
I have no idea where I am.
548
00:22:21.140 --> 00:22:23.635
This is for anybody who uses a keyboard primarily
549
00:22:23.635 --> 00:22:24.894
instead of a mouse.
550
00:22:24.894 --> 00:22:26.110
Oh, I must have hit something.
551
00:22:26.110 --> 00:22:28.477
I still don't know where I am.
552
00:22:28.477 --> 00:22:30.718
Use focus styles whenever possible.
553
00:22:30.718 --> 00:22:32.638
If you remove link underlines you really need 'em.
554
00:22:32.638 --> 00:22:35.881
Anytime you see :focus(outline:none:) in the CSS
555
00:22:35.881 --> 00:22:37.652
just delete it.
556
00:22:37.652 --> 00:22:39.657
Just deleting that alone
557
00:22:39.657 --> 00:22:42.151
makes your website probably a lot more accessible.
558
00:22:42.151 --> 00:22:43.326
And it's very simply to test.
559
00:22:43.326 --> 00:22:44.670
Just use the tab key.
560
00:22:44.670 --> 00:22:45.908
Wherever you have a hover style,
561
00:22:45.908 --> 00:22:47.973
make sure you have a focus style.
562
00:22:47.973 --> 00:22:49.513
Color contrast is important.
563
00:22:49.513 --> 00:22:53.438
Same page we saw before, but this is looking at it through
564
00:22:53.438 --> 00:22:55.826
three different types of color blindness.
565
00:22:55.826 --> 00:22:58.909
Tritanopia, protanopia, deuteranopia.
566
00:22:59.945 --> 00:23:01.396
It's important that there's enough contrast
567
00:23:01.396 --> 00:23:03.205
cause those colors aren't always going to be
568
00:23:03.205 --> 00:23:05.364
discernible on their own.
569
00:23:05.364 --> 00:23:07.049
And I have links to all these tools
570
00:23:07.049 --> 00:23:10.121
so that you can grab those after I finish talking
571
00:23:10.121 --> 00:23:14.152
and you've taken a nap and then you've downloaded my slides.
572
00:23:14.152 --> 00:23:16.201
Use the label element.
573
00:23:16.201 --> 00:23:18.420
Here's an example, really easy to test.
574
00:23:18.420 --> 00:23:22.238
If I click that field, the focus should go into that input.
575
00:23:22.238 --> 00:23:23.262
I'm sorry if I click that label,
576
00:23:23.262 --> 00:23:25.566
the focus should go into that text input field.
577
00:23:25.566 --> 00:23:27.185
It's really simple to do.
578
00:23:27.185 --> 00:23:30.281
All you have to do is match the for attribute on the label
579
00:23:30.281 --> 00:23:33.716
with the ID on the element that you're pairing it to.
580
00:23:33.716 --> 00:23:34.718
That's it.
581
00:23:34.718 --> 00:23:35.721
Simple to text.
582
00:23:35.721 --> 00:23:38.430
Make sure you do it with radio buttons and check boxes.
583
00:23:38.430 --> 00:23:42.185
Cause if you don't, holy crap is that gonna be difficult.
584
00:23:42.185 --> 00:23:43.018
Use HTML5.
585
00:23:45.534 --> 00:23:46.836
Great way to be accessible.
586
00:23:46.836 --> 00:23:48.670
Just use HTML5.
587
00:23:48.670 --> 00:23:50.035
Really straightforward.
588
00:23:50.035 --> 00:23:53.364
Here's a layout that probably looks familiar to you.
589
00:23:53.364 --> 00:23:55.924
Really simple and really basic, but you probably
590
00:23:55.924 --> 00:23:59.358
already know what those elements are on the page.
591
00:23:59.358 --> 00:24:00.967
And there are HTML elements
592
00:24:00.967 --> 00:24:03.229
that speak to those design elements.
593
00:24:03.229 --> 00:24:05.575
We've got the header, which has a role of banner
594
00:24:05.575 --> 00:24:06.898
already built in.
595
00:24:06.898 --> 00:24:09.138
The navigation which maybe lives up top for you
596
00:24:09.138 --> 00:24:10.457
or over on the other side,
597
00:24:10.457 --> 00:24:11.993
might live within the header.
598
00:24:11.993 --> 00:24:14.359
The main content, the footer,
599
00:24:14.359 --> 00:24:18.347
there's a search form, an aside, et cetera,
600
00:24:18.347 --> 00:24:20.889
those are already built in.
601
00:24:20.889 --> 00:24:23.598
Here is the responsive version of it
602
00:24:23.598 --> 00:24:27.438
for all values of responsive that mean narrow view port.
603
00:24:27.438 --> 00:24:28.761
Cause we know that, yeah.
604
00:24:28.761 --> 00:24:31.595
So, same thing, familiar layout,
605
00:24:31.595 --> 00:24:34.281
header, nav, form, the role search,
606
00:24:34.281 --> 00:24:36.548
the main, aside, footer.
607
00:24:36.548 --> 00:24:37.998
Just use the HTML5.
608
00:24:37.998 --> 00:24:41.473
You'll be in a much better place.
609
00:24:41.473 --> 00:24:44.185
Bear in mind that the main
610
00:24:44.185 --> 00:24:46.766
you should only use one of those per page
611
00:24:46.766 --> 00:24:48.796
because screen reader users
612
00:24:48.796 --> 00:24:51.460
can jump right to the main content of your area,
613
00:24:51.460 --> 00:24:54.382
and if you have more than one main content area
614
00:24:54.382 --> 00:24:57.518
then you don't have a main content area.
615
00:24:57.518 --> 00:25:00.142
(audience laughs)
616
00:25:00.142 --> 00:25:02.315
Use your headings wisely.
617
00:25:02.315 --> 00:25:06.265
So, this incredibly boring blog post on my site,
618
00:25:06.265 --> 00:25:07.886
if you just navigate by headings,
619
00:25:07.886 --> 00:25:10.980
those headings show the entire structure of the article,
620
00:25:10.980 --> 00:25:12.964
and there are users who navigate by headings,
621
00:25:12.964 --> 00:25:14.926
and who listen to just the headings of a page
622
00:25:14.926 --> 00:25:17.017
to understand the structure.
623
00:25:17.017 --> 00:25:19.534
So, don't skip levels.
624
00:25:19.534 --> 00:25:23.097
Start with h1, should probably match the title of the page.
625
00:25:23.097 --> 00:25:24.868
Just use one h1.
626
00:25:24.868 --> 00:25:27.214
Make sure you're nesting them appropriately.
627
00:25:27.214 --> 00:25:28.985
If you've seen anybody who says
628
00:25:28.985 --> 00:25:31.716
that the Document Outline Alogrithm says
629
00:25:31.716 --> 00:25:33.316
you can use all h1s,
630
00:25:33.316 --> 00:25:35.300
I'm sorry, that's wrong.
631
00:25:35.300 --> 00:25:37.710
It's documented in the HTML specification.
632
00:25:37.710 --> 00:25:39.310
It's been written about many times.
633
00:25:39.310 --> 00:25:41.401
Don't use an all h1 approach.
634
00:25:41.401 --> 00:25:43.620
Every time you use a new section or article
635
00:25:43.620 --> 00:25:46.542
it should get a heading, but it should not be in h1.
636
00:25:46.542 --> 00:25:48.249
And if you think it's gonna affect
637
00:25:48.249 --> 00:25:50.596
your search engine optimization,
638
00:25:50.596 --> 00:25:52.089
don't worry about that.
639
00:25:52.089 --> 00:25:54.606
Google refuses to give direct answers,
640
00:25:54.606 --> 00:25:56.778
but Google has made it very clear that
641
00:25:56.778 --> 00:25:59.513
there is no outline algorithm.
642
00:25:59.513 --> 00:26:03.950
Using a button versus an anchor versus an input element.
643
00:26:03.950 --> 00:26:07.513
We can style them all to look exactly the same way.
644
00:26:07.513 --> 00:26:09.262
Really easy to do, right?
645
00:26:09.262 --> 00:26:10.762
Yeah, well, don't.
646
00:26:11.862 --> 00:26:14.424
Consider using the right element for the task at hand.
647
00:26:14.424 --> 00:26:16.537
Right off the bat, don't use a div or a span.
648
00:26:16.537 --> 00:26:18.340
If you find yourself putting an onclick
649
00:26:18.340 --> 00:26:20.423
on a div or a span, stop.
650
00:26:22.222 --> 00:26:24.014
Think about what you're doing.
651
00:26:24.014 --> 00:26:25.097
Cry a little.
652
00:26:25.977 --> 00:26:27.812
We'll get through it.
653
00:26:27.812 --> 00:26:30.393
If it takes me to another web page address,
654
00:26:30.393 --> 00:26:33.060
including an anchor further down the page,
655
00:26:33.060 --> 00:26:35.044
use the <a href>.
656
00:26:35.044 --> 00:26:37.005
If it's taking me, I'm sorry,
657
00:26:37.005 --> 00:26:38.670
if it's only doing something on the page,
658
00:26:38.670 --> 00:26:39.865
it's not moving me off the page,
659
00:26:39.865 --> 00:26:42.084
it's expanding, collapsing, hiding, showing,
660
00:26:42.084 --> 00:26:43.276
use a button element.
661
00:26:43.276 --> 00:26:45.006
If you're submitting a form,
662
00:26:45.006 --> 00:26:47.182
<input type="submit"> I prefer
663
00:26:47.182 --> 00:26:48.569
over the <button type="submit">
664
00:26:48.569 --> 00:26:50.894
only because I find that there are fewer style conflicts
665
00:26:50.894 --> 00:26:53.604
if people are using the <input type="submit">.
666
00:26:53.604 --> 00:26:56.420
There are some, I have an article about this
667
00:26:56.420 --> 00:26:58.830
that also talks about the key handlers,
668
00:26:58.830 --> 00:27:02.751
enter versus space and what the effects of those are.
669
00:27:02.751 --> 00:27:05.355
Don't use a tabindex of greater than zero.
670
00:27:05.355 --> 00:27:06.829
If you have a CAPTCHA on your page,
671
00:27:06.829 --> 00:27:08.537
this is just a silly example,
672
00:27:08.537 --> 00:27:09.774
as soon as you start tabbing,
673
00:27:09.774 --> 00:27:11.209
it jumps right to the CAPTCHA
674
00:27:11.209 --> 00:27:14.745
because Google's old CAPTCHA had a tabindex.
675
00:27:14.745 --> 00:27:16.132
One, two, three, four.
676
00:27:16.132 --> 00:27:18.756
I couldn't even get to the skip navigation link
677
00:27:18.756 --> 00:27:21.230
because it jumped me right to the bottom of the page.
678
00:27:21.230 --> 00:27:23.428
And what's funny is that I filed the bug
679
00:27:23.428 --> 00:27:25.881
with the DigitalGov team and they insisted I was wrong
680
00:27:25.881 --> 00:27:27.417
and they could not reproduce the issue.
681
00:27:27.417 --> 00:27:29.742
Cause apparently nobody there has a keyboard.
682
00:27:29.742 --> 00:27:32.004
(audience laughs)
683
00:27:32.004 --> 00:27:34.222
It's funny how you learn that stuff.
684
00:27:34.222 --> 00:27:36.249
A tabindex of negative one is great
685
00:27:36.249 --> 00:27:38.105
if you don't want it to have keyboard focus
686
00:27:38.105 --> 00:27:41.348
but you wanna use script to put focus on it at some point.
687
00:27:41.348 --> 00:27:44.121
Like a close button on a modal for example.
688
00:27:44.121 --> 00:27:45.764
Tabindex of zero,
689
00:27:45.764 --> 00:27:48.255
at least puts it into the focus order.
690
00:27:48.255 --> 00:27:49.625
So if you have a div with an onclick
691
00:27:49.625 --> 00:27:51.908
and a tabindex zero, stop.
692
00:27:51.908 --> 00:27:53.849
Go back two slides.
693
00:27:53.849 --> 00:27:57.220
But tabindex of zero is useful for things that
694
00:27:57.220 --> 00:27:59.780
do become interactive for whatever reason.
695
00:27:59.780 --> 00:28:03.790
Just don't ever do tabindex of one or greater.
696
00:28:03.790 --> 00:28:05.177
It is worth nothing there are places
697
00:28:05.177 --> 00:28:08.377
where a tabindex zero is very useful.
698
00:28:08.377 --> 00:28:12.153
I have seen the grid, literally just a data table,
699
00:28:12.153 --> 00:28:14.734
that has either scrolling content
700
00:28:14.734 --> 00:28:17.316
or has content that only appears on hover.
701
00:28:17.316 --> 00:28:18.873
You may have content on your web page
702
00:28:18.873 --> 00:28:20.984
that is in a little scrolly box for example.
703
00:28:20.984 --> 00:28:24.228
A keyboard user can't get into that and make it scroll.
704
00:28:24.228 --> 00:28:27.769
So putting a tabindex of zero on that
705
00:28:27.769 --> 00:28:30.158
means that it'll get focus.
706
00:28:30.158 --> 00:28:32.036
You can give it a role as well if you want.
707
00:28:32.036 --> 00:28:33.741
You can give it an aria label if you want,
708
00:28:33.741 --> 00:28:35.958
but more importantly giving it that tabindex of zero
709
00:28:35.958 --> 00:28:39.310
means that a user with just a keyboard can tab into it
710
00:28:39.310 --> 00:28:41.892
and then can use the arrow keys to scroll up and down
711
00:28:41.892 --> 00:28:46.009
and experience the content that was otherwise missing.
712
00:28:46.009 --> 00:28:49.949
Please do set the lang attribute on your html element.
713
00:28:49.949 --> 00:28:51.662
I have a whole talk on this,
714
00:28:51.662 --> 00:28:53.198
and I talk about all the wonderful benefits
715
00:28:53.198 --> 00:28:55.630
for a number of fields and everything else but
716
00:28:55.630 --> 00:28:57.678
probably the thing that's most valuable to know
717
00:28:57.678 --> 00:28:59.812
is that screen readers in particular
718
00:28:59.812 --> 00:29:01.668
really, really benefit from this.
719
00:29:01.668 --> 00:29:05.358
Because they will say things the appropriate way.
720
00:29:05.358 --> 00:29:08.473
In my other talk I have the lyrics of Nick Cave songs
721
00:29:08.473 --> 00:29:12.740
that I have read out in German and French, and
722
00:29:12.740 --> 00:29:14.041
they're funnier that way,
723
00:29:14.041 --> 00:29:16.068
but we're not gonna do that here.
724
00:29:16.068 --> 00:29:17.732
Source order matters.
725
00:29:17.732 --> 00:29:21.230
It's very easy today to blow up the way
726
00:29:21.230 --> 00:29:24.324
that we tab through content just by using floats,
727
00:29:24.324 --> 00:29:26.049
and absolute positioning.
728
00:29:26.049 --> 00:29:28.228
Be aware that Flexbox and now Grid
729
00:29:28.228 --> 00:29:30.446
can also screw with things.
730
00:29:30.446 --> 00:29:32.110
It doesn't mean you've done anything wrong,
731
00:29:32.110 --> 00:29:34.413
but just know by tabbing through the page,
732
00:29:34.413 --> 00:29:35.886
what's going to happen when you start
733
00:29:35.886 --> 00:29:37.891
to reorder the content.
734
00:29:37.891 --> 00:29:40.281
Definitely don't disable zoom.
735
00:29:40.281 --> 00:29:41.988
Definitely don't do that.
736
00:29:41.988 --> 00:29:43.457
Otherwise you'd never know that Bill Murray
737
00:29:43.457 --> 00:29:45.444
thinks you're awesome.
738
00:29:45.444 --> 00:29:46.444
Enhance.
739
00:29:46.444 --> 00:29:50.308
So, it's not just for mobile users but for all users.
740
00:29:50.308 --> 00:29:53.526
Just make sure that you don't ever have
741
00:29:53.526 --> 00:29:54.943
user-scalable no.
742
00:29:55.896 --> 00:29:56.942
Get rid of that.
743
00:29:56.942 --> 00:30:00.118
If you're interested in supporting Windows mobile phones
744
00:30:00.118 --> 00:30:04.024
the ms-viewport will help you address that as well.
745
00:30:04.024 --> 00:30:06.734
The nice thing is, most mobile devices now
746
00:30:06.734 --> 00:30:08.526
override the zoom settings,
747
00:30:08.526 --> 00:30:12.004
so you can still zoom no matter what happens.
748
00:30:12.004 --> 00:30:14.670
Avoid infinite scroll wherever possible,
749
00:30:14.670 --> 00:30:19.108
he says, thinking about the Wordpress themes page.
750
00:30:19.108 --> 00:30:21.642
(audience laughs)
751
00:30:21.642 --> 00:30:22.862
But I use this as an example.
752
00:30:22.862 --> 00:30:24.841
Avoid infinite scroll.
753
00:30:24.841 --> 00:30:27.257
It makes it impossible to access some of the content
754
00:30:27.257 --> 00:30:31.242
on a page such as the footer, or maybe even sidebar links.
755
00:30:31.242 --> 00:30:32.908
It ruins the back button.
756
00:30:32.908 --> 00:30:35.684
Sharing a URL to a specific place in those results
757
00:30:35.684 --> 00:30:37.774
is impossible, you can't just jump into a link
758
00:30:37.774 --> 00:30:40.377
and go back and get to where you were.
759
00:30:40.377 --> 00:30:42.553
And, less powerful computers and devices
760
00:30:42.553 --> 00:30:45.153
and assistive technology will just choke,
761
00:30:45.153 --> 00:30:47.394
and that's not fun for anybody.
762
00:30:47.394 --> 00:30:49.547
Use captions and subtitles wherever possible.
763
00:30:49.547 --> 00:30:51.918
NoMoreCraptions.com is a great resource
764
00:30:51.918 --> 00:30:56.526
for pulling in captions that are auto-generated.
765
00:30:56.526 --> 00:31:00.004
Yes that says, "while so long to his Viagra."
766
00:31:00.004 --> 00:31:02.564
Don't let Google auto-caption cause they will be terrible,
767
00:31:02.564 --> 00:31:04.974
but if you let Google auto-caption
768
00:31:04.974 --> 00:31:08.494
you can use NoMoreCraptions, pull in all that stuff
769
00:31:08.494 --> 00:31:11.545
that's already time-stamped, and fix it.
770
00:31:11.545 --> 00:31:15.104
Which might involve using the word Viagra a lot more.
771
00:31:15.104 --> 00:31:17.881
Remember though that everybody uses captions and subtitles.
772
00:31:17.881 --> 00:31:19.801
Regardless of the circumstances.
773
00:31:19.801 --> 00:31:22.148
Try to include the audio description as well.
774
00:31:22.148 --> 00:31:24.836
Oh like, he dropped the microphone, everybody laughed,
775
00:31:24.836 --> 00:31:28.119
and the speaker identification whenever possible.
776
00:31:28.119 --> 00:31:28.952
Yeah.
777
00:31:29.976 --> 00:31:31.172
More there.
778
00:31:31.172 --> 00:31:33.454
Some of you might have heard of ARIA,
779
00:31:33.454 --> 00:31:35.630
Accessible Rich Internet Applications.
780
00:31:35.630 --> 00:31:37.230
You've probably seen people ask questions
781
00:31:37.230 --> 00:31:39.108
about ARIA all the time.
782
00:31:39.108 --> 00:31:42.390
Don't stress, unless you're building some really complex,
783
00:31:42.390 --> 00:31:45.375
really novel user interface elements,
784
00:31:45.375 --> 00:31:47.792
you probably don't need ARIA.
785
00:31:49.369 --> 00:31:51.012
ARIA has some simple rules.
786
00:31:51.012 --> 00:31:53.179
Basically, don't override.
787
00:31:54.852 --> 00:31:59.204
HTML already does a lotta great stuff, don't override it.
788
00:31:59.204 --> 00:32:01.465
Maybe don't change the stuff that's there.
789
00:32:01.465 --> 00:32:04.494
So don't make a heading into a button.
790
00:32:04.494 --> 00:32:06.585
Make sure that they're still usable by the keyboard.
791
00:32:06.585 --> 00:32:07.652
Pretty straightforward.
792
00:32:07.652 --> 00:32:09.166
You wouldn't wanna use ARIA to make something
793
00:32:09.166 --> 00:32:12.108
more accessible and then break it for keyboard users.
794
00:32:12.108 --> 00:32:14.926
Don't use role="presentation" or aria-hidden="true"
795
00:32:14.926 --> 00:32:16.505
on something that needs to get focused
796
00:32:16.505 --> 00:32:20.196
because now it just disappears for some users.
797
00:32:20.196 --> 00:32:22.116
And remember that all interactive elements
798
00:32:22.116 --> 00:32:23.758
must have an accessible name.
799
00:32:23.758 --> 00:32:26.805
They must have some pieces of text associated with them
800
00:32:26.805 --> 00:32:28.430
that says what the control is,
801
00:32:28.430 --> 00:32:30.308
ideally what it is and what it does,
802
00:32:30.308 --> 00:32:32.569
and in many cases what it's current state is.
803
00:32:32.569 --> 00:32:35.069
Toggled, on, off, blue, angry.
804
00:32:36.793 --> 00:32:38.990
So I'd mentioned the div with the onclick.
805
00:32:38.990 --> 00:32:41.316
If you wanna make that accessible,
806
00:32:41.316 --> 00:32:43.726
we'd have to had the tabindex of zero,
807
00:32:43.726 --> 00:32:46.734
and then you need to throw on the keypress,
808
00:32:46.734 --> 00:32:49.337
because it has to respond to a keyboard,
809
00:32:49.337 --> 00:32:51.513
and then you wanna make sure you give it a role of button
810
00:32:51.513 --> 00:32:53.241
so that it's announced properly.
811
00:32:53.241 --> 00:32:55.076
So what you're doing is you're creating,
812
00:32:55.076 --> 00:32:56.612
this doesn't even include all the code,
813
00:32:56.612 --> 00:32:58.297
there's a lotta JavaScript that has to support
814
00:32:58.297 --> 00:33:00.152
all the keyboard commands as well.
815
00:33:00.152 --> 00:33:02.841
Just to turn a div into a button,
816
00:33:02.841 --> 00:33:05.828
when I could just do that.
817
00:33:05.828 --> 00:33:07.193
I mean it really is that simple.
818
00:33:07.193 --> 00:33:09.604
Accessibility is not that hard to do.
819
00:33:09.604 --> 00:33:13.771
Conveniently WordPress has decided to go all in on WCAG.
820
00:33:15.001 --> 00:33:16.004
I still don't know if that's the way
821
00:33:16.004 --> 00:33:18.500
you're supposed to say it but that's the way I say it.
822
00:33:18.500 --> 00:33:20.910
There's this lovely announcement from
823
00:33:20.910 --> 00:33:22.493
State of Word 2015.
824
00:33:26.261 --> 00:33:27.989
She's just gonna kill me after this.
825
00:33:27.989 --> 00:33:30.759
What's hilarious about this is there are no transcripts
826
00:33:30.759 --> 00:33:33.109
for this video but you can get in there and see him
827
00:33:33.109 --> 00:33:36.095
talk about how they are moving forward with this.
828
00:33:36.095 --> 00:33:38.805
And, we are fortunate enough to have
829
00:33:38.805 --> 00:33:40.789
Rian in our audience today,
830
00:33:40.789 --> 00:33:42.367
I think this is really, really important.
831
00:33:42.367 --> 00:33:45.653
All new or updated code released into WordPress core
832
00:33:45.653 --> 00:33:49.450
and bundled themes must conform with WCAG 2.0
833
00:33:49.450 --> 00:33:50.700
level double A.
834
00:33:51.690 --> 00:33:53.842
That's important because level double A
835
00:33:53.842 --> 00:33:56.917
is what people are using when it comes to government,
836
00:33:56.917 --> 00:33:59.349
when it comes to lawsuits,
837
00:33:59.349 --> 00:34:01.523
when it comes to a lot of businesses' best practices.
838
00:34:01.523 --> 00:34:05.023
It has just become the de facto standard.
839
00:34:05.023 --> 00:34:06.495
All these great notes on that.
840
00:34:06.495 --> 00:34:07.882
I'm gonna leave these things with you guys.
841
00:34:07.882 --> 00:34:10.352
The accessibility-ready tag is a great way
842
00:34:10.352 --> 00:34:12.191
to go grab some pre-built themes
843
00:34:12.191 --> 00:34:14.046
and not have to stress about the accessibility
844
00:34:14.046 --> 00:34:15.669
cause it's already there.
845
00:34:15.669 --> 00:34:19.528
I think there are 123 as of a few days ago.
846
00:34:19.528 --> 00:34:22.901
The nice thing is it keeps growing.
847
00:34:22.901 --> 00:34:24.005
Yet more notes.
848
00:34:24.005 --> 00:34:24.991
Yay.
849
00:34:24.991 --> 00:34:26.442
Oh, by the way.
850
00:34:26.442 --> 00:34:28.831
Rian won the Heroes of Accessibility Award,
851
00:34:28.831 --> 00:34:31.242
I thought that was awesome, good for you.
852
00:34:31.242 --> 00:34:32.495
(audience laughs)
853
00:34:32.495 --> 00:34:35.146
Absolutely, she should be doing this more than me.
854
00:34:35.146 --> 00:34:38.146
(audience applauds)
855
00:34:41.160 --> 00:34:42.954
Oh look, infinite scroll again.
856
00:34:42.954 --> 00:34:43.954
(audience laughs)
857
00:34:43.954 --> 00:34:45.898
There are some plug-ins already made.
858
00:34:45.898 --> 00:34:47.818
Joe Dolson wrote these three.
859
00:34:47.818 --> 00:34:49.653
I have links to them.
860
00:34:49.653 --> 00:34:51.423
I'm gonna wrap this up which will leave me
861
00:34:51.423 --> 00:34:54.351
about 12 seconds for questions in a moment.
862
00:34:54.351 --> 00:34:55.882
But it's gonna take me three minutes
863
00:34:55.882 --> 00:34:57.717
just to explain to you I need 12 seconds.
864
00:34:57.717 --> 00:35:00.810
So, here's the general message
865
00:35:00.810 --> 00:35:02.259
that I'm trying to convey to you
866
00:35:02.259 --> 00:35:05.160
in addition to just being a selfish git like I am.
867
00:35:05.160 --> 00:35:08.298
Supporting accessibility now is gonna serve future you.
868
00:35:08.298 --> 00:35:10.261
I showed you those stats before about how people
869
00:35:10.261 --> 00:35:14.229
accrue disabilities as they age, or do dumb things,
870
00:35:14.229 --> 00:35:16.490
which they do over time.
871
00:35:16.490 --> 00:35:19.029
So, supporting accessibility now also helps
872
00:35:19.029 --> 00:35:23.184
the injured version of you or the encumbered version of you.
873
00:35:23.184 --> 00:35:25.895
By getting younger developers to buy into it now
874
00:35:25.895 --> 00:35:28.860
is gonna help future you if you are teaching them well.
875
00:35:28.860 --> 00:35:30.373
Because you're not always gonna be the one
876
00:35:30.373 --> 00:35:32.170
who is able to do this.
877
00:35:32.170 --> 00:35:34.453
Whether it be code it, drive it,
878
00:35:34.453 --> 00:35:36.885
make it a requirement, write it into contracts.
879
00:35:36.885 --> 00:35:39.594
Start doing it now because in a few years,
880
00:35:39.594 --> 00:35:41.711
you're not gonna be able to get people
881
00:35:41.711 --> 00:35:44.479
to build this stuff that's gonna benefit you.
882
00:35:44.479 --> 00:35:47.858
So this is sort of future-proofing your life.
883
00:35:47.858 --> 00:35:50.119
This is often held up as a wonderful example
884
00:35:50.119 --> 00:35:53.316
of how integrating accessibility into design
885
00:35:53.316 --> 00:35:56.540
can be great and look good and be useful for everybody.
886
00:35:56.540 --> 00:35:57.754
This is a death trap.
887
00:35:57.754 --> 00:35:59.335
(audience laughs)
888
00:35:59.335 --> 00:36:00.911
This is a death trap for people who like
889
00:36:00.911 --> 00:36:02.791
to run up stairs, like me,
890
00:36:02.791 --> 00:36:04.754
and this is a death trap for anybody in a wheelchair
891
00:36:04.754 --> 00:36:07.463
because the gradient is too high,
892
00:36:07.463 --> 00:36:10.130
the turns end in concrete walls.
893
00:36:11.068 --> 00:36:13.863
I imagine there's a pit of alligators off the shot here.
894
00:36:13.863 --> 00:36:15.122
(audience laughs)
895
00:36:15.122 --> 00:36:18.514
This is terrible, so, you have to be careful
896
00:36:18.514 --> 00:36:20.860
when you're trying to integrate these things,
897
00:36:20.860 --> 00:36:22.780
don't just try to make it look good,
898
00:36:22.780 --> 00:36:24.037
but actually spend a little bit of time.
899
00:36:24.037 --> 00:36:26.638
Put somebody in a wheelchair on that ramp, and
900
00:36:26.638 --> 00:36:31.100
if they don't die, listen to what feedback they give you.
901
00:36:31.100 --> 00:36:32.999
Accessibility is not a checklist.
902
00:36:32.999 --> 00:36:36.327
You can't just say we built a ramp and walk away from it.
903
00:36:36.327 --> 00:36:38.524
Further, it's something you have to maintain.
904
00:36:38.524 --> 00:36:40.444
So this is a wonderful example of a ramp
905
00:36:40.444 --> 00:36:42.428
that goes into a drug store that a friend of mine
906
00:36:42.428 --> 00:36:44.369
couldn't get into because
907
00:36:44.369 --> 00:36:46.309
they put the trees on the ramp.
908
00:36:46.309 --> 00:36:48.060
They lifted the trees because it snowed
909
00:36:48.060 --> 00:36:50.383
and put them on the ramp, and he wheeled up there
910
00:36:50.383 --> 00:36:54.674
and that's much more polite than what he said in real life.
911
00:36:54.674 --> 00:36:56.466
It's not just a checklist.
912
00:36:56.466 --> 00:36:59.004
It's also not something you can just do once
913
00:36:59.004 --> 00:37:01.495
and walk away from, it's an ongoing process.
914
00:37:01.495 --> 00:37:03.463
It's something you have to maintain.
915
00:37:03.463 --> 00:37:05.746
And usually the easiest way to maintain it
916
00:37:05.746 --> 00:37:07.943
is to not stress about it.
917
00:37:07.943 --> 00:37:09.262
Don't overwrite it.
918
00:37:09.262 --> 00:37:10.738
Don't build new things into it
919
00:37:10.738 --> 00:37:12.018
without understanding their impact.
920
00:37:12.018 --> 00:37:14.002
If you've got good headings everywhere,
921
00:37:14.002 --> 00:37:15.196
good, you're in good shape,
922
00:37:15.196 --> 00:37:16.967
you probably don't need to stress.
923
00:37:16.967 --> 00:37:19.868
So, it's not a checklist, it's an ongoing process.
924
00:37:19.868 --> 00:37:21.614
Be prepared to internalize that
925
00:37:21.614 --> 00:37:23.367
because it will be important.
926
00:37:23.367 --> 00:37:26.034
I have all these resources,
927
00:37:26.034 --> 00:37:28.380
which you can look at on your own.
928
00:37:28.380 --> 00:37:29.895
My slides will be available,
929
00:37:29.895 --> 00:37:31.707
provided I can get good WiFi,
930
00:37:31.707 --> 00:37:33.842
and I have how long for questions?
931
00:37:33.842 --> 00:37:34.886
Two minutes.
932
00:37:34.886 --> 00:37:36.807
I won't probably need it.
933
00:37:36.807 --> 00:37:38.471
(audience laughs)
934
00:37:38.471 --> 00:37:40.804
So do we have any questions?
935
00:37:41.904 --> 00:37:42.821
No, really?
936
00:37:47.675 --> 00:37:51.003
Do you have a view on access keys at all?
937
00:37:51.003 --> 00:37:52.731
Whether they're being phased in or phased out
938
00:37:52.731 --> 00:37:53.926
with HTML5--
Access keys?
939
00:37:53.926 --> 00:37:54.945
Yeah.
940
00:37:54.945 --> 00:37:57.484
So the general, um,
941
00:37:57.484 --> 00:37:59.451
that's a really big questions.
942
00:37:59.451 --> 00:38:01.499
So I'm gonna try and really simplify.
943
00:38:01.499 --> 00:38:04.123
Access keys are awesome in the right context.
944
00:38:04.123 --> 00:38:06.150
The problem is, the people who benefit from them
945
00:38:06.150 --> 00:38:08.603
are often using tools that intercept those keys
946
00:38:08.603 --> 00:38:10.713
and they become very problematic.
947
00:38:10.713 --> 00:38:13.638
There is a group of people who feel very strongly
948
00:38:13.638 --> 00:38:16.219
that access keys have value.
949
00:38:16.219 --> 00:38:18.118
The trick is figuring out how to make sure
950
00:38:18.118 --> 00:38:20.529
those access keys are presented in a way
951
00:38:20.529 --> 00:38:23.195
that people who use assistive technology can still benefit
952
00:38:23.195 --> 00:38:26.097
without breaking the technology they're using.
953
00:38:26.097 --> 00:38:27.739
So I think there's value to them.
954
00:38:27.739 --> 00:38:29.638
I don't think that they are workable
955
00:38:29.638 --> 00:38:32.923
with the current technology that we have today.
956
00:38:32.923 --> 00:38:35.309
Hope that was quick enough.
957
00:38:35.309 --> 00:38:36.642
Other questions.
958
00:38:37.659 --> 00:38:39.409
There's no way I answered everything.
959
00:38:39.409 --> 00:38:41.673
(audience laughs)
960
00:38:41.673 --> 00:38:43.340
Is everybody asleep?
961
00:38:44.502 --> 00:38:46.144
Alright.
962
00:38:46.144 --> 00:38:47.894
You mentioned
963
00:38:50.561 --> 00:38:52.894
all caps, don't do all caps.
964
00:38:54.187 --> 00:38:55.520
That's obviously
965
00:38:56.982 --> 00:38:59.798
true for larger blocks of text, right,
966
00:38:59.798 --> 00:39:01.206
because it's difficult for anyone
967
00:39:01.206 --> 00:39:04.233
to read large blocks of all caps text.
968
00:39:04.233 --> 00:39:07.691
What about, for example, Google material designs
969
00:39:07.691 --> 00:39:11.274
or recommends all caps for buttons.
970
00:39:11.274 --> 00:39:12.726
All caps for?
971
00:39:12.726 --> 00:39:14.059
Buttons.
972
00:39:15.798 --> 00:39:17.142
No.
973
00:39:17.142 --> 00:39:19.229
And here's the thing about all caps is
974
00:39:19.229 --> 00:39:21.770
a screen reader will typically announce every letter,
975
00:39:21.770 --> 00:39:25.461
depending on the user's verbosity settings.
976
00:39:25.461 --> 00:39:28.038
So, you might put something in all caps
977
00:39:28.038 --> 00:39:31.623
and the screen reader's gonna say S-U-B-M-I-T.
978
00:39:31.623 --> 00:39:34.677
Cause it thinks it's an acronym or an abbreviation.
979
00:39:34.677 --> 00:39:37.556
So, I always encourage people to avoid all caps.
980
00:39:37.556 --> 00:39:40.031
In headings you can get away with it stylistically,
981
00:39:40.031 --> 00:39:42.142
if you're using just CSS.
982
00:39:42.142 --> 00:39:45.045
But I still always caution people to avoid all caps
983
00:39:45.045 --> 00:39:48.181
whenever possible particularly on user interface controls
984
00:39:48.181 --> 00:39:51.185
because that's where the problem manifests because
985
00:39:51.185 --> 00:39:54.815
it can prevent people from actually completing a task.
986
00:39:54.815 --> 00:39:55.818
Yeah.
987
00:39:55.818 --> 00:39:58.485
Related to that, do screen readers, do they
988
00:39:58.485 --> 00:40:02.495
interpret text transform uppercase, too?
989
00:40:02.495 --> 00:40:04.845
The screen reader bases text transform
990
00:40:04.845 --> 00:40:07.151
off of how the browser passes it.
991
00:40:07.151 --> 00:40:10.243
So, the short answer is it depends.
992
00:40:10.243 --> 00:40:12.207
It depends on the screen reader, the version,
993
00:40:12.207 --> 00:40:14.149
the browser, the version of the browser,
994
00:40:14.149 --> 00:40:16.088
how the CSS was put in there.
995
00:40:16.088 --> 00:40:19.653
So, it's not a really simple answer, it's variable.
996
00:40:19.653 --> 00:40:22.234
And that's where testing is important.
997
00:40:22.234 --> 00:40:24.837
And I've been signaled that I have to shut up.
998
00:40:24.837 --> 00:40:26.518
You didn't say it, but you were very polite about it.
999
00:40:26.518 --> 00:40:28.079
Very polite.
1000
00:40:28.079 --> 00:40:29.252
Okay, that's it.
1001
00:40:29.252 --> 00:40:33.169
Thank you.
(audience applauds)