WEBVTT

1
00:00:09.520 --> 00:00:10.353 line:15% 
<v ->So, hi.</v>

2
00:00:10.353 --> 00:00:13.120 line:15% 
Thank you for agreeing to come to this workshop.

3
00:00:14.120 --> 00:00:16.080 line:15% 
The general concept of a workshop is

4
00:00:16.080 --> 00:00:17.400 line:15% 
that we will be doing so me work.

5
00:00:17.400 --> 00:00:20.390 line:15% 
So, I will ramble on for a bit,

6
00:00:20.390 --> 00:00:22.260
and then you will do some exercises,

7
00:00:22.260 --> 00:00:23.300
and then I will ramble on,

8
00:00:23.300 --> 00:00:25.350
and then you'll be thrilled to do an exercise,

9
00:00:25.350 --> 00:00:26.183
so I stop,

10
00:00:26.183 --> 00:00:28.820
and this will repeat until we're done.

11
00:00:28.820 --> 00:00:31.000
I did not schedule a break.

12
00:00:31.000 --> 00:00:33.270
There's a lot of stuff I wanna try to cover.

13
00:00:33.270 --> 00:00:36.250
If you need to leave, go ahead.

14
00:00:36.250 --> 00:00:38.220
I'm not gonna have my feelings hurt.

15
00:00:38.220 --> 00:00:39.650
If you're a group of five, though,

16
00:00:39.650 --> 00:00:42.920
you should negotiate with a group of 12

17
00:00:42.920 --> 00:00:45.080
and figure out if you're gonna swap around,

18
00:00:45.080 --> 00:00:46.430
but I don't care that much.

19
00:00:47.780 --> 00:00:50.710
My slides will be available later

20
00:00:50.710 --> 00:00:55.250
at rosel.li/wceu18.

21
00:00:57.130 --> 00:01:00.440
That's rose.li/wceu18.

22
00:01:01.302 --> 00:01:02.610
And, at the end of the talk,

23
00:01:02.610 --> 00:01:04.460
you'll see this slide again,

24
00:01:04.460 --> 00:01:06.320
and I will Tweet the URL.

25
00:01:06.320 --> 00:01:07.330
You don't have to follow me,

26
00:01:07.330 --> 00:01:08.850
but I'll put the hashtag on there.

27
00:01:08.850 --> 00:01:09.683
If you follow me,

28
00:01:09.683 --> 00:01:11.880
you'll just block me really quickly.

29
00:01:12.820 --> 00:01:13.750
I have a schedule.

30
00:01:15.020 --> 00:01:16.570
I'm gonna pretend to follow it.

31
00:01:18.980 --> 00:01:20.210
You're already in your groups of five.

32
00:01:20.210 --> 00:01:21.260
This is awesome.

33
00:01:22.420 --> 00:01:23.460
Quick introduction,

34
00:01:23.460 --> 00:01:25.830
this is basically my ego slide.

35
00:01:25.830 --> 00:01:28.740
I do talks a bunch,

36
00:01:28.740 --> 00:01:30.260
and I do trainings as well.

37
00:01:30.260 --> 00:01:31.640
I'm terrible at both,

38
00:01:31.640 --> 00:01:34.560
and this is gonna be so much fun as a result,

39
00:01:34.560 --> 00:01:36.950
but you should know that if you're listening to me,

40
00:01:36.950 --> 00:01:38.440
I have some experience.

41
00:01:38.440 --> 00:01:40.420
I'm not making this crap up,

42
00:01:40.420 --> 00:01:41.253
and I can't make it up,

43
00:01:41.253 --> 00:01:42.450
because other people have written it,

44
00:01:42.450 --> 00:01:44.100
which is brilliant.

45
00:01:44.100 --> 00:01:45.340
I've done some books,

46
00:01:45.340 --> 00:01:46.380
they might be out of print.

47
00:01:46.380 --> 00:01:49.110
I've written for Net Magazine and Web Standards Sherpa.

48
00:01:49.110 --> 00:01:51.910
If any of you are old enough to remember evolt.org,

49
00:01:51.910 --> 00:01:53.160
that was my baby.

50
00:01:53.160 --> 00:01:54.590
I'm one of the people who founded that.

51
00:01:54.590 --> 00:01:55.423
I have this site,

52
00:01:55.423 --> 00:01:57.190
doesmysitedeserverecognition.org,

53
00:01:58.640 --> 00:02:01.070
which you can go get all sorts

54
00:02:01.070 --> 00:02:02.930
of resources for doing speed tests

55
00:02:02.930 --> 00:02:04.960
and accessibility tests, et cetera.

56
00:02:04.960 --> 00:02:08.990
I have a website where I write web-related things.

57
00:02:08.990 --> 00:02:10.360
Most of it's accessibility,

58
00:02:10.360 --> 00:02:12.260
but I rant about other things.

59
00:02:12.260 --> 00:02:14.280
That's my Twitter handle for

60
00:02:14.280 --> 00:02:16.460
quick blocking while we're here.

61
00:02:18.400 --> 00:02:21.450
I am here because of the courtesy of this incredibly

62
00:02:21.450 --> 00:02:23.897
low-contrast Paciello Group logo that I've chosen.

63
00:02:23.897 --> 00:02:25.640
(audience laughs)

64
00:02:25.640 --> 00:02:26.930
And, when they see this video,

65
00:02:26.930 --> 00:02:30.140
they're gonna be frustrated,
(audience laughs)

66
00:02:30.140 --> 00:02:31.640
and rightly so.

67
00:02:31.640 --> 00:02:34.160
Just for context, the Paciello Group does

68
00:02:34.160 --> 00:02:37.400
accessibility consulting, audits, remediation.

69
00:02:37.400 --> 00:02:40.370
They have free tools like the color contrast analyzer,

70
00:02:40.370 --> 00:02:42.380
and the web accessibility toolbar,

71
00:02:42.380 --> 00:02:44.790
and Steve Faulkner's attitude,

72
00:02:44.790 --> 00:02:47.860
all of which help the standards process,

73
00:02:47.860 --> 00:02:51.250
and they do a great job participating in standards:

74
00:02:51.250 --> 00:02:54.280
HTML, ARIA, WCAG, et cetera.

75
00:02:55.700 --> 00:02:57.660
They were kind enough to bring me on

76
00:02:57.660 --> 00:02:59.700
when I left my 20-year venture,

77
00:02:59.700 --> 00:03:00.870
because I needed health insurance,

78
00:03:00.870 --> 00:03:02.440
'cause I'm from America.

79
00:03:02.440 --> 00:03:03.910
(audience laughs)

80
00:03:03.910 --> 00:03:05.430
You laugh at that.

81
00:03:05.430 --> 00:03:06.730
It makes me uncomfortable.

82
00:03:07.740 --> 00:03:10.700
So, here's where we start.

83
00:03:10.700 --> 00:03:14.510
We are going to do a group exercise right from the get-go,

84
00:03:14.510 --> 00:03:16.700
but this is a pretty straight forward exercise.

85
00:03:16.700 --> 00:03:18.520
It isn't a heavy lift.

86
00:03:18.520 --> 00:03:19.570
I'm allotting you,

87
00:03:19.570 --> 00:03:20.450
oh, I should put up the slide

88
00:03:20.450 --> 00:03:21.490
that tells you what we're gonna do.

89
00:03:21.490 --> 00:03:23.410
I'm allotting you 15 minutes.

90
00:03:23.410 --> 00:03:25.320
What I want you to do as a group

91
00:03:25.320 --> 00:03:28.470
is come up with some sort of user interface component.

92
00:03:28.470 --> 00:03:29.680
It could be a login.

93
00:03:29.680 --> 00:03:31.100
It could be an accordion.

94
00:03:31.100 --> 00:03:32.540
It could be whatever.

95
00:03:32.540 --> 00:03:34.540
I just want you to think about what that is,

96
00:03:34.540 --> 00:03:36.520
in your group, agree what it is.

97
00:03:36.520 --> 00:03:38.190
If you want to describe it,

98
00:03:38.190 --> 00:03:41.140
just make a couple notes or sketch it out on paper,

99
00:03:41.140 --> 00:03:42.570
whatever is comfortable.

100
00:03:42.570 --> 00:03:44.470
It shouldn't take you the full 15 minutes.

101
00:03:44.470 --> 00:03:46.120
This is a bit of a buffer I built in.

102
00:03:46.120 --> 00:03:48.060
It might only take you a few minutes.

103
00:03:48.060 --> 00:03:50.300
I'm gonna ask you, after you've agreed on them,

104
00:03:50.300 --> 00:03:51.540
what you've chosen,

105
00:03:51.540 --> 00:03:52.760
and you're gonna hold onto that,

106
00:03:52.760 --> 00:03:54.530
because whatever it is,

107
00:03:54.530 --> 00:03:56.920
we're going to build on this going forward.

108
00:03:56.920 --> 00:03:58.800
So, maybe don't come up with

109
00:03:58.800 --> 00:04:01.210
a super, super weird and complex component,

110
00:04:01.210 --> 00:04:02.510
'cause I'm not telling you how to code it.

111
00:04:02.510 --> 00:04:04.980
I'm gonna try and give you the techniques,

112
00:04:04.980 --> 00:04:05.960
and maybe don't come up with

113
00:04:05.960 --> 00:04:08.960
a single form field like first name.

114
00:04:08.960 --> 00:04:10.070
Yeah, don't do that.

115
00:04:10.070 --> 00:04:11.930
That's just a cop out.

116
00:04:11.930 --> 00:04:14.470
So, in your groups you just joined,

117
00:04:14.470 --> 00:04:17.631
we have three groups of five.

118
00:04:17.631 --> 00:04:20.120
(audience laughs)

119
00:04:20.120 --> 00:04:21.220
Which one,

120
00:04:24.010 --> 00:04:26.410
oh, you have two extra people, okay.

121
00:04:26.410 --> 00:04:28.270
Both of you should join a group,

122
00:04:28.270 --> 00:04:29.780
and you're both near those two groups,

123
00:04:29.780 --> 00:04:32.920
so you're now part of those groups.

124
00:04:32.920 --> 00:04:34.060
(audience chatting)

125
00:04:34.060 --> 00:04:36.030
I feel weird telling people where to go,

126
00:04:36.030 --> 00:04:38.434
but I'm American and it's what we do.

127
00:04:38.434 --> 00:04:40.080
(audience chatting)

128
00:04:40.080 --> 00:04:42.860
Sorry, we're embroiled in a whole border nonsense,

129
00:04:42.860 --> 00:04:44.916
ah ha ha.

130
00:04:44.916 --> 00:04:46.530
(exhales loudly)

131
00:04:46.530 --> 00:04:48.170
We'll fix that in post-production.

132
00:04:48.170 --> 00:04:49.120
So, yes as groups,

133
00:04:49.120 --> 00:04:50.730
please come up with some ideas.

134
00:04:50.730 --> 00:04:51.920
Ping me with questions,

135
00:04:51.920 --> 00:04:53.770
and as soon as you're done, tell me,

136
00:04:53.770 --> 00:04:55.670
and then we'll continue with the show.

137
00:04:56.955 --> 00:04:59.955
(audience chatting)

138
00:11:18.120 --> 00:11:22.100
How's everybody doing so far?

139
00:11:22.100 --> 00:11:24.750
Are any of the groups done with their rough idea?

140
00:11:26.100 --> 00:11:27.650
You think you're in good shape?

141
00:11:28.840 --> 00:11:29.673
Okay.

142
00:11:30.840 --> 00:11:33.340
How about you middle group?

143
00:11:34.430 --> 00:11:35.920
(audience member talking)

144
00:11:35.920 --> 00:11:37.200
You don't need to sketch it.

145
00:11:37.200 --> 00:11:38.990
No, it's as much detail as you want to do,

146
00:11:38.990 --> 00:11:41.420
'cause we're gonna continue to start to build through it?

147
00:11:41.420 --> 00:11:42.253
Okay.

148
00:11:42.253 --> 00:11:43.680
And, I'll check with this last group

149
00:11:43.680 --> 00:11:45.390
to see how they are doing,

150
00:11:45.390 --> 00:11:49.585
the group on the right.
(audience chatting)

151
00:11:49.585 --> 00:11:51.780
Do you think you're in a good spot to continue?

152
00:11:51.780 --> 00:11:52.901
Okay.

153
00:11:52.901 --> 00:11:54.200
All right, no pressure,

154
00:11:54.200 --> 00:11:55.781
no pressure or anything.

155
00:11:55.781 --> 00:11:58.781
(audience chatting)

156
00:12:02.620 --> 00:12:05.257
Okay, the good news is you're all still working.

157
00:12:05.257 --> 00:12:06.940
(audience chatting)

158
00:12:06.940 --> 00:12:08.440
Maybe I should leave.

159
00:12:08.440 --> 00:12:11.440
(audience chatting)

160
00:14:37.920 --> 00:14:39.684
What are you doing?

161
00:14:39.684 --> 00:14:41.540
(audience member laughs)

162
00:14:41.540 --> 00:14:42.373
Okay.

163
00:14:44.210 --> 00:14:45.340
Everybody is finished,

164
00:14:45.340 --> 00:14:46.780
and as soon as I walk away from the table,

165
00:14:46.780 --> 00:14:48.178
they start going again.

166
00:14:48.178 --> 00:14:49.490
(audience laughs)

167
00:14:49.490 --> 00:14:51.550
This fills me with hope,

168
00:14:51.550 --> 00:14:53.220
but it's also the exercise where I gave you

169
00:14:53.220 --> 00:14:55.030
the least direction intentionally,

170
00:14:55.030 --> 00:14:57.400
and now y'all are gonna be really upset

171
00:14:57.400 --> 00:14:59.460
as I start narrow down this focus.

172
00:14:59.460 --> 00:15:00.730
You'll be like, "Oh, come on."

173
00:15:00.730 --> 00:15:02.160
We were drawing pictures,

174
00:15:02.160 --> 00:15:03.050
and that was fun.

175
00:15:04.142 --> 00:15:05.000
(exhales loudly)

176
00:15:05.000 --> 00:15:06.950
So, I'm gonna go through a primer here.

177
00:15:08.140 --> 00:15:10.070
I'm sorry if you have to keep messing with the levels.

178
00:15:10.070 --> 00:15:11.370
I'm just all over the map.

179
00:15:13.230 --> 00:15:16.180
Did any of you attend Maya's workshop yesterday?

180
00:15:16.180 --> 00:15:18.060
Or, not workshop, her talk yesterday?

181
00:15:18.060 --> 00:15:18.893
Okay.

182
00:15:18.893 --> 00:15:20.870
So, for everybody else,

183
00:15:20.870 --> 00:15:22.310
this might be useful.

184
00:15:22.310 --> 00:15:24.930
If you've seen the a11y before,

185
00:15:24.930 --> 00:15:26.510
sometimes pronounced, el-lee,

186
00:15:26.510 --> 00:15:28.480
sometimes pronounced el-eye.

187
00:15:28.480 --> 00:15:31.130
It's just good to know the root of it,

188
00:15:31.130 --> 00:15:33.860
primarily because once you see people

189
00:15:33.860 --> 00:15:35.290
in the industry talking about it,

190
00:15:35.290 --> 00:15:39.930
you won't necessarily get why we got where we are.

191
00:15:41.568 --> 00:15:42.560
I've done a lot of work with

192
00:15:42.560 --> 00:15:44.330
localization and internationalization,

193
00:15:44.330 --> 00:15:45.810
but in the U.S.,

194
00:15:45.810 --> 00:15:49.010
so our words are localization, internationalization,

195
00:15:49.010 --> 00:15:52.230
and we do l10, i18n.

196
00:15:52.230 --> 00:15:53.600
The general just is you remove

197
00:15:53.600 --> 00:15:55.640
all the letters from the middle of the word,

198
00:15:55.640 --> 00:15:58.270
and you replace all those letters with the count

199
00:15:58.270 --> 00:15:59.550
of letters that you replaced,

200
00:15:59.550 --> 00:16:00.383
that you removed.

201
00:16:00.383 --> 00:16:02.560
So, A, 11, for the 11 letters,

202
00:16:02.560 --> 00:16:03.393
and then y.

203
00:16:04.810 --> 00:16:06.660
In particular, this is the hash tag

204
00:16:06.660 --> 00:16:08.710
you'll stumble across on Twitter.

205
00:16:08.710 --> 00:16:09.760
Pound, a11y,

206
00:16:09.760 --> 00:16:11.950
hashtag a11y.

207
00:16:11.950 --> 00:16:13.920
Some people also will write accessibility.

208
00:16:13.920 --> 00:16:16.560
They'll write some other things as well.

209
00:16:16.560 --> 00:16:20.100
It also is used interchangeably to mean accessible,

210
00:16:21.330 --> 00:16:22.460
because that's easier,

211
00:16:23.330 --> 00:16:26.230
and a lot of people can figure that out from context clues.

212
00:16:26.230 --> 00:16:30.850
So, the good thing is if you just want to see

213
00:16:30.850 --> 00:16:32.900
currently what people are chatting about,

214
00:16:32.900 --> 00:16:34.600
on Twitter as an example,

215
00:16:34.600 --> 00:16:35.770
hashtag a11y,

216
00:16:36.660 --> 00:16:38.680
and now, if you didn't already know,

217
00:16:38.680 --> 00:16:42.870
it's a numeronym for accessibility and yay.

218
00:16:45.680 --> 00:16:49.440
World Health Organization has this definition of disability.

219
00:16:49.440 --> 00:16:50.720
I like this definition.

220
00:16:50.720 --> 00:16:53.730
I think this definition appeals very well

221
00:16:53.730 --> 00:16:56.390
to people who work in software,

222
00:16:56.390 --> 00:16:57.440
software development.

223
00:16:58.880 --> 00:17:01.050
Disability is not just a health problem.

224
00:17:01.050 --> 00:17:02.890
It is a complex phenomenon

225
00:17:02.890 --> 00:17:04.349
reflecting the interaction between

226
00:17:04.349 --> 00:17:06.510
features of a person's body,

227
00:17:06.510 --> 00:17:09.280
and features of the society in which he or she lives.

228
00:17:11.630 --> 00:17:12.463
Features,

229
00:17:14.170 --> 00:17:16.800
as people who work with Word Press,

230
00:17:16.800 --> 00:17:18.400
work with software,

231
00:17:18.400 --> 00:17:20.200
features are things that we talk about.

232
00:17:20.200 --> 00:17:22.710
We understand this concept of features.

233
00:17:22.710 --> 00:17:26.110
If we just think of disability as a feature mismatch,

234
00:17:27.240 --> 00:17:30.810
I have a feature where I have no legs,

235
00:17:30.810 --> 00:17:33.560
but this building doesn't have a feature

236
00:17:33.560 --> 00:17:35.930
that makes it easy for me to get in.

237
00:17:35.930 --> 00:17:37.020
Maybe it doesn't have a ramp,

238
00:17:37.020 --> 00:17:38.800
and it's not specifically this building,

239
00:17:38.800 --> 00:17:40.520
but many other buildings.

240
00:17:40.520 --> 00:17:43.620
I have a feature where I can only see two colors,

241
00:17:45.000 --> 00:17:47.850
but all the signage is in red or green.

242
00:17:48.890 --> 00:17:51.600
They don't have a feature to support my feature set.

243
00:17:53.440 --> 00:17:55.290
There's varying success with getting people

244
00:17:55.290 --> 00:17:56.640
to think about it that way,

245
00:17:57.780 --> 00:17:59.910
but the World Health Organization does a good job

246
00:17:59.910 --> 00:18:03.540
of trying to pull it away from being limitations of people

247
00:18:03.540 --> 00:18:06.000
and recognize that it's also limitations

248
00:18:06.000 --> 00:18:08.480
of society's inability to recognize,

249
00:18:08.480 --> 00:18:09.930
"Yeah, people have different needs."

250
00:18:09.930 --> 00:18:13.720
Temporary needs, situational needs, or permanent needs,

251
00:18:13.720 --> 00:18:16.670
and I will go through some of those later on.

252
00:18:16.670 --> 00:18:18.060
I'm gonna contrast this, though,

253
00:18:18.060 --> 00:18:20.040
with what the World Health Organization's

254
00:18:20.040 --> 00:18:23.520
definition was in 1980 for disability.

255
00:18:24.730 --> 00:18:26.970
"In the context of health experience,

256
00:18:26.970 --> 00:18:30.840
"a disability is any restriction or lack of ability,

257
00:18:30.840 --> 00:18:32.830
"resulting from an impairment,

258
00:18:32.830 --> 00:18:35.040
"to perform an activity in the manner

259
00:18:35.040 --> 00:18:38.260
"or within the range considered normal for a human being."

260
00:18:40.170 --> 00:18:42.420
So, I live in this world where I work

261
00:18:42.420 --> 00:18:44.190
on accessibility stuff all the time,

262
00:18:44.190 --> 00:18:47.160
and the word normal is a dangerous word.

263
00:18:47.160 --> 00:18:48.150
It's not a bad word,

264
00:18:48.150 --> 00:18:49.640
but it's a dangerous word,

265
00:18:49.640 --> 00:18:50.680
because as soon as you start

266
00:18:50.680 --> 00:18:52.940
making assumptions about what is normal,

267
00:18:52.940 --> 00:18:54.960
you're excluding somebody.

268
00:18:54.960 --> 00:18:57.420
This isn't just about accessibility, though.

269
00:18:57.420 --> 00:19:00.490
I assume it's normal for everybody I work with

270
00:19:00.490 --> 00:19:03.800
to have a 5G connection and a totally sweet phone,

271
00:19:05.740 --> 00:19:07.400
but that's not normal.

272
00:19:07.400 --> 00:19:09.680
In the context of a global audience,

273
00:19:09.680 --> 00:19:11.770
that's very much the opposite of normal.

274
00:19:11.770 --> 00:19:14.540
I can expect less than 2G connection

275
00:19:14.540 --> 00:19:16.340
off a rickety feature phone

276
00:19:16.340 --> 00:19:19.030
that actually might be more secure than mine.

277
00:19:19.030 --> 00:19:20.900
So, it's not about a disability.

278
00:19:20.900 --> 00:19:24.170
It's about this concept of normal versus not normal,

279
00:19:24.170 --> 00:19:25.880
seeing things through those different lenses

280
00:19:25.880 --> 00:19:27.920
and those different perspectives.

281
00:19:27.920 --> 00:19:31.310
And, that's why I'm such a fan of this re-definition

282
00:19:31.310 --> 00:19:33.860
about a feature mismatch between

283
00:19:33.860 --> 00:19:36.310
users and the things they use.

284
00:19:36.310 --> 00:19:37.650
It's the real world.

285
00:19:37.650 --> 00:19:38.880
It's software.

286
00:19:38.880 --> 00:19:39.860
It's a box of cereal.

287
00:19:39.860 --> 00:19:41.450
It's all those things.

288
00:19:41.450 --> 00:19:43.910
I might be the only one who struggles with a box of cereal.

289
00:19:45.790 --> 00:19:47.510
Any questions on this bit?

290
00:19:49.070 --> 00:19:49.903
Okay.

291
00:19:51.250 --> 00:19:53.360
I tweeted the agenda earlier today.

292
00:19:54.520 --> 00:19:57.090
I wanna manage your expectations about

293
00:19:57.090 --> 00:19:58.370
what we're going through today

294
00:19:58.370 --> 00:20:01.640
over the course of the next two and a half hours.

295
00:20:01.640 --> 00:20:03.010
You've already done one exercise,

296
00:20:03.010 --> 00:20:04.300
so that's one out of the way.

297
00:20:04.300 --> 00:20:05.280
Whew.

298
00:20:05.280 --> 00:20:08.140
I did the primer, sort of.

299
00:20:08.140 --> 00:20:10.100
I'm going to talk about disability types,

300
00:20:10.100 --> 00:20:11.870
how it affects other people.

301
00:20:11.870 --> 00:20:14.630
We're gonna break into another exercise.

302
00:20:14.630 --> 00:20:15.831
I'll talk a little bit about

303
00:20:15.831 --> 00:20:18.370
user experience, personas, et cetera,

304
00:20:19.320 --> 00:20:20.550
another exercise,

305
00:20:21.840 --> 00:20:23.120
then there's a big chunk where

306
00:20:23.120 --> 00:20:24.390
I'll talk about technical bits,

307
00:20:24.390 --> 00:20:26.740
which aren't really technical, but sure.

308
00:20:27.660 --> 00:20:29.070
We'll do a final exercise,

309
00:20:29.070 --> 00:20:30.210
and we'll wrap the whole thing up,

310
00:20:30.210 --> 00:20:34.379
and then you can all go to the venue to get drunk.

311
00:20:34.379 --> 00:20:36.520
(audience laughs)

312
00:20:36.520 --> 00:20:39.400
I mean, you might wait a couple hours if you're smart,

313
00:20:40.330 --> 00:20:41.163
or not.

314
00:20:41.163 --> 00:20:42.470
If you can get a cab.

315
00:20:42.470 --> 00:20:45.080
Anybody else struggle getting a cab last night?

316
00:20:45.080 --> 00:20:47.050
Yeah, okay, glad it wasn't just me.

317
00:20:47.050 --> 00:20:48.694
It was very, very wet out.

318
00:20:48.694 --> 00:20:52.194
(audience member talking)

319
00:20:54.240 --> 00:20:55.740
I found a car service,

320
00:20:55.740 --> 00:20:57.920
and I managed to get a handful of other people

321
00:20:57.920 --> 00:20:59.380
into the cab with me.

322
00:20:59.380 --> 00:21:00.330
It worked out well.

323
00:21:01.310 --> 00:21:02.580
But, we're not here to talk about

324
00:21:02.580 --> 00:21:07.210
the woes of bus route 95 and local car services.

325
00:21:07.210 --> 00:21:09.310
We're here to talk about this stuff.

326
00:21:09.310 --> 00:21:13.640
So, I put together a list of disability types,

327
00:21:13.640 --> 00:21:15.090
just a high level list.

328
00:21:16.460 --> 00:21:18.290
General concept here is everybody is different.

329
00:21:18.290 --> 00:21:19.790
No two people are alike,

330
00:21:20.680 --> 00:21:23.520
and we tend to forget that there are a lot

331
00:21:23.520 --> 00:21:26.190
of different things that people can do,

332
00:21:26.190 --> 00:21:28.630
or feel, or perceive than we're used to,

333
00:21:28.630 --> 00:21:30.080
normal versus not normal.

334
00:21:31.120 --> 00:21:33.490
So, there are physical impairments.

335
00:21:33.490 --> 00:21:36.510
Some examples: epilepsy, mobility impairment,

336
00:21:36.510 --> 00:21:38.070
which could be confined to a wheelchair.

337
00:21:38.070 --> 00:21:39.360
Confined is the wrong word.

338
00:21:39.360 --> 00:21:40.280
Do not use it,

339
00:21:40.280 --> 00:21:41.380
but a wheelchair user.

340
00:21:42.590 --> 00:21:43.850
Maybe fine motor skills,

341
00:21:43.850 --> 00:21:45.410
they don't have precision.

342
00:21:46.280 --> 00:21:49.320
Hearing, deaf, hard of hearing,

343
00:21:49.320 --> 00:21:51.800
hard of hearing itself can break down in multiple ways.

344
00:21:51.800 --> 00:21:54.810
They struggle with mid-range or high-range,

345
00:21:54.810 --> 00:21:56.490
high-end sounds.

346
00:21:56.490 --> 00:21:59.980
There are buildings in America where they keep

347
00:22:00.840 --> 00:22:03.270
kids from hanging out after school by playing

348
00:22:03.270 --> 00:22:05.960
really high-pitched sounds through speakers,

349
00:22:05.960 --> 00:22:08.550
and only kids like 18 and younger hear it,

350
00:22:08.550 --> 00:22:09.970
and they're like, "I don't wanna be here.

351
00:22:09.970 --> 00:22:11.450
"This sounds stupid."

352
00:22:11.450 --> 00:22:14.320
And, then people in my age bracket can't hear it,

353
00:22:15.170 --> 00:22:18.006
so we get to chill and skateboard outside the building.

354
00:22:18.006 --> 00:22:20.080
(audience laughs)

355
00:22:20.080 --> 00:22:21.730
You don't think I can skateboard?

356
00:22:23.220 --> 00:22:26.870
Vision, color blindness, low vision.

357
00:22:26.870 --> 00:22:29.250
Low vision comes in many flavors.

358
00:22:30.280 --> 00:22:31.810
I'll touch on some of those as well,

359
00:22:31.810 --> 00:22:33.200
and then there's full blindness,

360
00:22:33.200 --> 00:22:34.630
and we tend to break these apart,

361
00:22:34.630 --> 00:22:36.640
which I will show momentarily as well.

362
00:22:37.590 --> 00:22:40.050
Cognitive is a lot tougher,

363
00:22:40.050 --> 00:22:43.610
because it manifests in so many different ways,

364
00:22:43.610 --> 00:22:45.260
and whether or not you like it,

365
00:22:45.260 --> 00:22:47.620
we all have cognitive issues.

366
00:22:49.050 --> 00:22:51.170
I guarantee you at the end of tonight,

367
00:22:51.170 --> 00:22:53.200
you will all have cognitive issues.

368
00:22:53.200 --> 00:22:54.560
(audience laughs)

369
00:22:54.560 --> 00:22:55.711
Just sayin'.

370
00:22:55.711 --> 00:22:58.270
ADD, attention deficit disorder,

371
00:22:58.270 --> 00:23:00.560
attention deficit hyperactive disorder,

372
00:23:00.560 --> 00:23:04.280
autism, which itself is a huge scale

373
00:23:04.280 --> 00:23:07.180
that manifests in a lot of different ways.

374
00:23:07.180 --> 00:23:09.870
Dyslexia, which is struggling with reading.

375
00:23:11.080 --> 00:23:12.450
Texts can be confusing,

376
00:23:12.450 --> 00:23:14.240
what the letters and the shapes are.

377
00:23:14.240 --> 00:23:16.920
Dyscalculia is the numbers version of dyslexia.

378
00:23:16.920 --> 00:23:18.920
You struggle when you look at the numbers,

379
00:23:18.920 --> 00:23:20.920
and then general learning and language.

380
00:23:21.770 --> 00:23:23.520
It turns out I don't speak Serbian.

381
00:23:24.680 --> 00:23:26.499
I just discovered that.

382
00:23:26.499 --> 00:23:27.750
I was so cocky when I flew here.

383
00:23:27.750 --> 00:23:29.700
I'm like, "This is gonna be all right."

384
00:23:30.540 --> 00:23:31.440
And, then speech,

385
00:23:31.440 --> 00:23:33.540
and speech is becoming more and more prominent,

386
00:23:33.540 --> 00:23:37.350
because we are moving more and more to voice interfaces.

387
00:23:37.350 --> 00:23:40.840
I have a thing in my house that when I ask it the weather,

388
00:23:40.840 --> 00:23:42.020
it tells me,

389
00:23:42.020 --> 00:23:43.950
and fortunately, it can understand me.

390
00:23:46.000 --> 00:23:47.530
People who stutter,

391
00:23:47.530 --> 00:23:49.820
people who might be nonverbal,

392
00:23:49.820 --> 00:23:51.150
cluttering, apraxia,

393
00:23:51.150 --> 00:23:52.930
all these are things that can limit their ability

394
00:23:52.930 --> 00:23:54.830
to use some of these newer interfaces.

395
00:23:56.108 --> 00:23:56.941
<v Audience Member>What is apraxia?</v>

396
00:23:59.400 --> 00:24:00.620
<v ->The very fact of you asking me</v>

397
00:24:00.620 --> 00:24:02.505
caused my brain to blank on it.

398
00:24:02.505 --> 00:24:03.530
(audience member laughs)

399
00:24:03.530 --> 00:24:04.363
Oh.

400
00:24:06.316 --> 00:24:08.350
I'm gonna look that up during the break and get back to you.

401
00:24:08.350 --> 00:24:09.183
When I put it in here,

402
00:24:09.183 --> 00:24:10.790
I was like, "Oh, everybody," yeah.

403
00:24:13.680 --> 00:24:15.530
I didn't even make a note for myself.

404
00:24:17.810 --> 00:24:20.770
We are going to talk about the disability types

405
00:24:20.770 --> 00:24:21.950
broken down this way,

406
00:24:23.620 --> 00:24:25.160
as these six.

407
00:24:25.160 --> 00:24:29.330
Now, conveniently I asked you to break into groups of five,

408
00:24:29.330 --> 00:24:30.750
but some of you are groups of six.

409
00:24:30.750 --> 00:24:33.340
This might become relevant in our next exercise.

410
00:24:34.580 --> 00:24:35.413
Blindness,

411
00:24:37.590 --> 00:24:39.620
low vision, including color blindness,

412
00:24:39.620 --> 00:24:41.500
separate from blindness,

413
00:24:41.500 --> 00:24:42.520
deaf and hard of hearing,

414
00:24:42.520 --> 00:24:44.250
speech, physical,

415
00:24:44.250 --> 00:24:46.560
intellectual and cognitive.

416
00:24:46.560 --> 00:24:49.290
These are the groupings that we're going to keep today,

417
00:24:49.290 --> 00:24:53.260
and I'm going to run through attributes of each of these.

418
00:24:55.440 --> 00:24:57.720
A blind user cannot see the screen,

419
00:24:58.750 --> 00:24:59.583
as simple as that.

420
00:24:59.583 --> 00:25:01.480
If you're blind, you just can't see the screen.

421
00:25:01.480 --> 00:25:02.560
You can't see the keyboard.

422
00:25:02.560 --> 00:25:03.720
You can't see the mouse.

423
00:25:03.720 --> 00:25:05.670
Your way of using a computer,

424
00:25:05.670 --> 00:25:07.010
navigating the world,

425
00:25:07.010 --> 00:25:09.610
interacting with people is dramatically different.

426
00:25:11.160 --> 00:25:14.910
You are probably a screen reader user,

427
00:25:14.910 --> 00:25:19.860
which means you rely on the computer to talk to you.

428
00:25:19.860 --> 00:25:22.370
The computer talks to you based on

429
00:25:22.370 --> 00:25:24.310
what the software tells it to say.

430
00:25:25.670 --> 00:25:27.200
So, whoever wrote that software

431
00:25:27.200 --> 00:25:29.060
hopefully did a really good job.

432
00:25:29.060 --> 00:25:30.460
Oh, by the way, they didn't.

433
00:25:31.820 --> 00:25:33.470
You're also a keyboard-only user.

434
00:25:36.160 --> 00:25:37.763
A blind user is not using a mouse.

435
00:25:37.763 --> 00:25:39.165
It's totally impractical.

436
00:25:39.165 --> 00:25:40.620
Now, there's a little bit of an exception

437
00:25:40.620 --> 00:25:42.630
to the keyboard-only user.

438
00:25:42.630 --> 00:25:45.490
If you're using a mobile device or a touch screen,

439
00:25:46.980 --> 00:25:50.010
a lot of blind people have keyboards.

440
00:25:50.010 --> 00:25:51.920
I have a Bluetooth keyboard

441
00:25:51.920 --> 00:25:53.270
that I use with this all the time,

442
00:25:53.270 --> 00:25:55.210
'cause I don't wanna pull out my laptop,

443
00:25:55.210 --> 00:25:56.310
but at the same time,

444
00:25:56.310 --> 00:25:58.230
there's something called Explore by Touch,

445
00:25:58.230 --> 00:25:59.970
or just I'll swipe right.

446
00:26:01.510 --> 00:26:03.490
It's not a Tinder reference.

447
00:26:03.490 --> 00:26:04.937
I discovered that the hard way.

448
00:26:04.937 --> 00:26:06.212
(audience laughs)

449
00:26:06.212 --> 00:26:07.126
Oh, good, you know what Tinder is.

450
00:26:07.126 --> 00:26:10.490
(audience laughs)

451
00:26:10.490 --> 00:26:12.057
Awkward.
(audience laughs)

452
00:26:12.057 --> 00:26:14.030
But, they literally tab through

453
00:26:14.030 --> 00:26:16.740
as if they're pressing the tab key by just over,

454
00:26:16.740 --> 00:26:18.200
and over, and over.

455
00:26:18.200 --> 00:26:19.400
So, they're not keyboard users,

456
00:26:19.400 --> 00:26:20.650
but their interaction might be

457
00:26:20.650 --> 00:26:22.480
very similar to a keyboard user.

458
00:26:23.800 --> 00:26:26.770
As such, they rely on a webpage,

459
00:26:26.770 --> 00:26:28.910
core thing we're here talking about.

460
00:26:28.910 --> 00:26:32.440
They rely on a webpage that has good headings.

461
00:26:32.440 --> 00:26:35.190
They want the headings on the page to make sense.

462
00:26:35.190 --> 00:26:36.700
It tells them where they are.

463
00:26:36.700 --> 00:26:38.590
It gives them context for where they are

464
00:26:38.590 --> 00:26:40.540
in the page at any time.

465
00:26:40.540 --> 00:26:41.980
Proper form elements,

466
00:26:41.980 --> 00:26:44.480
native form elements ideally.

467
00:26:44.480 --> 00:26:47.440
You can still code custom, brand new form elements,

468
00:26:47.440 --> 00:26:49.060
but you run the risk of breaking them

469
00:26:49.060 --> 00:26:50.510
and making them inaccessible.

470
00:26:51.480 --> 00:26:53.410
Good ole fashion links.

471
00:26:53.410 --> 00:26:54.243
Links are great,

472
00:26:54.243 --> 00:26:56.910
especially when the link text is useful.

473
00:26:56.910 --> 00:26:57.820
Takes people places,

474
00:26:57.820 --> 00:26:59.340
they know what to expect,

475
00:26:59.340 --> 00:27:00.460
and landmarks.

476
00:27:00.460 --> 00:27:01.860
The cool thing about landmarks

477
00:27:01.860 --> 00:27:03.500
is they come in HTML5,

478
00:27:03.500 --> 00:27:04.950
they come for free,

479
00:27:04.950 --> 00:27:06.310
and I'll review some of those

480
00:27:06.310 --> 00:27:08.010
later on in the technical section.

481
00:27:10.840 --> 00:27:14.140
Low vision users separate from blind users.

482
00:27:14.140 --> 00:27:17.100
Low vision users rely on different technologies

483
00:27:17.100 --> 00:27:19.800
than blind users for the most part.

484
00:27:19.800 --> 00:27:21.290
They may use a screen reader.

485
00:27:22.790 --> 00:27:25.730
We know from some surveys,

486
00:27:25.730 --> 00:27:27.560
which are not the same as rigorous studies,

487
00:27:27.560 --> 00:27:29.080
but still very helpful.

488
00:27:29.080 --> 00:27:31.400
We know from surveys of screen reader users

489
00:27:31.400 --> 00:27:33.540
that only two thirds of them are blind.

490
00:27:33.540 --> 00:27:36.000
That means a full third of screen reader users

491
00:27:36.000 --> 00:27:38.630
either have low vision or aren't blind at all,

492
00:27:38.630 --> 00:27:40.300
have any vision issues,

493
00:27:40.300 --> 00:27:43.650
and maybe they use it for cognitive reasons.

494
00:27:43.650 --> 00:27:45.400
They might have dyslexia.

495
00:27:45.400 --> 00:27:47.500
So, not all screen reader users are blind.

496
00:27:49.180 --> 00:27:51.990
Windows has a high contrast mode built right into it.

497
00:27:51.990 --> 00:27:53.590
If you're using Windows high contrast mode,

498
00:27:53.590 --> 00:27:54.430
you're probably using it

499
00:27:54.430 --> 00:27:56.630
with Microsoft Edge or Internet Explorer,

500
00:27:56.630 --> 00:27:58.740
because they natively support it,

501
00:27:58.740 --> 00:28:01.370
and they do a lot of cool things with system colors.

502
00:28:02.820 --> 00:28:05.270
Low vision users may not be able to differentiate colors.

503
00:28:05.270 --> 00:28:07.510
They might be red, green color blind,

504
00:28:07.510 --> 00:28:08.380
blue, green.

505
00:28:08.380 --> 00:28:10.010
They may be monochromatic.

506
00:28:10.010 --> 00:28:12.370
They might not be able to see any color.

507
00:28:12.370 --> 00:28:15.350
Low vision users may scale fonts.

508
00:28:15.350 --> 00:28:17.500
The base font of their system might be bigger.

509
00:28:17.500 --> 00:28:19.370
They may also zoom in on a page.

510
00:28:19.370 --> 00:28:20.980
They may use a screen magnifier.

511
00:28:21.900 --> 00:28:23.450
Screen magnifier is kind of tricky,

512
00:28:23.450 --> 00:28:26.820
because it only shows you part of the screen at a time,

513
00:28:26.820 --> 00:28:31.820
so if you zoomed in this portion,

514
00:28:32.010 --> 00:28:34.080
and something important happens down here,

515
00:28:34.080 --> 00:28:35.330
they're not gonna see it,

516
00:28:35.330 --> 00:28:37.960
even if it only happens to the right.

517
00:28:37.960 --> 00:28:41.530
They tend to rely on good contrast and scaling type faces.

518
00:28:43.975 --> 00:28:45.690
The good contrast is particularly true

519
00:28:45.690 --> 00:28:49.340
for pretty much everybody who has vision issues.

520
00:28:49.340 --> 00:28:51.290
And, it's worth noting that low vision,

521
00:28:52.810 --> 00:28:53.643
not just color blind,

522
00:28:53.643 --> 00:28:54.930
but I was gonna mention a couple of others.

523
00:28:54.930 --> 00:28:57.780
There's where the center of your field of vision is gone.

524
00:28:58.840 --> 00:29:00.830
There's variation where the periphery

525
00:29:00.830 --> 00:29:02.030
of your field of vision is gone.

526
00:29:02.030 --> 00:29:05.130
There's also cases where everything's very blurry,

527
00:29:05.130 --> 00:29:07.460
or there are a lot of floaters in their view.

528
00:29:07.460 --> 00:29:10.430
The point is, there's no one, single type of low vision.

529
00:29:11.680 --> 00:29:14.270
One example that I've seen used a few times

530
00:29:14.270 --> 00:29:15.630
is just look through a straw,

531
00:29:15.630 --> 00:29:17.940
just experience looking through a straw,

532
00:29:17.940 --> 00:29:20.580
and how difficult it might be to use your software.

533
00:29:20.580 --> 00:29:22.780
Another is smearing Vaseline on your screen.

534
00:29:23.720 --> 00:29:25.050
Also, from practical experience,

535
00:29:25.050 --> 00:29:27.390
don't do that to your coworkers.

536
00:29:27.390 --> 00:29:28.340
They frown on that.

537
00:29:31.290 --> 00:29:32.740
Deaf and hard of hearing,

538
00:29:32.740 --> 00:29:35.390
they will not hear audio cues.

539
00:29:35.390 --> 00:29:40.020
If you have a webpage or software that beeps, or blurps,

540
00:29:40.020 --> 00:29:42.430
or makes other weird noises to alert them of something,

541
00:29:42.430 --> 00:29:43.640
they're not going to know.

542
00:29:44.623 --> 00:29:45.720
So, you have to bear in mind,

543
00:29:45.720 --> 00:29:48.120
earcons, as some people call them,

544
00:29:48.120 --> 00:29:49.020
will be useless.

545
00:29:50.000 --> 00:29:52.550
If you have captions for your video,

546
00:29:52.550 --> 00:29:54.030
and they are not synchronized,

547
00:29:54.030 --> 00:29:55.500
they may struggle to understand

548
00:29:55.500 --> 00:29:56.950
what's going on in the scene.

549
00:29:58.756 --> 00:30:00.256
If the captions are showing up

550
00:30:01.140 --> 00:30:03.200
a few seconds after the person who spoke,

551
00:30:03.200 --> 00:30:06.290
it might look like a different person is speaking

552
00:30:06.290 --> 00:30:08.670
or they might not understand what else is on the screen,

553
00:30:08.670 --> 00:30:09.770
and how it's relevant.

554
00:30:11.510 --> 00:30:14.730
In the case of American Sign Language,

555
00:30:14.730 --> 00:30:16.480
that might be their first language.

556
00:30:16.480 --> 00:30:18.170
If they were born deaf,

557
00:30:18.170 --> 00:30:20.560
they've never spoken English.

558
00:30:20.560 --> 00:30:21.950
They might read English,

559
00:30:21.950 --> 00:30:25.900
but their first language is a symbolic language.

560
00:30:25.900 --> 00:30:26.910
It's sign language.

561
00:30:28.060 --> 00:30:29.690
And, there's not just American Sign Language.

562
00:30:29.690 --> 00:30:30.810
There's British Sign Language.

563
00:30:30.810 --> 00:30:33.170
There's Dutch Sign Language, and on, and on, and on.

564
00:30:33.170 --> 00:30:34.720
So, you still have all the translation issues

565
00:30:34.720 --> 00:30:36.370
that come along with that as well.

566
00:30:37.790 --> 00:30:40.600
They tend to rely on good captions

567
00:30:40.600 --> 00:30:41.900
that are clear and concise,

568
00:30:41.900 --> 00:30:42.940
visual cues,

569
00:30:44.090 --> 00:30:45.270
color cues,

570
00:30:45.270 --> 00:30:46.890
and haptic cues.

571
00:30:46.890 --> 00:30:48.640
So, if I have a phone,

572
00:30:48.640 --> 00:30:49.640
and I'm getting e-mail,

573
00:30:49.640 --> 00:30:50.473
and it dings,

574
00:30:50.473 --> 00:30:52.020
I'm not going to hear it,

575
00:30:52.020 --> 00:30:54.320
but I will feel it vibrate if I'm carrying it.

576
00:30:55.570 --> 00:30:59.840
On MacOS, if I go into the accessibility settings,

577
00:30:59.840 --> 00:31:02.760
I can enable a feature that whenever my Mac makes a sound,

578
00:31:02.760 --> 00:31:04.670
the screen flashes,

579
00:31:04.670 --> 00:31:05.910
and when the screen flashes,

580
00:31:05.910 --> 00:31:06.910
I don't need to have heard it,

581
00:31:06.910 --> 00:31:08.340
just a quick flash,

582
00:31:08.340 --> 00:31:10.000
and I do what I need to do.

583
00:31:10.000 --> 00:31:12.730
And, one of the guys I work with relies on that,

584
00:31:12.730 --> 00:31:15.120
because he often works in loud spaces,

585
00:31:15.970 --> 00:31:18.850
and it makes it much easier for him to know that

586
00:31:18.850 --> 00:31:19.683
he's got an alert,

587
00:31:19.683 --> 00:31:21.450
because there's a quick flash.

588
00:31:21.450 --> 00:31:22.730
Single strobe,

589
00:31:22.730 --> 00:31:24.730
no risk of anything bad happening there.

590
00:31:25.670 --> 00:31:28.220
This is me checking to make I'm not falling behind,

591
00:31:29.170 --> 00:31:30.250
'cause if I'm behind,

592
00:31:30.250 --> 00:31:32.360
y'all are getting to drinks later.

593
00:31:32.360 --> 00:31:33.690
That's bad news.

594
00:31:35.120 --> 00:31:36.400
Speech,

595
00:31:36.400 --> 00:31:39.920
somebody with a speech impairment may speak less clearly.

596
00:31:39.920 --> 00:31:41.600
They may also be nonverbal.

597
00:31:41.600 --> 00:31:43.300
They might not speak at all.

598
00:31:43.300 --> 00:31:45.400
They might even be capable of speaking,

599
00:31:45.400 --> 00:31:49.660
but not have the understanding of how to make words.

600
00:31:49.660 --> 00:31:52.590
They can be stymied by voice interfaces.

601
00:31:52.590 --> 00:31:55.070
Phone interaction might not be possible.

602
00:31:55.070 --> 00:31:58.150
So, call our number if you have a problem with our website,

603
00:31:58.150 --> 00:31:58.983
no.

604
00:32:00.580 --> 00:32:02.420
Those voice menus,

605
00:32:02.420 --> 00:32:04.510
"Say one to call,"

606
00:32:04.510 --> 00:32:06.850
or, "Say zero to speak to a representative,"

607
00:32:06.850 --> 00:32:07.683
no.

608
00:32:08.580 --> 00:32:09.413
The worst would be somebody

609
00:32:09.413 --> 00:32:11.750
who's nonverbal with a rotary phone.

610
00:32:11.750 --> 00:32:13.700
Anybody remember rotary phones?

611
00:32:13.700 --> 00:32:15.200
Yeah, that'd be terrible.

612
00:32:16.150 --> 00:32:18.380
And, they may use assistive technology,

613
00:32:18.380 --> 00:32:21.320
and they may use it in ways that you did not consider.

614
00:32:22.460 --> 00:32:24.810
But, typically they rely on other interactions,

615
00:32:24.810 --> 00:32:26.370
a lot of visual interactions,

616
00:32:26.370 --> 00:32:28.100
a lot of cues from color,

617
00:32:28.100 --> 00:32:30.010
a lot of cues from visual texture.

618
00:32:34.078 --> 00:32:35.800
What's the word for the interfaces that looked like

619
00:32:35.800 --> 00:32:37.842
they're based on real world stuff?

620
00:32:37.842 --> 00:32:39.950
(audience members talking)

621
00:32:39.950 --> 00:32:40.783
I'm sorry?

622
00:32:40.783 --> 00:32:41.616
<v Audience Member>Skin Morfect.</v>

623
00:32:41.616 --> 00:32:42.550
<v ->Skin Morfect, yes,</v>

624
00:32:42.550 --> 00:32:43.900
which in retrospect,

625
00:32:43.900 --> 00:32:47.610
I can't expect non-English speakers to know Skin Morfect.

626
00:32:48.790 --> 00:32:50.387
So, interfaces that look like stuff you can grab or slide.

627
00:32:50.387 --> 00:32:53.940
(car tires squealing)

628
00:32:53.940 --> 00:32:55.120
I heard that.

629
00:32:55.120 --> 00:32:56.020
That's unsettling.

630
00:32:57.870 --> 00:32:59.720
And, I think I said haptic as well.

631
00:33:03.010 --> 00:33:04.110
Physical impairments,

632
00:33:05.160 --> 00:33:05.993
these are interesting,

633
00:33:05.993 --> 00:33:09.680
because they can vary in ways that you might not expect.

634
00:33:09.680 --> 00:33:11.500
They can be temporary to permanent.

635
00:33:12.540 --> 00:33:15.870
Somebody can start off with a physical limitation,

636
00:33:15.870 --> 00:33:18.110
and maybe through lack of use of the limb

637
00:33:18.110 --> 00:33:20.170
or lack of physical therapy,

638
00:33:20.170 --> 00:33:24.110
they start to lose more and more use of it,

639
00:33:24.110 --> 00:33:27.800
and end up having a permanent physical disability.

640
00:33:27.800 --> 00:33:31.320
Slight to severe is one where not only--

641
00:33:32.980 --> 00:33:33.813
did I mention it?

642
00:33:33.813 --> 00:33:34.660
Yes, I do mention it there.

643
00:33:34.660 --> 00:33:37.490
So, you can have a slight impairment.

644
00:33:37.490 --> 00:33:39.540
You might just have a funky wrist.

645
00:33:39.540 --> 00:33:40.640
You might have been typing too much,

646
00:33:40.640 --> 00:33:42.150
and you have carpal tunnel,

647
00:33:42.150 --> 00:33:43.040
and after a couple years,

648
00:33:43.040 --> 00:33:45.340
it gets to the point you just can't operate a keyboard.

649
00:33:45.340 --> 00:33:48.220
So, that starts off slight and ends severe.

650
00:33:48.220 --> 00:33:49.780
These things, temporary to permanent,

651
00:33:49.780 --> 00:33:50.670
slight to severe,

652
00:33:50.670 --> 00:33:53.190
can change throughout the course of a day.

653
00:33:53.190 --> 00:33:54.350
If you have tremors,

654
00:33:55.250 --> 00:33:58.010
your tremors might start off pretty mild in the morning,

655
00:33:58.010 --> 00:33:59.800
but as the day progresses,

656
00:33:59.800 --> 00:34:01.050
they get more and more severe,

657
00:34:01.050 --> 00:34:04.800
and it becomes harder and harder to do some basic tasks.

658
00:34:04.800 --> 00:34:07.010
Opening a jar might be easy first thing in the morning,

659
00:34:07.010 --> 00:34:09.360
and impossible by lunch or dinnertime.

660
00:34:11.030 --> 00:34:13.020
They may use a screen reader,

661
00:34:13.020 --> 00:34:14.570
because it's just easier.

662
00:34:14.570 --> 00:34:16.560
It's just a couple keyboard interactions

663
00:34:16.560 --> 00:34:18.430
in order to read an entire screen,

664
00:34:18.430 --> 00:34:20.180
to scroll, to do things like that.

665
00:34:20.180 --> 00:34:22.890
It's just an easier interface in many cases.

666
00:34:22.890 --> 00:34:25.130
They may also use dictation software,

667
00:34:25.130 --> 00:34:27.420
something like Dragon Dictate,

668
00:34:27.420 --> 00:34:30.430
which is technically not assistive technology.

669
00:34:30.430 --> 00:34:32.180
If you have the opportunity,

670
00:34:32.180 --> 00:34:34.620
and I did not put any links into this.

671
00:34:34.620 --> 00:34:38.510
Erik Wright did a demo of

672
00:34:38.510 --> 00:34:41.170
using dictation software to walk through Gutenberg,

673
00:34:42.280 --> 00:34:46.250
and while it mostly an example of

674
00:34:46.250 --> 00:34:51.250
how problematic Gutenberg is for dictation software,

675
00:34:51.830 --> 00:34:52.663
it's also--

676
00:34:52.663 --> 00:34:53.550
ignore my banana.

677
00:34:53.550 --> 00:34:58.550
It's also a good example of seeing use dictation software

678
00:34:59.650 --> 00:35:00.880
with an interface that you might

679
00:35:00.880 --> 00:35:02.890
already know to some extent,

680
00:35:02.890 --> 00:35:05.240
and gives you some insight into how he uses it.

681
00:35:06.390 --> 00:35:07.810
Somebody with a physical impairment

682
00:35:07.810 --> 00:35:10.600
probably relies on generous hit areas.

683
00:35:10.600 --> 00:35:12.190
If I have limited mobility,

684
00:35:12.190 --> 00:35:13.880
or if I have tremors,

685
00:35:13.880 --> 00:35:16.370
or I'm using a wand or some other thing,

686
00:35:16.370 --> 00:35:18.070
the bigger the button, the better.

687
00:35:19.455 --> 00:35:20.870
The more likely I am to hit it,

688
00:35:20.870 --> 00:35:22.410
and simpler interactions.

689
00:35:22.410 --> 00:35:25.420
So, Dragon drops could be a real problem for those users.

690
00:35:29.310 --> 00:35:30.760
Intellectual and cognitive,

691
00:35:31.840 --> 00:35:33.500
this is a really broad category

692
00:35:33.500 --> 00:35:37.370
and trying to squeeze it into one slide does it disservice,

693
00:35:37.370 --> 00:35:39.410
just as all the others into one slide

694
00:35:39.410 --> 00:35:40.710
does a disservice to them.

695
00:35:41.880 --> 00:35:44.030
Somebody with an intellectual or cognitive challenge

696
00:35:44.030 --> 00:35:45.350
may use a screen reader.

697
00:35:45.350 --> 00:35:49.050
It might be easier to have a webpage spoken to you

698
00:35:49.050 --> 00:35:50.350
than trying to read it.

699
00:35:50.350 --> 00:35:52.400
The typography might be terrible.

700
00:35:52.400 --> 00:35:54.100
Your dyslexia might be kicking in,

701
00:35:54.100 --> 00:35:56.160
and it's just impossible to understand.

702
00:35:56.160 --> 00:35:58.500
They may also use dictation software for the same reason.

703
00:35:58.500 --> 00:36:01.500
It might be just difficult to form a sentence by typing it.

704
00:36:03.170 --> 00:36:05.870
They might benefit from anything I've already covered,

705
00:36:06.840 --> 00:36:07.673
all these things,

706
00:36:07.673 --> 00:36:08.670
larger hit areas,

707
00:36:08.670 --> 00:36:09.850
good captions, et cetera,

708
00:36:09.850 --> 00:36:12.080
these are all things that can benefit them,

709
00:36:12.080 --> 00:36:14.460
depending on their needs.

710
00:36:14.460 --> 00:36:16.800
They tend to rely on well-structured content,

711
00:36:18.400 --> 00:36:19.730
some good headings,

712
00:36:19.730 --> 00:36:21.970
clear understanding of what the page looks like,

713
00:36:21.970 --> 00:36:24.130
what it is they're getting themselves into.

714
00:36:24.130 --> 00:36:26.120
Plain language and good context.

715
00:36:27.670 --> 00:36:28.920
Am I at a forum?

716
00:36:28.920 --> 00:36:30.660
What is this forum doing?

717
00:36:30.660 --> 00:36:31.890
Is it structured?

718
00:36:31.890 --> 00:36:33.480
What am I filling out?

719
00:36:33.480 --> 00:36:35.280
Did I just buy something I don't want?

720
00:36:35.280 --> 00:36:36.520
How do I return it?

721
00:36:36.520 --> 00:36:38.470
Very simple, direct questions.

722
00:36:40.850 --> 00:36:41.870
I do have notes here,

723
00:36:41.870 --> 00:36:44.350
but again, none for apraxia of speech.

724
00:36:44.350 --> 00:36:47.557
Oh, I'm just gonna--

725
00:36:47.557 --> 00:36:51.880
So, I've talked people who have disabilities

726
00:36:51.880 --> 00:36:52.880
as we think of them.

727
00:36:54.680 --> 00:36:56.500
Before I jump into this next section,

728
00:36:56.500 --> 00:36:57.770
I'd also like to point out

729
00:36:57.770 --> 00:36:59.930
one thing I did not dedicate a slide to

730
00:36:59.930 --> 00:37:03.590
is the notion that disabilities often come in sets.

731
00:37:05.420 --> 00:37:06.720
You don't have just one.

732
00:37:08.530 --> 00:37:11.830
Often, the thing that caused you to have that disability

733
00:37:11.830 --> 00:37:13.990
has other effects as well.

734
00:37:13.990 --> 00:37:17.000
So, if you're confined to a wheelchair,

735
00:37:17.000 --> 00:37:18.930
again, don't use the word confined.

736
00:37:19.810 --> 00:37:23.070
Trying to sort of be a better example myself.

737
00:37:23.070 --> 00:37:26.900
You might be there because you have no physical mobility,

738
00:37:26.900 --> 00:37:28.180
and you can't speak.

739
00:37:29.730 --> 00:37:31.970
So, now you've got two impairments.

740
00:37:33.140 --> 00:37:36.840
There are plenty of people on the web who are deaf/blind.

741
00:37:37.940 --> 00:37:39.790
They can neither hear nor see,

742
00:37:39.790 --> 00:37:43.410
but they still manage to get by if something is well coded.

743
00:37:44.830 --> 00:37:46.980
And, if you think about the causes of some of these things,

744
00:37:46.980 --> 00:37:49.950
you can start to see where some of that overlap might live.

745
00:37:52.650 --> 00:37:55.680
So, we're gonna jump into talking about who else.

746
00:37:55.680 --> 00:37:57.720
I wanna make sure that we're

747
00:37:57.720 --> 00:37:58.870
sort of leaving the disability

748
00:37:58.870 --> 00:38:01.210
stereotypes and generalizations behind.

749
00:38:02.250 --> 00:38:03.820
Did any of you go to Paris,

750
00:38:03.820 --> 00:38:05.520
were at Word Camp Paris last year?

751
00:38:06.660 --> 00:38:10.040
Did any of you see my talk last year at Word Camp Paris?

752
00:38:10.040 --> 00:38:12.470
You can put your heads down for the next few minutes.

753
00:38:12.470 --> 00:38:13.680
Some of these slides will be familiar,

754
00:38:13.680 --> 00:38:15.600
but not all of them.

755
00:38:15.600 --> 00:38:18.150
This one I wanna pull out immediately,

756
00:38:18.150 --> 00:38:20.070
because I maintain that Microsoft,

757
00:38:20.070 --> 00:38:21.980
this is Microsoft's art,

758
00:38:21.980 --> 00:38:24.170
I maintain they stole the concept from me.

759
00:38:24.170 --> 00:38:25.780
They will disagree,

760
00:38:25.780 --> 00:38:27.510
but I've been talking about this concept

761
00:38:27.510 --> 00:38:29.860
of everybody has an impairment.

762
00:38:29.860 --> 00:38:32.010
Everybody's got some sort of limitation.

763
00:38:32.010 --> 00:38:33.837
It's all about context.

764
00:38:33.837 --> 00:38:34.890
It's all about situational.

765
00:38:34.890 --> 00:38:37.360
It's all about temporary, et cetera,

766
00:38:37.360 --> 00:38:38.750
and these illustrations,

767
00:38:38.750 --> 00:38:42.220
these animated illustrations they have on their site

768
00:38:42.220 --> 00:38:44.620
I think do a good job of referencing some of the things

769
00:38:44.620 --> 00:38:46.570
that people might be struggling with.

770
00:38:46.570 --> 00:38:48.140
I like the bartender who can't hear,

771
00:38:48.140 --> 00:38:49.540
because he's got the shaker.

772
00:38:50.980 --> 00:38:53.200
He's all night with the ice in the shaker.

773
00:38:57.600 --> 00:39:00.910
So, let's jump into one of the first ones:

774
00:39:00.910 --> 00:39:01.743
getting older.

775
00:39:02.700 --> 00:39:06.030
It is my understand that it affects everybody,

776
00:39:06.030 --> 00:39:07.730
except for those who are fortunate enough

777
00:39:07.730 --> 00:39:08.980
to not have to get older,

778
00:39:10.050 --> 00:39:11.050
'cause they're dead.

779
00:39:13.040 --> 00:39:14.335
This is a tough room.

780
00:39:14.335 --> 00:39:15.470
(audience laughs)

781
00:39:15.470 --> 00:39:17.550
As I know, it carries risks and side effects,

782
00:39:17.550 --> 00:39:19.020
it is not for the young,

783
00:39:19.020 --> 00:39:20.840
but the concept is very simple.

784
00:39:20.840 --> 00:39:22.450
The very fact that we're sitting here

785
00:39:22.450 --> 00:39:25.490
means that we are spending time aging.

786
00:39:25.490 --> 00:39:27.390
You can blame me for that,

787
00:39:27.390 --> 00:39:28.490
but you've started it.

788
00:39:29.950 --> 00:39:32.620
So, this is an example of two couples.

789
00:39:34.376 --> 00:39:36.330
What is separating these two couples

790
00:39:36.330 --> 00:39:38.310
besides about four feet of concrete?

791
00:39:41.041 --> 00:39:42.923
<v Audience Member>Age.</v>
<v ->Age.</v>

792
00:39:42.923 --> 00:39:44.711
(audience member talking)
I'm sorry?

793
00:39:44.711 --> 00:39:47.070
(audience member talking)
Yeah.

794
00:39:47.070 --> 00:39:48.220
Yeah, pretty much.

795
00:39:48.220 --> 00:39:51.030
They're probably both having the same conversation.

796
00:39:51.030 --> 00:39:53.383
"Hey, I've never been to Serbia before."

797
00:39:53.383 --> 00:39:54.870
(audience laughs)

798
00:39:54.870 --> 00:39:56.820
"Where's a good vegetarian restaurant?"

799
00:39:58.640 --> 00:40:01.600
And, again, their objectives aren't necessarily different.

800
00:40:01.600 --> 00:40:03.710
Their interactions aren't necessarily different.

801
00:40:03.710 --> 00:40:05.100
The only difference is age.

802
00:40:08.480 --> 00:40:10.410
What's separating these two

803
00:40:10.410 --> 00:40:12.000
besides about a foot of metal?

804
00:40:13.144 --> 00:40:16.960
(audience members talking)

805
00:40:16.960 --> 00:40:17.793
Age?

806
00:40:17.793 --> 00:40:18.968
Well, they're both reading.

807
00:40:18.968 --> 00:40:20.228
(audience member talking)

808
00:40:20.228 --> 00:40:21.061
I'm sorry?

809
00:40:21.061 --> 00:40:22.770
(audience member talking)

810
00:40:22.770 --> 00:40:23.603
Yes,

811
00:40:23.603 --> 00:40:24.990
so I'm gonna go with the interface.

812
00:40:24.990 --> 00:40:27.490
I maintain that they're separated by age,

813
00:40:27.490 --> 00:40:29.280
and she's the smarter of the two,

814
00:40:30.160 --> 00:40:32.320
'cause she's using a solar powered device,

815
00:40:34.420 --> 00:40:35.660
and the interface tells her

816
00:40:35.660 --> 00:40:37.550
how much more there is left to read

817
00:40:37.550 --> 00:40:39.220
at a glance, right?

818
00:40:39.220 --> 00:40:40.774
That's brilliant.

819
00:40:40.774 --> 00:40:41.850
<v Audience Member>It's heavier to carry.</v>

820
00:40:41.850 --> 00:40:42.950
<v ->It is heavier to carry,</v>

821
00:40:42.950 --> 00:40:44.753
but it's also a weapon.

822
00:40:44.753 --> 00:40:47.586
(audience laughs)

823
00:40:48.870 --> 00:40:50.740
And, if it gets cold, you can burn it,

824
00:40:50.740 --> 00:40:52.552
and it's not as dangerous to burn as this.

825
00:40:52.552 --> 00:40:53.500
(audience laughs)

826
00:40:53.500 --> 00:40:55.610
So, you know they have that going for it.

827
00:40:55.610 --> 00:40:59.380
But, again, they're separated just by time,

828
00:40:59.380 --> 00:41:00.213
by age.

829
00:41:00.213 --> 00:41:01.370
Same objective, same goals,

830
00:41:01.370 --> 00:41:03.110
they're trying to do the same things.

831
00:41:04.310 --> 00:41:06.280
Now, forget about the whole aging part.

832
00:41:07.460 --> 00:41:08.420
If you live long enough,

833
00:41:08.420 --> 00:41:11.240
you're probably going to have some sort of an accident.

834
00:41:11.240 --> 00:41:13.160
Something's going to happen to you.

835
00:41:13.160 --> 00:41:16.620
Broken limbs, eye injuries, hearing injuries, head trauma,

836
00:41:16.620 --> 00:41:17.980
all of these apply to me.

837
00:41:17.980 --> 00:41:19.160
I've been through all of these.

838
00:41:19.160 --> 00:41:20.880
I've broken multiple parts of my body,

839
00:41:20.880 --> 00:41:22.070
and split things open,

840
00:41:22.070 --> 00:41:24.390
and shed blood across the world.

841
00:41:24.390 --> 00:41:26.050
Don't do that.

842
00:41:26.050 --> 00:41:27.400
It gets expensive,

843
00:41:27.400 --> 00:41:28.450
but the point is,

844
00:41:28.450 --> 00:41:30.200
we all have something happen to us.

845
00:41:32.940 --> 00:41:35.230
Carpal tunnel affects a lot of people.

846
00:41:35.230 --> 00:41:38.020
A broken wrist affects a lot of people.

847
00:41:38.020 --> 00:41:41.943
I'm the guy who took a spill coming out of Belexpocentar

848
00:41:41.943 --> 00:41:43.940
<v Audience Member>Yeah.</v>
<v ->the other day.</v>

849
00:41:43.940 --> 00:41:44.773
You were ahead of me.

850
00:41:44.773 --> 00:41:45.800
You didn't see it.

851
00:41:45.800 --> 00:41:47.599
You just heard everyone laughing at me.

852
00:41:47.599 --> 00:41:48.640
(audience member laughs)

853
00:41:48.640 --> 00:41:50.330
One foot and down hard,

854
00:41:50.330 --> 00:41:51.770
and I caught myself,

855
00:41:51.770 --> 00:41:53.210
but there's a few minutes afterward

856
00:41:53.210 --> 00:41:55.700
where I'm reminded I'm getting older,

857
00:41:55.700 --> 00:41:56.910
and my wrists don't like it

858
00:41:56.910 --> 00:41:58.610
when I fling myself into concrete.

859
00:42:02.530 --> 00:42:04.001
Eye surgery,

860
00:42:04.001 --> 00:42:04.990
having a little bit of work done,

861
00:42:04.990 --> 00:42:07.140
poking yourself in the eye with one of the postcards

862
00:42:07.140 --> 00:42:09.920
I'm gonna fling at everybody later on.

863
00:42:09.920 --> 00:42:12.770
You've temporarily lost some of your vision,

864
00:42:12.770 --> 00:42:13.740
peripheral vision,

865
00:42:13.740 --> 00:42:14.910
and your 3D sense,

866
00:42:14.910 --> 00:42:17.470
which means you could be standing in the elevator tonight,

867
00:42:17.470 --> 00:42:18.303
going,

868
00:42:20.140 --> 00:42:21.610
'cause I've done that.

869
00:42:23.380 --> 00:42:24.430
These guys are my favorite.

870
00:42:24.430 --> 00:42:28.180
You would not know looking at them

871
00:42:28.180 --> 00:42:30.390
that they're actually all okay right now.

872
00:42:31.530 --> 00:42:33.670
Granted, they may have some cognitive decline.

873
00:42:33.670 --> 00:42:34.950
What they're doing is they're chasing

874
00:42:34.950 --> 00:42:36.789
a wheel of cheese down a hill.

875
00:42:36.789 --> 00:42:37.850
(audience laughs)

876
00:42:37.850 --> 00:42:40.690
This is the tradition in some town in England,

877
00:42:40.690 --> 00:42:43.270
and I didn't copy those notes over.

878
00:42:44.610 --> 00:42:46.910
What I do know is they start at the top of a hill,

879
00:42:46.910 --> 00:42:48.870
somebody kicks a wheel of cheese down,

880
00:42:48.870 --> 00:42:50.250
they all run after it,

881
00:42:50.250 --> 00:42:53.340
and a half dozen ambulances wait at the bottom of the hill,

882
00:42:53.340 --> 00:42:54.570
and they need to be there,

883
00:42:54.570 --> 00:42:56.750
because somebody always gets injured,

884
00:42:56.750 --> 00:42:57.770
and multiple somebodies.

885
00:42:57.770 --> 00:42:59.720
So, you have this very clear,

886
00:42:59.720 --> 00:43:01.260
at the top of the picture,

887
00:43:01.260 --> 00:43:02.210
you start off okay.

888
00:43:02.210 --> 00:43:03.960
By the time you get to the bottom of the picture,

889
00:43:03.960 --> 00:43:04.900
guess what?

890
00:43:04.900 --> 00:43:06.220
You're disabled,

891
00:43:06.220 --> 00:43:07.130
and it's your damn fault.

892
00:43:07.130 --> 00:43:08.353
You can't blame the cheese.

893
00:43:08.353 --> 00:43:09.800
(audience laughs)

894
00:43:09.800 --> 00:43:10.710
You could try,

895
00:43:10.710 --> 00:43:12.210
it just wouldn't be effective.

896
00:43:15.590 --> 00:43:17.360
You could think that, like me,

897
00:43:17.360 --> 00:43:20.180
you're invincible and allergic to nothing,

898
00:43:20.180 --> 00:43:23.100
but there are other factors that can give you

899
00:43:23.100 --> 00:43:26.700
this temporary or situational impairment.

900
00:43:26.700 --> 00:43:28.010
Multi-tasking,

901
00:43:28.010 --> 00:43:30.580
lots of people like to think that they can multi-task.

902
00:43:30.580 --> 00:43:31.950
Nobody can multi-task.

903
00:43:31.950 --> 00:43:34.210
All you can do is attention swap,

904
00:43:34.210 --> 00:43:37.950
and that is problematic for a number of reasons.

905
00:43:37.950 --> 00:43:39.000
Work in the sunlight,

906
00:43:40.280 --> 00:43:43.030
not so much of an issue these last couple days,

907
00:43:43.030 --> 00:43:44.580
but it can wash out your screen.

908
00:43:44.580 --> 00:43:46.360
Incidentally, if it rains on your screen,

909
00:43:46.360 --> 00:43:48.750
your phone thinks every one of those raindrops is a touch.

910
00:43:48.750 --> 00:43:49.583
The next thing you know,

911
00:43:49.583 --> 00:43:50.830
you sent an e-mail.

912
00:43:50.830 --> 00:43:51.880
"What, did I resign?"

913
00:43:52.800 --> 00:43:54.150
Eating at your desk,

914
00:43:54.150 --> 00:43:56.540
not having headphones handy in an open office plan

915
00:43:56.540 --> 00:43:58.470
and workplace or cafe,

916
00:43:58.470 --> 00:44:00.770
or if the content is not your native language.

917
00:44:03.536 --> 00:44:04.370
On Contributor today,

918
00:44:04.370 --> 00:44:06.230
I tried to use Maya's laptop really quickly,

919
00:44:06.230 --> 00:44:08.100
and it's a German layout,

920
00:44:08.100 --> 00:44:09.130
and I got two letters in,

921
00:44:09.130 --> 00:44:10.813
and I was like, "What?"

922
00:44:10.813 --> 00:44:11.910
(audience laughs)

923
00:44:11.910 --> 00:44:13.210
"Where's the letter?"

924
00:44:13.210 --> 00:44:14.100
I didn't know what to do.

925
00:44:14.100 --> 00:44:16.130
I couldn't find the slash.

926
00:44:16.130 --> 00:44:19.228
You know how it's the slash?

927
00:44:19.228 --> 00:44:21.870
(audience laughs)
So confused.

928
00:44:23.130 --> 00:44:27.080
So, this is sort of a representation of me a lot.

929
00:44:27.080 --> 00:44:29.510
One hand's on the mouse or one hand's on the keyboard,

930
00:44:29.510 --> 00:44:31.090
and the other hand's holding food.

931
00:44:31.090 --> 00:44:33.180
I maintain that everybody is

932
00:44:33.180 --> 00:44:35.330
a keyboard only user at lunchtime.

933
00:44:37.340 --> 00:44:38.640
We all have experience with it,

934
00:44:38.640 --> 00:44:40.090
we just don't think about it.

935
00:44:41.920 --> 00:44:43.070
These guys are awesome,

936
00:44:44.290 --> 00:44:48.690
because they're neither a mouse nor a keyboard user.

937
00:44:48.690 --> 00:44:50.670
They're not really paying attention to their screens.

938
00:44:50.670 --> 00:44:51.850
They're working out in the sun.

939
00:44:51.850 --> 00:44:53.180
They're distracted.

940
00:44:53.180 --> 00:44:56.170
If you send them an extremely detailed e-mail

941
00:44:56.170 --> 00:44:58.120
with a set of instructions they have to follow

942
00:44:58.120 --> 00:45:01.020
to not be killed by the man-eating tarp,

943
00:45:01.890 --> 00:45:03.100
they're not gonna understand it,

944
00:45:03.100 --> 00:45:04.080
'cause they're too distracted.

945
00:45:04.080 --> 00:45:07.050
So, they have this temporary cognitive impairment,

946
00:45:07.050 --> 00:45:08.500
visual impairment,

947
00:45:08.500 --> 00:45:09.550
motor impairment.

948
00:45:11.060 --> 00:45:13.530
So, they've heaped these on themself.

949
00:45:13.530 --> 00:45:14.400
Nothing wrong with this,

950
00:45:14.400 --> 00:45:16.350
but again, it's understand that context

951
00:45:16.350 --> 00:45:17.830
and that temporary situation.

952
00:45:19.350 --> 00:45:20.370
Working in a cafe,

953
00:45:20.370 --> 00:45:23.930
probably doing some video editing based on the video camera.

954
00:45:23.930 --> 00:45:25.700
So, he has to wear the earphones.

955
00:45:26.870 --> 00:45:28.520
I'm glad he's wearing earphones,

956
00:45:28.520 --> 00:45:30.700
because I hate that guy on the train

957
00:45:30.700 --> 00:45:32.489
who decides to watch that YouTube video.

958
00:45:32.489 --> 00:45:33.610
(audience agreeing)

959
00:45:33.610 --> 00:45:34.590
And, turns it all the way up,

960
00:45:34.590 --> 00:45:37.100
and it's like, "Yeah, dude, I heard that song.

961
00:45:37.100 --> 00:45:38.970
"That's cool. You got new Duran Duran."

962
00:45:38.970 --> 00:45:41.960
So, this affects a lot of people.

963
00:45:41.960 --> 00:45:44.040
Headphones can become really, really important,

964
00:45:44.040 --> 00:45:46.310
and when you don't have them is when you suddenly realize

965
00:45:46.310 --> 00:45:47.950
how much you want them.

966
00:45:47.950 --> 00:45:50.400
And, until then, that person is essentially deaf.

967
00:45:51.500 --> 00:45:53.660
BBC's app does this really cool thing

968
00:45:53.660 --> 00:45:55.860
where it recognizes when you're on a phone,

969
00:45:55.860 --> 00:45:58.680
and it, in many cases,

970
00:45:58.680 --> 00:46:00.650
starts the captions by default.

971
00:46:00.650 --> 00:46:01.920
Because it's likely, you're on a phone,

972
00:46:01.920 --> 00:46:04.170
you're probably not sitting on your couch.

973
00:46:04.170 --> 00:46:05.590
So, we're just gonna turn the captions on,

974
00:46:05.590 --> 00:46:08.190
and maybe you won't have your volume all the way up.

975
00:46:11.710 --> 00:46:15.680
There is the scenario of having somebody in bed with you.

976
00:46:17.380 --> 00:46:21.730
You know, checking e-mail at midnight is not so cool.

977
00:46:21.730 --> 00:46:23.170
Watching terrible videos,

978
00:46:23.170 --> 00:46:25.310
playing videos games, not awesome.

979
00:46:25.310 --> 00:46:28.030
I'd like to think that this bed mate

980
00:46:28.030 --> 00:46:29.780
is a little bit more understanding.

981
00:46:33.840 --> 00:46:36.800
But, this is a case where suddenly captions are important.

982
00:46:36.800 --> 00:46:38.770
Brightness of screen is a factor,

983
00:46:38.770 --> 00:46:41.190
how much you move around on the bed,

984
00:46:41.190 --> 00:46:43.550
can you even have a mouse on that blanket?

985
00:46:44.450 --> 00:46:46.160
These are all limiting factors.

986
00:46:48.610 --> 00:46:50.830
This kind of represents me on a few trips.

987
00:46:50.830 --> 00:46:54.170
Before I would get airline apps on my phone,

988
00:46:54.170 --> 00:46:55.400
and I was traveling internationally,

989
00:46:55.400 --> 00:46:58.050
and I'd have to print a boarding pass,

990
00:46:58.050 --> 00:47:01.230
meant I would have to go to some internet cafe,

991
00:47:01.230 --> 00:47:03.130
or post office, or library,

992
00:47:03.130 --> 00:47:06.030
and mess around with a keyboard that I've never seen before,

993
00:47:06.030 --> 00:47:08.750
and try and type words I've never seen before.

994
00:47:08.750 --> 00:47:09.960
I've been fortunate,

995
00:47:09.960 --> 00:47:11.670
because they've always been Latin characters,

996
00:47:11.670 --> 00:47:13.720
but then y'all throw Cyrillic text at me.

997
00:47:15.770 --> 00:47:17.770
Where's the weird circle post?

998
00:47:18.790 --> 00:47:20.640
I don't know where that is on the keyboard,

999
00:47:20.640 --> 00:47:23.420
so I'm suddenly very comfortable in English

1000
00:47:23.420 --> 00:47:24.950
and very comfortable with a keyboard.

1001
00:47:24.950 --> 00:47:29.170
I'm rendered useless in front of an international system.

1002
00:47:29.170 --> 00:47:31.250
Takes me way too long to get anything done.

1003
00:47:34.490 --> 00:47:36.450
In America, we have Thanksgiving,

1004
00:47:36.450 --> 00:47:39.700
where we give thanks for murdering millions of Natives

1005
00:47:39.700 --> 00:47:42.050
and then eating turkey in their honor, I think.

1006
00:47:43.796 --> 00:47:44.629
But, we all get together.

1007
00:47:44.629 --> 00:47:45.462
It's a family holiday.

1008
00:47:45.462 --> 00:47:46.350
We all get together.

1009
00:47:46.350 --> 00:47:47.790
We have lots of food,

1010
00:47:47.790 --> 00:47:49.110
and when I go to my parents house,

1011
00:47:49.110 --> 00:47:53.454
the first thing they do is hand me a printer ink cartridge.

1012
00:47:53.454 --> 00:47:56.270
(audience laughs)

1013
00:47:56.270 --> 00:47:57.830
"It's out of ink.

1014
00:47:57.830 --> 00:48:00.910
"Can you please change printer ink?"

1015
00:48:00.910 --> 00:48:02.770
And, then run the virus updates,

1016
00:48:02.770 --> 00:48:04.020
and install other things,

1017
00:48:04.020 --> 00:48:05.370
and delete e-mail,

1018
00:48:05.370 --> 00:48:06.350
and, "Was that a virus?"

1019
00:48:06.350 --> 00:48:10.230
And, "Why is this popping up?"

1020
00:48:11.110 --> 00:48:13.080
We're talking a little bit about cognitive,

1021
00:48:13.080 --> 00:48:15.320
and intellectual, and experience,

1022
00:48:15.320 --> 00:48:17.510
and all these other factors.

1023
00:48:18.470 --> 00:48:21.000
We have to remember that not everybody

1024
00:48:21.000 --> 00:48:23.260
who uses the stuff we build

1025
00:48:23.260 --> 00:48:24.700
is as skilled as we are.

1026
00:48:25.940 --> 00:48:28.340
I've been writing software, poorly,

1027
00:48:28.340 --> 00:48:30.330
for over 20 years.

1028
00:48:30.330 --> 00:48:31.750
I stopped counting when I hit 20,

1029
00:48:31.750 --> 00:48:33.000
'cause it's embarrassing.

1030
00:48:33.880 --> 00:48:35.080
And, what I have learned is that

1031
00:48:35.080 --> 00:48:37.010
I have written a lot of terrible stuff,

1032
00:48:37.010 --> 00:48:39.010
even when I was trying my best,

1033
00:48:39.010 --> 00:48:41.240
and this is an ongoing thing.

1034
00:48:41.240 --> 00:48:42.073
It's ongoing.

1035
00:48:42.073 --> 00:48:42.950
We all go through this.

1036
00:48:42.950 --> 00:48:44.090
It's just how it is.

1037
00:48:44.090 --> 00:48:46.670
You wanna have good mentors who lead you through this stuff,

1038
00:48:46.670 --> 00:48:50.140
but eventually, we're going to be in their position.

1039
00:48:50.140 --> 00:48:51.630
We're not gonna be writing software anymore.

1040
00:48:51.630 --> 00:48:53.220
We're gonna be the end user.

1041
00:48:53.220 --> 00:48:55.280
We're not gonna have that kind of control.

1042
00:48:55.280 --> 00:48:58.230
So, think about what you wanna leave behind for future you.

1043
00:49:00.490 --> 00:49:01.990
I don't know if anybody, yeah.

1044
00:49:03.590 --> 00:49:04.610
So, here's the good news.

1045
00:49:04.610 --> 00:49:08.280
This is where we roll into another group exercise.

1046
00:49:08.280 --> 00:49:09.900
This is the second group exercise.

1047
00:49:09.900 --> 00:49:12.020
I'm a little bit ahead of schedule.

1048
00:49:12.020 --> 00:49:13.270
I'm so surprised by this,

1049
00:49:14.450 --> 00:49:15.500
so surprised by this.

1050
00:49:16.660 --> 00:49:18.402
So, I'm just gonna stand here for 10 minutes.

1051
00:49:18.402 --> 00:49:20.340
(audience laughs)

1052
00:49:20.340 --> 00:49:21.290
<v Audience Member>Can I ask a question?</v>

1053
00:49:21.290 --> 00:49:22.123
<v ->Of course you can.</v>

1054
00:49:22.123 --> 00:49:23.062
You can ask questions any time.

1055
00:49:23.062 --> 00:49:24.190
(audience member talking)

1056
00:49:24.190 --> 00:49:26.639
Don't ask me about something I don't know again, though.

1057
00:49:26.639 --> 00:49:27.472
That was embarrassing.

1058
00:49:27.472 --> 00:49:32.472
<v Audience Member>I can't promise that,</v>

1059
00:49:32.750 --> 00:49:36.660
Can you take measurements for one impairment

1060
00:49:37.890 --> 00:49:39.460
and make it worse for another,

1061
00:49:39.460 --> 00:49:41.950
and is there sort of like a hierarchy

1062
00:49:41.950 --> 00:49:46.950
on what you should make and maybe as an example,

1063
00:49:46.969 --> 00:49:49.845
I used to work at Living More Green,

1064
00:49:49.845 --> 00:49:51.951
and we had environmental regulations

1065
00:49:51.951 --> 00:49:54.730
and safety regulations,

1066
00:49:54.730 --> 00:49:58.244
and safety regulations said remove that bar

1067
00:49:58.244 --> 00:50:01.570
in the chemical storage,

1068
00:50:01.570 --> 00:50:03.700
because you can tip over it and fall.

1069
00:50:03.700 --> 00:50:04.830
<v ->Right, but without the bar,</v>

1070
00:50:04.830 --> 00:50:06.423
they fell into the vat anyway.

1071
00:50:06.423 --> 00:50:07.380
(audience member talking)

1072
00:50:07.380 --> 00:50:08.213
No? Okay.

1073
00:50:09.249 --> 00:50:12.510
<v Audience Member>But, the environmental part</v>

1074
00:50:12.510 --> 00:50:16.020
said you have to keep it to prevent floods

1075
00:50:16.020 --> 00:50:20.284
from coming up and then harm.
(audience member talking)

1076
00:50:20.284 --> 00:50:21.117
<v ->Yeah.</v>

1077
00:50:21.117 --> 00:50:22.133
<v Audience Member>So can you have these situations</v>

1078
00:50:22.133 --> 00:50:25.927
when you sort of do stuff for one group and--

1079
00:50:25.927 --> 00:50:26.760
<v ->Yes.</v>

1080
00:50:26.760 --> 00:50:28.150
Yeah, you can have these situations,

1081
00:50:28.150 --> 00:50:30.967
and that's why apart of this approach

1082
00:50:30.967 --> 00:50:33.372
is you have to look at this broader picture.

1083
00:50:33.372 --> 00:50:38.370
So, if all I do is I look at WCAG

1084
00:50:38.370 --> 00:50:40.220
and just try to code to WCAG,

1085
00:50:40.220 --> 00:50:42.110
I'm going to create some problems,

1086
00:50:42.110 --> 00:50:44.860
because you need to apply a little bit of smarts to it.

1087
00:50:46.350 --> 00:50:48.010
I talked about hearing impaired.

1088
00:50:48.010 --> 00:50:50.730
They tend to rely on color cues.

1089
00:50:50.730 --> 00:50:54.080
Well, if the only thing you do is leave color cues,

1090
00:50:54.080 --> 00:50:56.570
you've excluded another audience,

1091
00:50:56.570 --> 00:50:58.340
and so I talk about that a little later on,

1092
00:50:58.340 --> 00:51:00.250
how to try to make sure that you're covering

1093
00:51:00.250 --> 00:51:02.420
for more than one at a time.

1094
00:51:02.420 --> 00:51:03.350
But, the general just is,

1095
00:51:03.350 --> 00:51:04.590
yeah, there's always that risk,

1096
00:51:04.590 --> 00:51:06.500
and hopefully, as you approach these,

1097
00:51:06.500 --> 00:51:08.120
you can think about,

1098
00:51:08.120 --> 00:51:10.420
"When I do this, who am I gonna leave behind?"

1099
00:51:12.790 --> 00:51:14.860
We are at five, two.

1100
00:51:14.860 --> 00:51:16.440
I did the disability types.

1101
00:51:16.440 --> 00:51:17.790
I'm down to group exercise,

1102
00:51:18.830 --> 00:51:21.530
which I should be starting in five minutes.

1103
00:51:21.530 --> 00:51:22.363
That's awesome.

1104
00:51:23.209 --> 00:51:26.709
(audience member talking)

1105
00:51:34.830 --> 00:51:35.663
Okay.

1106
00:51:35.663 --> 00:51:36.822
Yeah, that's cool.

1107
00:51:36.822 --> 00:51:39.360
(audience member talking)

1108
00:51:39.360 --> 00:51:40.400
Yeah, you can take her seat,

1109
00:51:40.400 --> 00:51:41.850
but thank you for pretending.

1110
00:51:42.830 --> 00:51:44.279
Have somebody bring you the homework later.

1111
00:51:44.279 --> 00:51:47.112
(audience laughs)

1112
00:51:48.130 --> 00:51:50.970
Okay, so this is crazy.

1113
00:51:50.970 --> 00:51:52.700
It's the same number of people in that group.

1114
00:51:52.700 --> 00:51:54.500
So, here's your next group exercise.

1115
00:51:56.580 --> 00:51:59.550
Each person in your group should pick a disability type.

1116
00:51:59.550 --> 00:52:01.130
You're weirdly numbered groups,

1117
00:52:01.130 --> 00:52:03.080
so this throws things off a little bit.

1118
00:52:04.180 --> 00:52:07.160
So, and Rian you're not going to be this person.

1119
00:52:07.160 --> 00:52:09.370
Rian, you might be low vision,

1120
00:52:09.370 --> 00:52:11.380
and Monique, you might be blindness,

1121
00:52:11.380 --> 00:52:12.213
and whatever.

1122
00:52:12.213 --> 00:52:13.046
Each of you,

1123
00:52:13.046 --> 00:52:14.470
hearing and speech I paired up,

1124
00:52:14.470 --> 00:52:17.170
because it's a little bit more difficult

1125
00:52:17.170 --> 00:52:19.390
and also, conceptually, a little bit easier,

1126
00:52:19.390 --> 00:52:21.780
but you can split those up if you want.

1127
00:52:21.780 --> 00:52:22.950
Physical and cognitive,

1128
00:52:22.950 --> 00:52:24.880
so each person in your group,

1129
00:52:24.880 --> 00:52:25.790
choose one of those,

1130
00:52:25.790 --> 00:52:27.040
discuss amongst yourselves,

1131
00:52:27.040 --> 00:52:27.940
draw straws,

1132
00:52:27.940 --> 00:52:28.773
fist fight,

1133
00:52:28.773 --> 00:52:29.770
I don't really care.

1134
00:52:29.770 --> 00:52:30.603
Within your group,

1135
00:52:30.603 --> 00:52:31.640
what I want you to do is I want you to do

1136
00:52:31.640 --> 00:52:34.330
is discuss where each of your needs,

1137
00:52:34.330 --> 00:52:36.270
as a representative of one of these groups,

1138
00:52:36.270 --> 00:52:38.750
overlaps with the needs of someone else,

1139
00:52:38.750 --> 00:52:40.050
based on all the information

1140
00:52:40.050 --> 00:52:42.190
I've just presented through these slides.

1141
00:52:42.190 --> 00:52:43.220
Be a little bit creative.

1142
00:52:43.220 --> 00:52:46.540
Think about, if you are one of these categories,

1143
00:52:46.540 --> 00:52:48.450
where you're gonna bump into somebody else.

1144
00:52:48.450 --> 00:52:50.790
Barriers, abilities, needs,

1145
00:52:50.790 --> 00:52:52.570
weird software interfaces,

1146
00:52:52.570 --> 00:52:53.460
favorite foods,

1147
00:52:53.460 --> 00:52:54.660
maybe not that last one.

1148
00:52:55.510 --> 00:52:59.860
And, you have 15 minutes to come up with basically a list.

1149
00:53:01.470 --> 00:53:03.800
Basically, 15 minutes, chat about it,

1150
00:53:03.800 --> 00:53:05.550
I'll walk around, answer questions.

1151
00:53:06.520 --> 00:53:08.370
Any questions before you get started?

1152
00:53:11.320 --> 00:53:13.280
Yeah, that's what I thought.

1153
00:53:13.280 --> 00:53:16.280
(audience chatting)

1154
00:53:19.993 --> 00:53:22.912
14:59.

1155
00:53:22.912 --> 00:53:23.745
Hello, hello, hello.

1156
00:53:23.745 --> 00:53:25.376
(audience laughs)

1157
00:53:25.376 --> 00:53:26.331
Wait, did I not mute?

1158
00:53:26.331 --> 00:53:31.331
(audience laughing)
(audience chatting)

1159
01:08:39.442 --> 01:08:44.109
Hello? Hello, hello?
(audience chatting)

1160
01:08:45.843 --> 01:08:46.676
Hello?

1161
01:08:47.641 --> 01:08:50.141
I just called to say, "Hello."

1162
01:08:51.044 --> 01:08:52.280
(audience chatting)

1163
01:08:52.280 --> 01:08:54.362
Okay, we're going to pick it up again.

1164
01:08:54.362 --> 01:08:57.670
(audience chatting)

1165
01:08:57.670 --> 01:08:59.690
I appreciate how passionate you are

1166
01:08:59.690 --> 01:09:01.211
to want to go through this.

1167
01:09:01.211 --> 01:09:02.729
(audience chatting)

1168
01:09:02.729 --> 01:09:03.729
All right, you guys.

1169
01:09:05.261 --> 01:09:06.370
<v Audience Member>We're getting into it.</v>

1170
01:09:06.370 --> 01:09:07.250
<v ->I know you're getting into it,</v>

1171
01:09:07.250 --> 01:09:08.500
but here's what I'm gonna do,

1172
01:09:08.500 --> 01:09:10.890
before we move into the next section,

1173
01:09:10.890 --> 01:09:13.600
is I'm going to ask somebody

1174
01:09:13.600 --> 01:09:17.450
from each group to do something.

1175
01:09:17.450 --> 01:09:19.231
In the yellow shirt,

1176
01:09:19.231 --> 01:09:22.280
what disability type are you championing?

1177
01:09:22.280 --> 01:09:24.600
<v ->[Man In Yellow Shirt] Hearing.</v>

1178
01:09:24.600 --> 01:09:25.433
<v ->I'm sorry?</v>

1179
01:09:25.433 --> 01:09:27.070
<v ->[Man In Yellow Shirt] Hearing.</v>

1180
01:09:27.070 --> 01:09:28.850
<v ->Hearing? Okay.</v>

1181
01:09:28.850 --> 01:09:31.630
So, tell me, what overlaps did you have for hearing

1182
01:09:31.630 --> 01:09:33.130
that some of the others had?

1183
01:09:35.566 --> 01:09:39.149
(audience members talking)

1184
01:09:43.410 --> 01:09:45.140
You're stuck on hearing?

1185
01:09:46.135 --> 01:09:49.170
(audience member talking)

1186
01:09:49.170 --> 01:09:51.650
Oh, I see, you got as far as blindness.

1187
01:09:51.650 --> 01:09:53.786
So, 15 minutes was not enough.

1188
01:09:53.786 --> 01:09:54.880
<v ->[Man In Yellow Shirt] Exactly.</v>

1189
01:09:54.880 --> 01:09:57.120
<v ->Okay, so then you had low vision?</v>

1190
01:09:58.264 --> 01:09:59.097
<v ->[Man In Gray Shirt] Yeah.</v>

1191
01:09:59.097 --> 01:10:00.510
<v ->Why don't you tell me one of the overlaps you had?</v>

1192
01:10:00.510 --> 01:10:02.435
Since that's the first one on the list.

1193
01:10:02.435 --> 01:10:06.730
(Man in Gray Shirt talking)

1194
01:10:06.730 --> 01:10:07.563
With blindness,

1195
01:10:07.563 --> 01:10:09.340
yep, overlaps with blindness, makes sense.

1196
01:10:10.614 --> 01:10:14.735
<v ->[Man In Gray Shirt] Also, cognitive as well.</v>

1197
01:10:14.735 --> 01:10:17.120
<v ->Cognitive.</v>

1198
01:10:17.120 --> 01:10:19.070
What kind of an overlap with cognitive?

1199
01:10:20.339 --> 01:10:24.006
(Man in Gray Shirt talking)

1200
01:10:27.390 --> 01:10:29.716
Okay, you might use a screen reader, right.

1201
01:10:29.716 --> 01:10:31.610
(Man in Gray Shirt talking)

1202
01:10:31.610 --> 01:10:32.443
Okay.

1203
01:10:32.443 --> 01:10:34.110
I'm repeating these things for the benefit

1204
01:10:34.110 --> 01:10:35.710
of the recording as well.

1205
01:10:35.710 --> 01:10:37.280
This'll be captioned later on,

1206
01:10:37.280 --> 01:10:41.310
and then you can read me justifying why I'm talking so much.

1207
01:10:41.310 --> 01:10:43.980
It's very weird, I know, in the future.

1208
01:10:43.980 --> 01:10:44.813
Okay.

1209
01:10:45.958 --> 01:10:48.180
What was your chosen disability type?

1210
01:10:50.655 --> 01:10:51.820
<v Audience Member>Hearing and speech problem.</v>

1211
01:10:51.820 --> 01:10:53.291
<v ->Okay.</v>

1212
01:10:53.291 --> 01:10:54.330
I'm sorry?

1213
01:10:54.330 --> 01:10:56.104
<v Audience Member>I'm like Tommy.</v>

1214
01:10:56.104 --> 01:10:57.470
<v ->Like Tommy?</v>

1215
01:10:57.470 --> 01:10:59.477
Oh, the musical.

1216
01:10:59.477 --> 01:11:00.310
(audience member agreeing)

1217
01:11:00.310 --> 01:11:01.143
Yes.

1218
01:11:01.143 --> 01:11:01.990
No, I didn't see it.

1219
01:11:01.990 --> 01:11:03.854
It's for hippies.
(laughs)

1220
01:11:03.854 --> 01:11:05.375
(audience member talking)
Anyway.

1221
01:11:05.375 --> 01:11:08.650
(laughs)
(audience member talking)

1222
01:11:08.650 --> 01:11:12.240
Okay.
(audience member talking)

1223
01:11:17.330 --> 01:11:19.050
So, overlaps with cognitive,

1224
01:11:19.050 --> 01:11:20.509
what kind of overlaps?

1225
01:11:20.509 --> 01:11:24.009
(audience member talking)

1226
01:11:24.870 --> 01:11:26.175
Okay, captions.

1227
01:11:26.175 --> 01:11:27.008
<v Audience Member>Yeah,</v>

1228
01:11:27.008 --> 01:11:30.382
and as I said, visual feedback.

1229
01:11:30.382 --> 01:11:33.882
(audience member talking)

1230
01:11:38.080 --> 01:11:39.540
<v ->Right, so visual feedback,</v>

1231
01:11:39.540 --> 01:11:41.420
you don't hear the mouse click,

1232
01:11:41.420 --> 01:11:44.960
right.
(audience member talking)

1233
01:11:46.186 --> 01:11:47.019
Okay.

1234
01:11:47.019 --> 01:11:50.519
(audience member talking)

1235
01:11:51.876 --> 01:11:53.711
<v Audience Member>I would like to see things</v>

1236
01:11:53.711 --> 01:11:55.440
instead of hearing them.

1237
01:11:55.440 --> 01:11:57.010
<v ->You'd like to see instead of hear something?</v>

1238
01:11:57.010 --> 01:11:59.540
<v Audience Member>So, sometimes video instructions</v>

1239
01:12:01.569 --> 01:12:03.680
may be better than audio instructions.

1240
01:12:05.120 --> 01:12:06.290
<v ->Oh, video instruction is better</v>

1241
01:12:06.290 --> 01:12:07.950
than just listening to instructions?

1242
01:12:07.950 --> 01:12:08.986
<v Audience Member>Yes.</v>

1243
01:12:08.986 --> 01:12:09.819
<v ->So you can see what's going on?</v>

1244
01:12:09.819 --> 01:12:13.319
(audience member talking)

1245
01:12:26.550 --> 01:12:28.500
I'm hearing the group say, "Structure."

1246
01:12:29.500 --> 01:12:31.218
Is the group saying structure?

1247
01:12:31.218 --> 01:12:32.550
(audience members agreeing)

1248
01:12:32.550 --> 01:12:34.410
You just kept coming back to structure.

1249
01:12:34.410 --> 01:12:37.090
So, for context, for the other few tables,

1250
01:12:37.090 --> 01:12:38.880
I think they're anchored on structure,

1251
01:12:38.880 --> 01:12:41.536
because Monique made a matrix.

1252
01:12:41.536 --> 01:12:42.580
(audience laughs)
<v Monique>Sorry.</v>

1253
01:12:42.580 --> 01:12:45.900
<v ->Where she put check marks for each of the disability types</v>

1254
01:12:45.900 --> 01:12:47.850
and where there were overlaps.

1255
01:12:47.850 --> 01:12:49.320
That's not a criticism.

1256
01:12:49.320 --> 01:12:50.680
Any tactic that works,

1257
01:12:50.680 --> 01:12:54.500
that helps you get to map some of that stuff is great.

1258
01:12:54.500 --> 01:12:57.088
Doesn't mean anybody did anything wrong or right.

1259
01:12:57.088 --> 01:12:59.293
I mean, Monique maybe did something right.

1260
01:12:59.293 --> 01:13:02.793
(audience member talking)

1261
01:13:04.560 --> 01:13:05.421
Yeah.

1262
01:13:05.421 --> 01:13:07.380
(audience member talking)

1263
01:13:07.380 --> 01:13:10.700
Okay.
(audience member talking)

1264
01:13:10.700 --> 01:13:12.094
You had an overlap with physical?

1265
01:13:12.094 --> 01:13:15.350
(audience member talking)

1266
01:13:15.350 --> 01:13:16.530
You can't hear the car horn

1267
01:13:16.530 --> 01:13:18.455
before it runs you down on the street?

1268
01:13:18.455 --> 01:13:21.280
(audience member talking)

1269
01:13:21.280 --> 01:13:24.373
Okay.
(audience member talking)

1270
01:13:24.373 --> 01:13:25.510
It does get confusing, doesn't it?

1271
01:13:26.516 --> 01:13:27.639
Yeah.

1272
01:13:27.639 --> 01:13:31.139
(audience member talking)

1273
01:13:34.950 --> 01:13:36.684
<v ->For instance, if my arm was hurting,</v>

1274
01:13:36.684 --> 01:13:38.242
I don't want to hold a book,

1275
01:13:38.242 --> 01:13:39.075
'cause it's heavy.

1276
01:13:39.075 --> 01:13:40.780
I know it's a weapon.

1277
01:13:40.780 --> 01:13:43.749
<v ->Right.</v>
<v ->And, so it led to here.</v>

1278
01:13:43.749 --> 01:13:46.670
<v ->So, with a broken arm, holding a heavy book,</v>

1279
01:13:46.670 --> 01:13:48.050
if you could just have it spoken to you,

1280
01:13:48.050 --> 01:13:48.883
that would be easier.

1281
01:13:48.883 --> 01:13:50.440
<v ->It would be easier, yeah.</v>

1282
01:13:50.440 --> 01:13:52.170
<v ->Yeah, so you might use the same technology,</v>

1283
01:13:52.170 --> 01:13:54.190
somebody who's blind, right?

1284
01:13:54.190 --> 01:13:57.800
Okay.
(audience member talking)

1285
01:14:00.040 --> 01:14:03.550
Yep.
(audience member talking)

1286
01:14:05.920 --> 01:14:07.670
We keep coming back to video instructions.

1287
01:14:07.670 --> 01:14:10.390
I feel like you guys have been doing lots of tutorials.

1288
01:14:10.390 --> 01:14:12.620
This is potentially compelling.

1289
01:14:12.620 --> 01:14:14.910
I wanna watch this YouTube channel.

1290
01:14:14.910 --> 01:14:16.310
I hope it's cooking related.

1291
01:14:17.370 --> 01:14:19.993
And, you looked at me first, sorry.

1292
01:14:19.993 --> 01:14:22.470
(audience member laughs)
(audience member talking)

1293
01:14:22.470 --> 01:14:26.720
You got blindness, okay.
(audience member talking)

1294
01:14:33.090 --> 01:14:34.860
Okay, so you need to be somewhere quiet enough

1295
01:14:34.860 --> 01:14:36.420
that it doesn't drown out

1296
01:14:36.420 --> 01:14:37.914
the screen that you're listening to.

1297
01:14:37.914 --> 01:14:41.414
(audience member talking)

1298
01:14:47.580 --> 01:14:49.280
Right, somebody with dyslexia relies on

1299
01:14:49.280 --> 01:14:51.005
having it spoken instead of reading.

1300
01:14:51.005 --> 01:14:54.505
(audience member talking)

1301
01:14:59.250 --> 01:15:03.080
Structure.
(audience member talking)

1302
01:15:05.070 --> 01:15:06.914
Right, structure's always good.

1303
01:15:06.914 --> 01:15:10.414
(audience member talking)

1304
01:15:20.370 --> 01:15:21.455
ADD?

1305
01:15:21.455 --> 01:15:26.170
Yeah.
(audience member talking)

1306
01:15:26.170 --> 01:15:27.250
So, structure is helpful,

1307
01:15:27.250 --> 01:15:28.460
not just for screen readers,

1308
01:15:28.460 --> 01:15:30.460
but for somebody with ADD who needs

1309
01:15:30.460 --> 01:15:32.773
to be able to just quickly jump to a section.

1310
01:15:32.773 --> 01:15:36.320
(audience member talking)

1311
01:15:36.320 --> 01:15:38.195
Smaller font text, like simpler.

1312
01:15:38.195 --> 01:15:39.676
(audience member talking)
Simpler instructions.

1313
01:15:39.676 --> 01:15:42.142
(audience member talking)
Direct, yeah.

1314
01:15:42.142 --> 01:15:45.642
(audience member talking)

1315
01:15:51.160 --> 01:15:52.754
So, smaller devices.

1316
01:15:52.754 --> 01:15:57.754
Yeah.
(audience member talking)

1317
01:16:09.500 --> 01:16:11.510
Intellectual, low vision overlaps.

1318
01:16:11.510 --> 01:16:12.430
Okay.

1319
01:16:12.430 --> 01:16:16.190
I think the goal of the exercise is to get you thinking

1320
01:16:16.190 --> 01:16:19.190
about for each of those disability types,

1321
01:16:19.190 --> 01:16:22.710
what are the things that you can struggle with

1322
01:16:22.710 --> 01:16:24.630
or leverage from another disability type.

1323
01:16:24.630 --> 01:16:26.650
And, as I mentioned before,

1324
01:16:26.650 --> 01:16:29.030
disabilities come in sets.

1325
01:16:29.030 --> 01:16:30.280
Often, they're matched to sets,

1326
01:16:30.280 --> 01:16:31.760
sometimes they don't match.

1327
01:16:31.760 --> 01:16:34.520
So, you have to sort of prime yourself

1328
01:16:34.520 --> 01:16:35.640
as you're building this thing

1329
01:16:35.640 --> 01:16:37.410
into your question earlier, Monique,

1330
01:16:37.410 --> 01:16:39.800
about can you build something for one

1331
01:16:39.800 --> 01:16:41.170
and end up excluding another?

1332
01:16:41.170 --> 01:16:42.020
Yes, you can.

1333
01:16:44.182 --> 01:16:45.400
The goal of an exercise like this

1334
01:16:45.400 --> 01:16:48.580
is to have you thinking about more ways,

1335
01:16:48.580 --> 01:16:51.600
and if each you champions one disability type,

1336
01:16:51.600 --> 01:16:54.670
ideally, you can point out to somebody else in your team,

1337
01:16:54.670 --> 01:16:56.540
"Oh, hey, that's gonna be a problem."

1338
01:16:56.540 --> 01:16:58.930
And, then you start to have those kinds of conversations.

1339
01:16:58.930 --> 01:17:00.630
And, this can work within an organization.

1340
01:17:00.630 --> 01:17:01.710
It can work within a team.

1341
01:17:01.710 --> 01:17:04.410
It can work in chat rooms on the Internets.

1342
01:17:04.410 --> 01:17:05.560
Whatever works for you.

1343
01:17:06.900 --> 01:17:09.750
Before I jump into the next section,

1344
01:17:09.750 --> 01:17:11.720
do you have any questions so far?

1345
01:17:14.014 --> 01:17:15.002
Yeah?

1346
01:17:15.002 --> 01:17:18.502
(audience member talking)

1347
01:17:32.420 --> 01:17:34.810
I'm going to defer your question,

1348
01:17:34.810 --> 01:17:37.420
screen reader question for the benefit of captioning later.

1349
01:17:37.420 --> 01:17:38.400
I'm gonna defer that question

1350
01:17:38.400 --> 01:17:40.500
until we get to the technical section,

1351
01:17:40.500 --> 01:17:41.860
because there might be some stuff in there

1352
01:17:41.860 --> 01:17:44.280
that I explain that answers it,

1353
01:17:44.280 --> 01:17:47.000
and then you can ask me a question to really stump me

1354
01:17:47.000 --> 01:17:48.990
when I don't answer it,

1355
01:17:48.990 --> 01:17:50.790
'cause that's always more hilarious.

1356
01:17:52.000 --> 01:17:54.400
Anything else on what we've gone through so far?

1357
01:17:55.310 --> 01:17:56.220
Okay.

1358
01:17:56.220 --> 01:17:59.330
We're gonna talk about user experience models.

1359
01:17:59.330 --> 01:18:00.670
I want to qualify,

1360
01:18:00.670 --> 01:18:04.270
if any of you does any work with personas and user stories,

1361
01:18:04.270 --> 01:18:05.500
what you're about to see

1362
01:18:05.500 --> 01:18:09.620
for these next few slides is not quite right.

1363
01:18:09.620 --> 01:18:12.660
I'm greatly oversimplifying an entire industry

1364
01:18:12.660 --> 01:18:15.560
and area of practice into a handful of slides,

1365
01:18:15.560 --> 01:18:17.570
but it's because I want to get you thinking about it

1366
01:18:17.570 --> 01:18:19.130
a little bit more abstractly.

1367
01:18:21.900 --> 01:18:23.290
In it's simplest,

1368
01:18:23.290 --> 01:18:24.260
at its very simplest,

1369
01:18:24.260 --> 01:18:29.260
user stories are talking about a particular user,

1370
01:18:29.830 --> 01:18:31.640
the outcome that user wants,

1371
01:18:31.640 --> 01:18:33.080
and the value.

1372
01:18:33.080 --> 01:18:35.230
What value the user gets from that outcome,

1373
01:18:36.250 --> 01:18:38.000
and they're often written,

1374
01:18:38.000 --> 01:18:40.830
"As user, I want outcome,

1375
01:18:40.830 --> 01:18:42.650
"As user, I want outcome,

1376
01:18:42.650 --> 01:18:44.320
"So that value,

1377
01:18:45.170 --> 01:18:48.180
"In order to get value as user, I want outcome."

1378
01:18:51.610 --> 01:18:52.740
As some examples,

1379
01:18:53.580 --> 01:18:55.710
"As a user on a sunlit patio,

1380
01:18:55.710 --> 01:18:57.700
"I want to be able to read the content,

1381
01:18:57.700 --> 01:18:58.850
"and see the controls."

1382
01:18:59.900 --> 01:19:01.990
I'm not talking about a disability.

1383
01:19:01.990 --> 01:19:05.000
I'm talking about a situational or temporary impairment.

1384
01:19:06.350 --> 01:19:08.410
"As a user in bed with a sleeping spouse,

1385
01:19:08.410 --> 01:19:10.550
"I want to watch a training video in silence,

1386
01:19:10.550 --> 01:19:12.450
"so that I can get caught up at work."

1387
01:19:13.380 --> 01:19:15.240
Not a disability,

1388
01:19:15.240 --> 01:19:16.590
just a temporary situation.

1389
01:19:17.780 --> 01:19:20.590
"In order to click links as a user with no elbow room

1390
01:19:20.590 --> 01:19:22.850
"in coach class with a tiny trackpad,

1391
01:19:22.850 --> 01:19:23.770
"I want to click areas

1392
01:19:23.770 --> 01:19:25.920
"to be large enough and adequately spaced."

1393
01:19:26.790 --> 01:19:31.250
If any of you flew here and worked at all on that flight,

1394
01:19:31.250 --> 01:19:32.890
maybe this is familiar to you.

1395
01:19:34.950 --> 01:19:37.030
Also, they leave the visor open,

1396
01:19:37.030 --> 01:19:38.510
the sun's on half your screen,

1397
01:19:38.510 --> 01:19:39.730
and then turbulence,

1398
01:19:39.730 --> 01:19:42.370
and somebody spills water, yeah.

1399
01:19:42.370 --> 01:19:43.203
Terrible working,

1400
01:19:43.203 --> 01:19:44.430
and there's a baby shrieking,

1401
01:19:45.509 --> 01:19:47.640
and they don't give you any more noodles.

1402
01:19:47.640 --> 01:19:50.410
"As a user distracted by the television,

1403
01:19:50.410 --> 01:19:52.160
"I want clear headings and labels

1404
01:19:52.160 --> 01:19:54.280
"so that I don't lose my place."

1405
01:19:54.280 --> 01:19:55.310
Back to structure.

1406
01:19:57.550 --> 01:19:59.790
These are really, really oversimplified.

1407
01:19:59.790 --> 01:20:00.623
I get that.

1408
01:20:01.530 --> 01:20:05.914
There are these really cool personas that are pre-written

1409
01:20:05.914 --> 01:20:10.020
that you use to feed into these user stories.

1410
01:20:10.020 --> 01:20:12.390
These personas were put together by Sarah Horton

1411
01:20:12.390 --> 01:20:13.940
from the Paciello Group,

1412
01:20:13.940 --> 01:20:15.680
and Whitney Quesenbery.

1413
01:20:15.680 --> 01:20:18.450
They did it for the book A Web For Everyone.

1414
01:20:18.450 --> 01:20:20.280
The cool thing is these personas

1415
01:20:20.280 --> 01:20:23.180
are free for you to download.

1416
01:20:23.180 --> 01:20:25.350
I wanna say they're at uxmag.com,

1417
01:20:26.450 --> 01:20:28.290
and there's a link in the slides,

1418
01:20:28.290 --> 01:20:29.640
which you will get later,

1419
01:20:29.640 --> 01:20:31.890
but these are pre-written personas

1420
01:20:31.890 --> 01:20:33.340
for people with disabilities.

1421
01:20:34.200 --> 01:20:35.270
They're awesome,

1422
01:20:35.270 --> 01:20:36.480
because now,

1423
01:20:36.480 --> 01:20:37.640
you can hear about Lea,

1424
01:20:37.640 --> 01:20:39.920
and Lea lives with fatigue and pain,

1425
01:20:40.830 --> 01:20:43.970
and now you're not just "As user," whatever,

1426
01:20:43.970 --> 01:20:44.920
you can say,

1427
01:20:44.920 --> 01:20:46.330
"As Lea,

1428
01:20:46.330 --> 01:20:49.090
"I want to be able to shop online,

1429
01:20:49.090 --> 01:20:52.770
"but it's very difficult with my wrists

1430
01:20:52.770 --> 01:20:54.170
"to be able to type in all the stuff

1431
01:20:54.170 --> 01:20:55.970
"you asked for on the shopping cart."

1432
01:20:57.130 --> 01:21:00.170
So, you've identified who the person is.

1433
01:21:00.170 --> 01:21:01.690
That's where personas control

1434
01:21:01.690 --> 01:21:04.260
that can bring the greatest value.

1435
01:21:04.260 --> 01:21:07.220
They're a way to try and convey empathy.

1436
01:21:07.220 --> 01:21:08.980
They're a way to put names

1437
01:21:08.980 --> 01:21:12.200
with some of these collections of disabilities.

1438
01:21:12.200 --> 01:21:13.780
There's always a catch, though,

1439
01:21:13.780 --> 01:21:16.910
in that organizations that rely on personas

1440
01:21:16.910 --> 01:21:19.820
will often throw away the disability personas.

1441
01:21:20.800 --> 01:21:22.950
They're trying to get down to three personas,

1442
01:21:22.950 --> 01:21:23.830
five personas,

1443
01:21:23.830 --> 01:21:25.200
somewhere in that number,

1444
01:21:25.200 --> 01:21:26.033
and when they do that,

1445
01:21:26.033 --> 01:21:27.130
they're gonna take Lea,

1446
01:21:27.130 --> 01:21:28.360
they're gonna take Vishnu,

1447
01:21:28.360 --> 01:21:29.590
and they're gonna say,

1448
01:21:29.590 --> 01:21:32.870
"No, we don't need to worry about Vishnu,

1449
01:21:32.870 --> 01:21:33.930
"who has low vision,

1450
01:21:33.930 --> 01:21:35.840
"or Lea, with fatigue and pain.

1451
01:21:35.840 --> 01:21:38.170
"It doesn't represent all of our users."

1452
01:21:38.170 --> 01:21:39.940
So, you have to get a little bit creative.

1453
01:21:39.940 --> 01:21:41.890
I suggest that at the very least,

1454
01:21:41.890 --> 01:21:44.210
you take a look at my talk from last year,

1455
01:21:44.210 --> 01:21:45.930
Selfish Accessibility,

1456
01:21:45.930 --> 01:21:48.360
where I pitch the idea of taking

1457
01:21:48.360 --> 01:21:50.640
some of these concepts I've talked about,

1458
01:21:50.640 --> 01:21:52.850
temporary and situational impairments,

1459
01:21:52.850 --> 01:21:55.350
and folding them into your existing user stories.

1460
01:21:57.780 --> 01:22:00.560
The trick is to think about who your stakeholders are

1461
01:22:01.540 --> 01:22:03.380
and think about their situations.

1462
01:22:03.380 --> 01:22:05.680
If I'm a stakeholder on your product,

1463
01:22:06.520 --> 01:22:08.240
if I'm a stakeholder for your team,

1464
01:22:08.240 --> 01:22:11.730
if I'm a person who signs off on what personas can be there,

1465
01:22:11.730 --> 01:22:12.650
or I'm C-level,

1466
01:22:12.650 --> 01:22:15.960
and I rely on the software doing what I want,

1467
01:22:15.960 --> 01:22:17.520
I don't even need to see the personas,

1468
01:22:17.520 --> 01:22:19.460
but if I'm represented in some way,

1469
01:22:19.460 --> 01:22:21.540
I'm more likely to go along with it.

1470
01:22:21.540 --> 01:22:23.590
This might be my persona if I'm that guy.

1471
01:22:24.590 --> 01:22:26.130
I work when I should be relaxing.

1472
01:22:26.130 --> 01:22:27.210
I relax when I should work.

1473
01:22:27.210 --> 01:22:30.070
I have a weird way of doing things.

1474
01:22:30.070 --> 01:22:32.970
It's very inefficient and frustrating.

1475
01:22:32.970 --> 01:22:34.500
I live between motorcycles,

1476
01:22:34.500 --> 01:22:35.910
so as a result,

1477
01:22:35.910 --> 01:22:38.800
I have the captions on my television all the time,

1478
01:22:38.800 --> 01:22:41.170
because these guys like to rev their motorcycles

1479
01:22:41.170 --> 01:22:43.740
and show off whose muffler is worse.

1480
01:22:43.740 --> 01:22:44.573
It's a thing.

1481
01:22:45.930 --> 01:22:48.220
So, I can't always hear.

1482
01:22:48.220 --> 01:22:50.170
They'll start that up on a summer evening

1483
01:22:50.170 --> 01:22:51.680
when I'm watching something,

1484
01:22:51.680 --> 01:22:53.240
and if I don't have captions on,

1485
01:22:53.240 --> 01:22:55.300
I miss as long as it takes me

1486
01:22:55.300 --> 01:22:58.000
to find the closed captions button.

1487
01:22:58.000 --> 01:23:00.340
I work late at night with the television on.

1488
01:23:00.340 --> 01:23:01.470
I need some white noise,

1489
01:23:01.470 --> 01:23:03.910
that means I can be easily distracted,

1490
01:23:03.910 --> 01:23:05.700
or I can work for a long periods.

1491
01:23:05.700 --> 01:23:07.270
I use subtitles in Netflix.

1492
01:23:07.270 --> 01:23:09.690
I keep all of my screens as dark as possible.

1493
01:23:11.370 --> 01:23:12.380
In the case of my phone,

1494
01:23:12.380 --> 01:23:14.360
I keep my screen as dark as possible,

1495
01:23:14.360 --> 01:23:16.340
because I'm saving battery,

1496
01:23:16.340 --> 01:23:18.820
because I will just burn through battery,

1497
01:23:18.820 --> 01:23:20.446
swipe right.

1498
01:23:20.446 --> 01:23:21.940
(audience member talking)

1499
01:23:21.940 --> 01:23:22.840
Not really. Maybe.

1500
01:23:23.850 --> 01:23:25.180
Same thing with my laptop,

1501
01:23:25.180 --> 01:23:26.940
the darker I can keep the screen,

1502
01:23:26.940 --> 01:23:28.580
the more battery I'm gonna save,

1503
01:23:28.580 --> 01:23:29.470
but on top of that,

1504
01:23:29.470 --> 01:23:31.780
I don't like scorching my retinas.

1505
01:23:31.780 --> 01:23:32.613
You need that,

1506
01:23:32.613 --> 01:23:33.446
your work environment,

1507
01:23:33.446 --> 01:23:34.480
the screen should be as bright

1508
01:23:34.480 --> 01:23:35.870
as the surrounding environment,

1509
01:23:35.870 --> 01:23:37.790
otherwise you're causing eye fatigue, et cetera,

1510
01:23:37.790 --> 01:23:39.090
and turning down the brightness

1511
01:23:39.090 --> 01:23:42.420
is a great way to help with that.

1512
01:23:42.420 --> 01:23:45.880
So, this might be me as your stakeholder.

1513
01:23:45.880 --> 01:23:49.050
You might have a stakeholder on your project

1514
01:23:49.050 --> 01:23:50.360
or a C-level executive,

1515
01:23:50.360 --> 01:23:51.420
or a high level person,

1516
01:23:51.420 --> 01:23:53.750
or a client who always works on the train.

1517
01:23:54.780 --> 01:23:56.510
That person commutes every day.

1518
01:23:56.510 --> 01:23:59.910
That person sends e-mail from the quiet car

1519
01:23:59.910 --> 01:24:02.460
or from a random spot on the train.

1520
01:24:02.460 --> 01:24:06.180
Maybe she's always coming in on first class over a border.

1521
01:24:06.180 --> 01:24:08.280
Awesome, maybe account for that,

1522
01:24:08.280 --> 01:24:12.150
maybe write your persona to reference that trait

1523
01:24:12.150 --> 01:24:14.340
that she's in a noisy car,

1524
01:24:14.340 --> 01:24:18.110
that the train's always bumping around,

1525
01:24:18.110 --> 01:24:21.430
that there's always this distraction of other people,

1526
01:24:21.430 --> 01:24:23.630
that it can get loud in there.

1527
01:24:23.630 --> 01:24:25.870
When you write those into the story,

1528
01:24:25.870 --> 01:24:30.240
when you make those part of the description of your persona,

1529
01:24:30.240 --> 01:24:31.320
this narrative section,

1530
01:24:31.320 --> 01:24:32.860
you're gonna get more buy in.

1531
01:24:32.860 --> 01:24:35.240
You're gonna get more stakeholders and clients

1532
01:24:35.240 --> 01:24:37.340
who see themselves represented

1533
01:24:37.340 --> 01:24:39.200
in the things that you're trying to solve.

1534
01:24:39.200 --> 01:24:42.890
This makes it easier to try and ensure that those personas,

1535
01:24:42.890 --> 01:24:44.220
and later those user stories,

1536
01:24:44.220 --> 01:24:45.404
are represented,

1537
01:24:45.404 --> 01:24:49.700
because you're not representing a disability type.

1538
01:24:49.700 --> 01:24:54.400
You're representing the temporary situational disabilities

1539
01:24:54.400 --> 01:24:56.320
that the people who make these decisions

1540
01:24:56.320 --> 01:24:57.520
experience all the time.

1541
01:24:59.330 --> 01:25:00.680
Did I lose anybody on that?

1542
01:25:01.750 --> 01:25:03.500
How many of you work with personas?

1543
01:25:05.120 --> 01:25:05.953
Okay.

1544
01:25:05.953 --> 01:25:07.862
So, how many of you are offended at my

1545
01:25:07.862 --> 01:25:10.340
really compressed version of personas,

1546
01:25:10.340 --> 01:25:11.590
and I'm rejiggering them?

1547
01:25:12.590 --> 01:25:14.140
That's very nice of you to say.

1548
01:25:15.130 --> 01:25:16.780
You know there's no grade in here?

1549
01:25:17.690 --> 01:25:21.750
You just sorta hang out and do stuff.

1550
01:25:22.830 --> 01:25:24.510
What's funny is I've gone through that

1551
01:25:24.510 --> 01:25:26.760
a little bit faster than I expected,

1552
01:25:26.760 --> 01:25:27.840
but the good news is,

1553
01:25:27.840 --> 01:25:31.880
this is where we're going to our third group exercise.

1554
01:25:31.880 --> 01:25:33.460
We're doin' four group exercises.

1555
01:25:33.460 --> 01:25:34.560
This is the third one.

1556
01:25:36.010 --> 01:25:37.590
So, if you're still awake,

1557
01:25:37.590 --> 01:25:38.423
this is good.

1558
01:25:39.800 --> 01:25:42.300
What I want you to do is, as a group,

1559
01:25:42.300 --> 01:25:44.240
develop a persona.

1560
01:25:44.240 --> 01:25:45.240
It's a proto-persona.

1561
01:25:45.240 --> 01:25:46.250
It's virtual persona.

1562
01:25:46.250 --> 01:25:47.580
It's a crap persona.

1563
01:25:47.580 --> 01:25:49.930
It's not a professional persona,

1564
01:25:49.930 --> 01:25:52.420
but I want you to come up with somebody,

1565
01:25:52.420 --> 01:25:54.870
assigned a name, assigned an age,

1566
01:25:54.870 --> 01:25:55.860
maybe a job,

1567
01:25:55.860 --> 01:25:58.760
come up with a quick interest or what the person is about,

1568
01:25:59.660 --> 01:26:01.660
and then just come up with a couple user stories

1569
01:26:01.660 --> 01:26:04.010
for your persona that relate to that interface

1570
01:26:04.010 --> 01:26:06.100
that you're putting together.

1571
01:26:06.100 --> 01:26:11.100
So, if you've put together a pizza ordering screen,

1572
01:26:13.110 --> 01:26:13.943
I'm simplifying,

1573
01:26:13.943 --> 01:26:16.680
I'm forking off a little bit from Ecommerce.

1574
01:26:16.680 --> 01:26:19.450
You know, as Lea,

1575
01:26:19.450 --> 01:26:21.790
who can't go to the pizza store,

1576
01:26:22.850 --> 01:26:24.230
I wanna be able to get pizza

1577
01:26:24.230 --> 01:26:26.230
without having to talk to somebody on the phone,

1578
01:26:26.230 --> 01:26:28.790
'cause they're always a bunch of jerks.

1579
01:26:28.790 --> 01:26:30.610
Okay, that is a user story.

1580
01:26:33.040 --> 01:26:35.170
So, simple persona,

1581
01:26:35.170 --> 01:26:36.650
name,

1582
01:26:36.650 --> 01:26:38.270
age,

1583
01:26:38.270 --> 01:26:39.880
quick, quick narrative,

1584
01:26:39.880 --> 01:26:42.280
come up with a couple user stories

1585
01:26:42.280 --> 01:26:44.010
related to your interface.

1586
01:26:44.010 --> 01:26:46.220
You have 15 minutes to go do that,

1587
01:26:46.220 --> 01:26:48.636
and I will work around to answer questions.

1588
01:26:48.636 --> 01:26:51.636
(audience chatting)

1589
01:27:02.962 --> 01:27:03.795
How do I,

1590
01:27:03.795 --> 01:27:05.641
oh, hello, hello, hello?

1591
01:27:05.641 --> 01:27:09.101
I thought I hit mute.

1592
01:27:09.101 --> 01:27:14.101
(audience laughing)
(audience chatting)

1593
01:29:07.689 --> 01:29:09.669
I'm just gonna go over there now.

1594
01:29:09.669 --> 01:29:14.669
(audience laughing)
(audience chatting)

1595
01:39:19.415 --> 01:39:20.385
Hello, hello,

1596
01:39:20.385 --> 01:39:21.218
check, check, check,

1597
01:39:21.218 --> 01:39:22.730
hello, hello?

1598
01:39:22.730 --> 01:39:25.380
Okay.
(audience chatting)

1599
01:39:25.380 --> 01:39:28.974
I can tell how excited everybody is about their fake person.

1600
01:39:28.974 --> 01:39:30.600
(audience chatting)

1601
01:39:30.600 --> 01:39:33.850
I look forward to being picked up in the Marvel Universe.

1602
01:39:33.850 --> 01:39:35.180
So, what I'm going to do

1603
01:39:35.180 --> 01:39:38.980
is I'm going to hand a microphone to the first group.

1604
01:39:38.980 --> 01:39:39.813
I'm gonna start,

1605
01:39:39.813 --> 01:39:40.777
'cause you're on my left,

1606
01:39:40.777 --> 01:39:43.250
and then you will tell me,

1607
01:39:43.250 --> 01:39:44.780
you will read off the bits

1608
01:39:44.780 --> 01:39:46.570
about your persona and user stories.

1609
01:39:46.570 --> 01:39:47.403
You're looking at me,

1610
01:39:47.403 --> 01:39:48.771
does that mean you're doing it?

1611
01:39:48.771 --> 01:39:52.354
(audience members talking)

1612
01:39:53.630 --> 01:39:55.010
'Cause, I wanna get this captioned as well.

1613
01:39:55.010 --> 01:39:56.538
<v ->Oh, okay.</v>
<v ->Okay?</v>

1614
01:39:56.538 --> 01:39:58.370
(audience chatting)

1615
01:39:58.370 --> 01:39:59.203
Folks.

1616
01:40:00.660 --> 01:40:01.810
Team on the right side,

1617
01:40:02.800 --> 01:40:04.300
she's gonna start reading off her persona,

1618
01:40:04.300 --> 01:40:05.970
and we're gonna continue this exercise,

1619
01:40:05.970 --> 01:40:07.420
so please.

1620
01:40:07.420 --> 01:40:10.750
<v ->So, I'm Hannah.</v>

1621
01:40:11.750 --> 01:40:14.210
I'm 26 years old,

1622
01:40:14.210 --> 01:40:17.550
and I have low vision.

1623
01:40:17.550 --> 01:40:19.650
Basically, I am astigmatic.

1624
01:40:21.320 --> 01:40:24.490
So, my interests are,

1625
01:40:26.357 --> 01:40:27.660
I'm outgoing person.

1626
01:40:27.660 --> 01:40:28.750
I like dancing.

1627
01:40:29.740 --> 01:40:34.000
On the other hand, I like to stay at home and watch Netflix.

1628
01:40:35.370 --> 01:40:37.220
I am outgoing,

1629
01:40:37.220 --> 01:40:39.140
but I don't like going to cinema.

1630
01:40:40.650 --> 01:40:41.680
I like Netflix,

1631
01:40:41.680 --> 01:40:46.680
because they have the titles that I can see very well.

1632
01:40:50.050 --> 01:40:53.920
On the other hand, I studied psychology.

1633
01:40:53.920 --> 01:40:55.210
I went to college,

1634
01:40:55.210 --> 01:40:58.340
so I passed my exams,

1635
01:40:58.340 --> 01:41:03.340
and I'm now looking for jobs and NCDs online and resumes.

1636
01:41:06.587 --> 01:41:08.450
My aspirations,

1637
01:41:10.600 --> 01:41:12.820
because I live in a mid-city,

1638
01:41:12.820 --> 01:41:16.300
I live with my parents,

1639
01:41:16.300 --> 01:41:18.940
and I want to be more independent in the future,

1640
01:41:18.940 --> 01:41:22.840
so I want to move out and get more incomes,

1641
01:41:25.180 --> 01:41:28.030
and I want to teach psychology online in the future,

1642
01:41:28.030 --> 01:41:33.030
and also to be a psychologic assistant in a school.

1643
01:41:35.920 --> 01:41:39.150
So, that would be my aspirations for the futures.

1644
01:41:40.920 --> 01:41:41.753
<v ->Okay.</v>

1645
01:41:41.753 --> 01:41:43.000
That's Hannah.

1646
01:41:43.000 --> 01:41:43.833
<v ->Yep.</v>

1647
01:41:43.833 --> 01:41:44.666
<v ->Okay, I like that.</v>

1648
01:41:44.666 --> 01:41:45.499
Thank you.

1649
01:41:46.400 --> 01:41:48.200
I look forward to

1650
01:41:48.200 --> 01:41:50.450
when we integrate Hannah into the next round.

1651
01:41:51.650 --> 01:41:54.270
Does Hannah have any videos on YouTube of dancing?

1652
01:41:54.270 --> 01:41:55.103
<v ->No.</v>

1653
01:41:55.103 --> 01:41:56.555
<v ->I understand there's money in it.</v>

1654
01:41:56.555 --> 01:41:57.560
<v ->No.</v>
<v ->No, okay?</v>

1655
01:41:58.540 --> 01:42:00.040
Who from this group is going

1656
01:42:00.040 --> 01:42:02.550
to take the microphone and report?

1657
01:42:02.550 --> 01:42:03.650
Don't make me drop it.

1658
01:42:04.640 --> 01:42:05.473
Okay.

1659
01:42:06.362 --> 01:42:07.990
<v ->So, we have Matt.</v>

1660
01:42:07.990 --> 01:42:10.160
Matt is 72 years old.

1661
01:42:10.160 --> 01:42:12.440
He doesn't live near shops

1662
01:42:12.440 --> 01:42:16.940
and is not good with technology.

1663
01:42:16.940 --> 01:42:18.840
He can't afford to have a car.

1664
01:42:20.950 --> 01:42:23.040
He likes to healthy and cheap food,

1665
01:42:23.040 --> 01:42:24.520
and he is a vegetarian.

1666
01:42:26.431 --> 01:42:28.675
(speaks with heavy accent)
And, he likes to read.

1667
01:42:28.675 --> 01:42:30.450
(laughs)

1668
01:42:30.450 --> 01:42:31.410
And as Matt,

1669
01:42:31.410 --> 01:42:32.810
I want to order groceries online,

1670
01:42:32.810 --> 01:42:34.110
so that I can feed myself.

1671
01:42:35.090 --> 01:42:36.679
<v ->Good idea.</v>

1672
01:42:36.679 --> 01:42:41.000
<v ->(laughs) And, as Matt, I want clear instructions</v>

1673
01:42:41.000 --> 01:42:42.870
on how to order my groceries online,

1674
01:42:42.870 --> 01:42:45.730
so that I am able to place an order and understand.

1675
01:42:46.630 --> 01:42:48.920
And, as Matt, I want to see what I'm spending,

1676
01:42:48.920 --> 01:42:50.570
so that I can stay within budget.

1677
01:42:51.880 --> 01:42:54.340
As Matt, I want to see personalized discounts,

1678
01:42:54.340 --> 01:42:57.330
so that I can spend my money wisely and eat diversely.

1679
01:42:58.440 --> 01:43:00.220
And, as Matt, I want to see the ingredients,

1680
01:43:00.220 --> 01:43:02.170
so that I can make sure to eat healthy.

1681
01:43:03.350 --> 01:43:04.183
That was it.

1682
01:43:04.183 --> 01:43:05.810
<v ->Okay.</v>

1683
01:43:06.860 --> 01:43:08.959
I feel like Matt should go out clubbing with Hannah.

1684
01:43:08.959 --> 01:43:11.180
(audience laughs)

1685
01:43:11.180 --> 01:43:13.500
They might have a really good time.

1686
01:43:13.500 --> 01:43:15.450
Who from this table is going to report?

1687
01:43:18.710 --> 01:43:19.543
<v Audience Member>Me?</v>

1688
01:43:19.543 --> 01:43:20.376
<v ->'Cause, you were looking at your phone,</v>

1689
01:43:20.376 --> 01:43:21.300
and you got nominated.

1690
01:43:21.300 --> 01:43:23.193
(audience member talking)

1691
01:43:23.193 --> 01:43:24.026
Oh, oh.

1692
01:43:24.026 --> 01:43:27.150
<v ->Okay, so our persona is Arianna.</v>

1693
01:43:27.150 --> 01:43:28.940
She's 31 years old.

1694
01:43:29.930 --> 01:43:31.590
She lives in Belgrade,

1695
01:43:31.590 --> 01:43:32.770
and she's not married,

1696
01:43:32.770 --> 01:43:35.240
but she has a cat.

1697
01:43:35.240 --> 01:43:36.420
She's dyslexic,

1698
01:43:37.320 --> 01:43:40.470
but she didn't know growing up that she's dyslexic,

1699
01:43:40.470 --> 01:43:42.090
so as a result,

1700
01:43:42.090 --> 01:43:44.150
she's not that educated.

1701
01:43:44.150 --> 01:43:47.501
She has a physical job as a cleaning lady,

1702
01:43:47.501 --> 01:43:52.501
and she recently fell on a slippery surface at work

1703
01:43:53.120 --> 01:43:55.030
and broke her right hand,

1704
01:43:55.030 --> 01:43:57.380
and it's the hand that she's using,

1705
01:43:57.380 --> 01:44:01.180
so it's what's troubling.

1706
01:44:03.329 --> 01:44:05.550
And, now she wants to sign up

1707
01:44:05.550 --> 01:44:10.550
for an online course to educate herself more.

1708
01:44:14.710 --> 01:44:18.330
So, she wants to take a course to expand her education,

1709
01:44:18.330 --> 01:44:21.540
so that she can get a better job and quality of life.

1710
01:44:21.540 --> 01:44:23.090
And, at the same time,

1711
01:44:23.090 --> 01:44:28.090
she wants to apply online for a public assistance

1712
01:44:29.490 --> 01:44:32.320
until she's capable of working again.

1713
01:44:34.430 --> 01:44:37.650
And, she also has to apply online

1714
01:44:37.650 --> 01:44:39.780
to get this certificate by doctor,

1715
01:44:39.780 --> 01:44:42.230
and she needs to go online and do some paperwork.

1716
01:44:43.290 --> 01:44:45.170
We tried to relate it to form online.

1717
01:44:45.170 --> 01:44:46.640
<v ->Right.</v>

1718
01:44:46.640 --> 01:44:47.473
Okay.

1719
01:44:48.420 --> 01:44:49.880
Adrianna was her name?
<v ->Yes.</v>

1720
01:44:49.880 --> 01:44:50.880
<v ->It's a lovely name.</v>

1721
01:44:50.880 --> 01:44:51.713
<v ->I know.</v>

1722
01:44:52.670 --> 01:44:54.510
<v ->Thank you.
(audience laughs)</v>

1723
01:44:54.510 --> 01:44:58.924
Thank you very much.

1724
01:44:58.924 --> 01:45:01.450
I'm pleased that nobody came up with a pirate,

1725
01:45:03.650 --> 01:45:06.680
'cause I've seen that in some of these exercises before.

1726
01:45:06.680 --> 01:45:07.940
(audience member talking)

1727
01:45:07.940 --> 01:45:09.390
Pirate, P.

1728
01:45:09.390 --> 01:45:12.187
He's got one leg and is blind in one eye.

1729
01:45:12.187 --> 01:45:15.020
(audience laughs)

1730
01:45:15.910 --> 01:45:18.680
Well, he wasn't blind in his eye until a bird pooped in it,

1731
01:45:18.680 --> 01:45:20.367
and he only had the hook, so yeah.

1732
01:45:20.367 --> 01:45:23.350
(audience laughs)

1733
01:45:23.350 --> 01:45:24.183
Anyway.

1734
01:45:26.130 --> 01:45:28.930
So, so far you have come up with

1735
01:45:28.930 --> 01:45:32.250
a rough idea of an interface element.

1736
01:45:32.250 --> 01:45:34.450
You've talked about some of the overlapping needs

1737
01:45:34.450 --> 01:45:36.810
and challenges for different disability types,

1738
01:45:36.810 --> 01:45:38.570
and you've put together a persona,

1739
01:45:38.570 --> 01:45:43.570
a very lightweight persona of a user of that thing.

1740
01:45:44.130 --> 01:45:46.720
So, all of that's in your head,

1741
01:45:46.720 --> 01:45:47.860
and I'm sure you can guess

1742
01:45:47.860 --> 01:45:50.420
that when we come around to the final exercise,

1743
01:45:50.420 --> 01:45:51.920
we're gonna pull that all together,

1744
01:45:51.920 --> 01:45:53.370
but in order to pull that all together,

1745
01:45:53.370 --> 01:45:56.090
I have to go through 60 slides in 12 minutes.

1746
01:45:57.900 --> 01:45:58.860
I misread that.

1747
01:45:58.860 --> 01:46:00.380
I misread that,

1748
01:46:00.380 --> 01:46:04.010
but I have a pile of slides to go through,

1749
01:46:04.010 --> 01:46:07.820
and this is what I generally call the technical bits.

1750
01:46:09.560 --> 01:46:11.960
This is not going to be highly technical.

1751
01:46:11.960 --> 01:46:14.531
There's going to be some code references in here.

1752
01:46:14.531 --> 01:46:18.360
For those of you who have specific code questions,

1753
01:46:18.360 --> 01:46:20.190
you wanna get into the weeds on stuff,

1754
01:46:20.190 --> 01:46:22.920
I'll answer what I can that doesn't blow up

1755
01:46:22.920 --> 01:46:24.540
the timeline I'm trying to keep,

1756
01:46:24.540 --> 01:46:26.510
and then for any more technical questions,

1757
01:46:26.510 --> 01:46:28.570
which are sometimes my favorite questions,

1758
01:46:28.570 --> 01:46:30.010
we can table those until afterward,

1759
01:46:30.010 --> 01:46:31.640
and I can chat with you

1760
01:46:31.640 --> 01:46:34.000
now or after you've gotten me sufficiently drunk,

1761
01:46:34.000 --> 01:46:34.833
which will be a problem,

1762
01:46:34.833 --> 01:46:36.100
because I don't drink.

1763
01:46:37.660 --> 01:46:38.590
But, you can try.

1764
01:46:38.590 --> 01:46:39.680
It'd be hilarious.

1765
01:46:39.680 --> 01:46:40.513
I actually,

1766
01:46:40.513 --> 01:46:41.620
with enough Coca-Colas,

1767
01:46:41.620 --> 01:46:43.140
I'm a mess.

1768
01:46:43.140 --> 01:46:44.360
So, we're gonna dive right into

1769
01:46:44.360 --> 01:46:47.060
what I will call the technical bits.

1770
01:46:48.040 --> 01:46:49.530
Right off the bat,

1771
01:46:49.530 --> 01:46:50.910
images.

1772
01:46:50.910 --> 01:46:54.590
If you're relying on images in your pages,

1773
01:46:54.590 --> 01:46:56.050
you need to account for what happens

1774
01:46:56.050 --> 01:46:58.060
when the image does not display,

1775
01:46:58.060 --> 01:46:59.400
and that image could not display,

1776
01:46:59.400 --> 01:47:01.380
because the user can't see it,

1777
01:47:01.380 --> 01:47:02.860
because the network is broken,

1778
01:47:02.860 --> 01:47:04.260
because you coded it poorly,

1779
01:47:05.190 --> 01:47:06.290
any number of factors.

1780
01:47:07.820 --> 01:47:10.020
You need to have text alternative.

1781
01:47:10.020 --> 01:47:11.660
Can you still make sense of the page

1782
01:47:11.660 --> 01:47:13.190
if that image is missing?

1783
01:47:13.190 --> 01:47:15.140
If not, you might have a bit of a problem.

1784
01:47:15.140 --> 01:47:16.650
Is content missing?

1785
01:47:16.650 --> 01:47:19.860
As in, did you have a piece of text that was in that image?

1786
01:47:19.860 --> 01:47:20.770
That's also a problem.

1787
01:47:20.770 --> 01:47:23.090
You really shouldn't be doing that.

1788
01:47:23.090 --> 01:47:26.010
Can you still use the site if the images disappear?

1789
01:47:26.010 --> 01:47:27.970
This isn't just inlaying image text,

1790
01:47:27.970 --> 01:47:30.150
but also CSS background images.

1791
01:47:30.150 --> 01:47:31.810
This counts for icons,

1792
01:47:31.810 --> 01:47:33.310
however you generate them.

1793
01:47:33.310 --> 01:47:34.660
I'm using a broader term here.

1794
01:47:34.660 --> 01:47:36.770
You have weird gradients that come together,

1795
01:47:36.770 --> 01:47:38.870
you're doing like one pixel,

1796
01:47:38.870 --> 01:47:39.703
or, I'm sorry,

1797
01:47:39.703 --> 01:47:41.800
single div pacman,

1798
01:47:41.800 --> 01:47:43.390
like super high-detailed stuff,

1799
01:47:43.390 --> 01:47:44.360
still, if it doesn't appear,

1800
01:47:44.360 --> 01:47:46.490
you've got the same problem.

1801
01:47:46.490 --> 01:47:48.260
When you do provide alternative text,

1802
01:47:48.260 --> 01:47:49.520
is it useful?

1803
01:47:49.520 --> 01:47:51.500
Does it make sense to the user

1804
01:47:51.500 --> 01:47:53.760
within the context of the page,

1805
01:47:53.760 --> 01:47:55.180
that piece of the screen,

1806
01:47:55.180 --> 01:47:56.930
and potentially even outside of it?

1807
01:47:57.860 --> 01:48:00.650
Do you account for CSS background images?

1808
01:48:00.650 --> 01:48:03.060
Are you using sprites, pixel sprites?

1809
01:48:03.060 --> 01:48:05.180
And, what happens when that sprite sheet doesn't load?

1810
01:48:05.180 --> 01:48:07.110
Do you have alt text,

1811
01:48:07.110 --> 01:48:08.610
which you can't have on CSS,

1812
01:48:08.610 --> 01:48:10.780
or using some sort of off-screen technique?

1813
01:48:11.960 --> 01:48:13.210
What about SVGs?

1814
01:48:13.210 --> 01:48:14.060
How are you calling those?

1815
01:48:14.060 --> 01:48:16.570
You're calling the image elements,

1816
01:48:16.570 --> 01:48:18.340
in which case, it's an alt attribute.

1817
01:48:18.340 --> 01:48:20.050
Are you calling them in line,

1818
01:48:20.050 --> 01:48:22.720
in which case you might need title attributes

1819
01:48:22.720 --> 01:48:25.000
and description or title elements,

1820
01:48:25.000 --> 01:48:26.010
description elements,

1821
01:48:26.010 --> 01:48:28.580
and then ARIA in order to all connect it?

1822
01:48:29.440 --> 01:48:33.620
Is it just a weird, inlaying a64,

1823
01:48:33.620 --> 01:48:35.030
calling it by reference, et cetera.

1824
01:48:35.030 --> 01:48:38.220
You need to consider those techniques as well.

1825
01:48:38.220 --> 01:48:41.050
And, again, CSS generated symbols or icons

1826
01:48:41.050 --> 01:48:43.150
can be a problem when they fail to render.

1827
01:48:44.660 --> 01:48:49.030
Did anybody see that classic Dub-style portrait of a woman

1828
01:48:49.030 --> 01:48:50.730
that somebody made out of just CSS

1829
01:48:51.569 --> 01:48:52.850
that was circulating on the web?

1830
01:48:52.850 --> 01:48:53.683
It was awesome,

1831
01:48:53.683 --> 01:48:56.790
because people started to open it in old, crappy browsers,

1832
01:48:56.790 --> 01:48:59.120
and it started to look very cubist and strange.

1833
01:48:59.120 --> 01:49:00.410
And, I thought it was a great example

1834
01:49:00.410 --> 01:49:02.730
of all these techniques that we're coming up with

1835
01:49:02.730 --> 01:49:04.400
to visually represent stuff,

1836
01:49:04.400 --> 01:49:06.500
can render in so many different ways now,

1837
01:49:06.500 --> 01:49:08.240
and we're not always prepared for that.

1838
01:49:09.340 --> 01:49:11.670
This is from Buffalo Soccer Club.

1839
01:49:11.670 --> 01:49:13.390
It's an inner-city youth soccer program

1840
01:49:13.390 --> 01:49:17.390
I helped start back in the old days

1841
01:49:17.390 --> 01:49:18.690
when I had my own company.

1842
01:49:19.970 --> 01:49:21.820
It has a bunch of images on the page.

1843
01:49:22.930 --> 01:49:24.280
We need to make sure that

1844
01:49:24.280 --> 01:49:25.530
when the images don't load, though,

1845
01:49:25.530 --> 01:49:27.030
it still makes sense.

1846
01:49:27.030 --> 01:49:29.420
All the context is still there as appropriate.

1847
01:49:29.420 --> 01:49:30.730
When the logo goes away,

1848
01:49:31.740 --> 01:49:35.250
I at least have alt text that says Buffalo Soccer Club.

1849
01:49:35.250 --> 01:49:36.890
So, a screen reader will still say it.

1850
01:49:36.890 --> 01:49:38.980
You can still see it on the screen.

1851
01:49:38.980 --> 01:49:42.980
When the icons on the navigation go away,

1852
01:49:42.980 --> 01:49:45.210
there's nothing to replace them,

1853
01:49:45.210 --> 01:49:46.460
and that's actually okay.

1854
01:49:47.760 --> 01:49:49.910
All they are is mostly decorative.

1855
01:49:49.910 --> 01:49:51.820
They're providing a little bit of extra context,

1856
01:49:51.820 --> 01:49:54.610
so I don't have to worry about doing anything special.

1857
01:49:54.610 --> 01:49:56.920
When the picture of the kid goes away,

1858
01:49:57.760 --> 01:49:59.850
the big, happy kid about to kick a ball,

1859
01:49:59.850 --> 01:50:02.050
who I think 30 seconds after I took this photo

1860
01:50:02.050 --> 01:50:04.060
face planted in the grass,

1861
01:50:04.060 --> 01:50:05.240
'cause he stepped on the ball,

1862
01:50:05.240 --> 01:50:06.580
and it was thump.

1863
01:50:06.580 --> 01:50:09.130
Oh, yeah, we call it soccer for some reason, sorry.

1864
01:50:10.910 --> 01:50:12.890
This is strictly decorative.

1865
01:50:12.890 --> 01:50:14.640
It's just a decorative image.

1866
01:50:14.640 --> 01:50:17.500
It's absence doesn't change the meaning of the page,

1867
01:50:17.500 --> 01:50:20.250
and I don't want a verbose alt text that says,

1868
01:50:20.250 --> 01:50:22.680
"Here's the kid who did a face plant five seconds later."

1869
01:50:22.680 --> 01:50:24.690
That's not useful for most readers,

1870
01:50:24.690 --> 01:50:26.440
so we just completely exclude that.

1871
01:50:28.030 --> 01:50:30.810
I'm just gonna be flying through things here.

1872
01:50:30.810 --> 01:50:31.643
Typography.

1873
01:50:32.630 --> 01:50:34.210
Typography is huge.

1874
01:50:34.210 --> 01:50:35.890
It is incredibly important.

1875
01:50:35.890 --> 01:50:37.350
Most of the information that

1876
01:50:37.350 --> 01:50:41.010
people aren't direct with online is via text,

1877
01:50:41.010 --> 01:50:41.970
whether they read it,

1878
01:50:41.970 --> 01:50:43.130
whether it's spoken to them,

1879
01:50:43.130 --> 01:50:44.200
whether they zoom on it,

1880
01:50:44.200 --> 01:50:45.740
whether they print it out,

1881
01:50:45.740 --> 01:50:46.850
highlight it, select it,

1882
01:50:46.850 --> 01:50:48.350
paste it, e-mail it, whatever.

1883
01:50:49.800 --> 01:50:53.270
WCAG 2.1 came out just over a week ago.

1884
01:50:54.130 --> 01:50:55.960
WCAG 2.1 is WCAG 2.0

1885
01:50:55.960 --> 01:50:57.840
with some additional stuff on top of it.

1886
01:50:57.840 --> 01:51:00.880
I'm gonna spare you all the details of what that means,

1887
01:51:00.880 --> 01:51:04.730
but they've actually codified in there some of the rules,

1888
01:51:04.730 --> 01:51:07.710
so that if a user makes these changes,

1889
01:51:07.710 --> 01:51:10.610
your page should not fall apart.

1890
01:51:10.610 --> 01:51:14.330
If a user chooses to change the line height

1891
01:51:14.330 --> 01:51:17.520
to 1.5 of the font size,

1892
01:51:17.520 --> 01:51:18.630
your page shouldn't explode.

1893
01:51:18.630 --> 01:51:20.470
There shouldn't be scroll bars everywhere.

1894
01:51:20.470 --> 01:51:23.010
They should not be told to install some special software.

1895
01:51:23.010 --> 01:51:25.150
Nobody should come knocking at their door.

1896
01:51:25.150 --> 01:51:28.160
The same thing applies for after paragraphs,

1897
01:51:28.160 --> 01:51:29.810
letter spacing, and word spacing.

1898
01:51:31.060 --> 01:51:33.020
Independent of that stuff,

1899
01:51:33.020 --> 01:51:36.630
good practices involve avoiding things like justified text.

1900
01:51:36.630 --> 01:51:37.919
Don't have a block of text that goes

1901
01:51:37.919 --> 01:51:40.330
all the way to the hard edge like newspapers do.

1902
01:51:40.330 --> 01:51:42.340
It creates awkward gutters.

1903
01:51:42.340 --> 01:51:45.400
Rivers of white space can be difficult to read.

1904
01:51:45.400 --> 01:51:47.000
Avoid italics.

1905
01:51:47.000 --> 01:51:48.360
Italics have a purpose.

1906
01:51:48.360 --> 01:51:51.000
They should be limited to those very specific purposes

1907
01:51:51.000 --> 01:51:54.570
for titles or limited cases of emphasis,

1908
01:51:54.570 --> 01:51:56.770
but italics should not be your go-to style.

1909
01:51:57.890 --> 01:51:59.310
Use larger text.

1910
01:51:59.310 --> 01:52:03.220
My favorite approach is to never set the base font size.

1911
01:52:03.220 --> 01:52:04.404
I never set it.

1912
01:52:04.404 --> 01:52:06.530
The only time I ever set a font size

1913
01:52:06.530 --> 01:52:11.140
is usually something like 150% if I want an &lt;h2&gt;.

1914
01:52:11.140 --> 01:52:13.280
If I wanna adjust the lettering,

1915
01:52:13.280 --> 01:52:14.950
it might be 1.5.

1916
01:52:14.950 --> 01:52:16.860
Everything works off that base font size

1917
01:52:16.860 --> 01:52:19.280
that the user has already chosen,

1918
01:52:19.280 --> 01:52:21.820
whether the user chose to change it

1919
01:52:21.820 --> 01:52:24.820
or decided that the browser default was completely adequate.

1920
01:52:25.950 --> 01:52:27.330
Use good contrast.

1921
01:52:27.330 --> 01:52:29.540
WCAG has a bunch of rules about that.

1922
01:52:29.540 --> 01:52:30.890
Use clear, concise writing.

1923
01:52:31.730 --> 01:52:32.700
Plain language,

1924
01:52:32.700 --> 01:52:34.570
simple, direct, and to the point.

1925
01:52:36.110 --> 01:52:38.297
Give me just a moment.

1926
01:52:38.297 --> 01:52:43.297
There is type face designed for people who have dyslexia.

1927
01:52:43.580 --> 01:52:47.090
You might have seen this on the level/level postcards

1928
01:52:47.090 --> 01:52:49.470
that have best practices.

1929
01:52:49.470 --> 01:52:51.320
I think we have some sitting in the front

1930
01:52:51.320 --> 01:52:53.040
that Rian's gonna give out later.

1931
01:52:54.320 --> 01:52:55.890
This might be useful for some users,

1932
01:52:55.890 --> 01:52:58.000
and some users note that it is useful,

1933
01:52:58.000 --> 01:53:01.772
but you are not going to fix readability issues

1934
01:53:01.772 --> 01:53:05.920
by choosing a dyslexia-specific typeface.

1935
01:53:05.920 --> 01:53:07.380
Don't think that you can just give

1936
01:53:07.380 --> 01:53:09.090
people the option to toggle,

1937
01:53:09.090 --> 01:53:10.840
and all your problems have gone away.

1938
01:53:10.840 --> 01:53:12.880
That is inadequate on its own.

1939
01:53:12.880 --> 01:53:15.810
You need to follow the general,

1940
01:53:15.810 --> 01:53:17.510
good practices of typography.

1941
01:53:17.510 --> 01:53:18.343
Question?

1942
01:53:18.343 --> 01:53:20.810
(audience member talking)

1943
01:53:20.810 --> 01:53:24.420
I'm sorry?
(audience member talking)

1944
01:53:28.160 --> 01:53:29.410
Oh, zoom.
(audience member talking)

1945
01:53:29.410 --> 01:53:30.850
Yeah, so zoom is a little bit different,

1946
01:53:30.850 --> 01:53:34.600
because zooming I don't qualify as a text thing,

1947
01:53:34.600 --> 01:53:37.030
but users are gonna wanna zoom to zoom in on icons,

1948
01:53:37.030 --> 01:53:39.080
on buttons, on pieces of text.

1949
01:53:39.080 --> 01:53:39.913
Allow it.

1950
01:53:39.913 --> 01:53:40.746
Don't ever disable it.

1951
01:53:40.746 --> 01:53:42.750
It's a WCAG failure to disable it,

1952
01:53:42.750 --> 01:53:44.560
but you want to allow people to zoom

1953
01:53:44.560 --> 01:53:46.410
to whatever text size they want,

1954
01:53:46.410 --> 01:53:49.860
and I think WCAG 2.1 has kicked it up to,

1955
01:53:49.860 --> 01:53:50.870
it was 200%,

1956
01:53:50.870 --> 01:53:53.340
I think they kicked it up a little bit higher now

1957
01:53:53.340 --> 01:53:54.540
before the page breaks.

1958
01:53:56.070 --> 01:53:57.407
Does that answer your question?

1959
01:53:57.407 --> 01:53:58.950
(audience member talking)

1960
01:53:58.950 --> 01:54:00.050
Sort of?

1961
01:54:00.050 --> 01:54:00.883
Okay.

1962
01:54:01.830 --> 01:54:03.780
We may need to chat a little bit later.

1963
01:54:05.220 --> 01:54:07.280
That's lovely of you to let me off the hook.

1964
01:54:07.280 --> 01:54:08.610
I'm gonna take a drink now.

1965
01:54:11.360 --> 01:54:12.310
That's still water.

1966
01:54:13.960 --> 01:54:14.793
Hyperlinks.

1967
01:54:16.360 --> 01:54:17.420
Maja touched on a few of these.

1968
01:54:17.420 --> 01:54:18.850
This is good things.

1969
01:54:18.850 --> 01:54:20.850
Maja touched on a lot of this stuff.

1970
01:54:20.850 --> 01:54:22.750
Rian touched on a lot of this stuff yesterday.

1971
01:54:22.750 --> 01:54:24.120
I'm touching on it.

1972
01:54:24.120 --> 01:54:27.660
It's well-known stuff that's heavily documented,

1973
01:54:27.660 --> 01:54:28.750
so you don't even need to listen to me.

1974
01:54:28.750 --> 01:54:29.810
You can all put your heads down.

1975
01:54:29.810 --> 01:54:31.500
I declare it nap time.

1976
01:54:31.500 --> 01:54:32.333
Hyperlinks.

1977
01:54:32.333 --> 01:54:35.310
If you see any cases where the link text itself is,

1978
01:54:35.310 --> 01:54:39.890
"Click here, more, link to, download, go away,"

1979
01:54:39.890 --> 01:54:41.340
that's a problem.

1980
01:54:41.340 --> 01:54:43.070
If you're using all caps,

1981
01:54:43.070 --> 01:54:43.903
that's a problem.

1982
01:54:43.903 --> 01:54:45.760
If the entire link is a URL,

1983
01:54:46.710 --> 01:54:47.570
that's a problem.

1984
01:54:47.570 --> 01:54:49.710
Emoticons, emoji,

1985
01:54:49.710 --> 01:54:51.940
does anybody remember emoticons?

1986
01:54:51.940 --> 01:54:52.890
Are they still hip?

1987
01:54:54.140 --> 01:54:55.510
No.
(audience member talking)

1988
01:54:55.510 --> 01:54:56.343
They just became,

1989
01:54:56.343 --> 01:54:57.900
for me they are.

1990
01:54:57.900 --> 01:54:59.000
Yeah.

1991
01:54:59.000 --> 01:55:00.320
Colon, right parenthesis.

1992
01:55:02.250 --> 01:55:03.640
Emoji, emoticons,

1993
01:55:03.640 --> 01:55:06.860
those are not very useful bits of link text.

1994
01:55:06.860 --> 01:55:10.060
Are you warning users before you open new windows?

1995
01:55:10.060 --> 01:55:11.700
If you have target equals blank,

1996
01:55:11.700 --> 01:55:13.370
what are you doing to tell the user?

1997
01:55:13.370 --> 01:55:14.600
Is it more than icon?

1998
01:55:14.600 --> 01:55:17.610
Is it text that's available to the screen reader?

1999
01:55:17.610 --> 01:55:20.130
Do links to downloads provide helpful info?

2000
01:55:20.130 --> 01:55:21.370
"Hey, you're about to download

2001
01:55:21.370 --> 01:55:23.540
"a 25 megabyte PDF of our menu.

2002
01:55:24.880 --> 01:55:27.190
"We only sell two kinds of hamburger,

2003
01:55:27.190 --> 01:55:28.750
"but here's a 25 megabyte PDF."

2004
01:55:30.662 --> 01:55:32.348
(exhales loudly)

2005
01:55:32.348 --> 01:55:34.160
Are you using pagination links?

2006
01:55:34.160 --> 01:55:35.640
Not infinite scroll,

2007
01:55:35.640 --> 01:55:37.660
but when you get to the bottom of the page,

2008
01:55:37.660 --> 01:55:38.560
next page.

2009
01:55:38.560 --> 01:55:40.260
Can I jump to page seven?

2010
01:55:40.260 --> 01:55:41.130
If it's an alphabet,

2011
01:55:41.130 --> 01:55:42.130
can I jump to J,

2012
01:55:42.130 --> 01:55:45.060
or do I have to keep scrolling until insanity sets in?

2013
01:55:46.070 --> 01:55:48.180
Are your links underlined?

2014
01:55:48.180 --> 01:55:49.540
The simplest thing to do.

2015
01:55:49.540 --> 01:55:50.950
Are your links underlined?

2016
01:55:50.950 --> 01:55:52.000
And, if they're not underlined,

2017
01:55:52.000 --> 01:55:53.550
are they otherwise obvious?

2018
01:55:53.550 --> 01:55:54.700
Bold alone? No.

2019
01:55:54.700 --> 01:55:55.730
Color alone? No.

2020
01:55:56.790 --> 01:55:58.500
Underline's the safest and simplest,

2021
01:55:58.500 --> 01:56:01.250
and I have a whole rambling article about this as well.

2022
01:56:02.800 --> 01:56:05.030
If you're using images as links,

2023
01:56:05.030 --> 01:56:06.820
is there alt text on those images,

2024
01:56:06.820 --> 01:56:09.730
and is the alt text appropriate for the link,

2025
01:56:09.730 --> 01:56:11.250
not just the image?

2026
01:56:11.250 --> 01:56:13.620
So, the alt text for an image might be different

2027
01:56:13.620 --> 01:56:15.040
when you use it as a link.

2028
01:56:15.040 --> 01:56:17.440
You should always consider that kind of context.

2029
01:56:18.310 --> 01:56:20.510
And, is the link text consistent?

2030
01:56:20.510 --> 01:56:23.230
If I have a page that's about my company,

2031
01:56:23.230 --> 01:56:25.830
my company is Adrian Roselli, LLC,

2032
01:56:25.830 --> 01:56:28.450
whenever I'm linking to that about page,

2033
01:56:28.450 --> 01:56:30.810
that link text should be, or similar to,

2034
01:56:30.810 --> 01:56:32.280
"About Adrian Roselli."

2035
01:56:32.280 --> 01:56:33.800
"About Adrian Roselli."

2036
01:56:33.800 --> 01:56:35.180
If I ever have that guy,

2037
01:56:36.782 --> 01:56:38.870
it's not an appropriate length for a number of reasons,

2038
01:56:38.870 --> 01:56:40.010
but it should be consistent.

2039
01:56:40.010 --> 01:56:43.530
I should be using the same text each time I use that URL.

2040
01:56:43.530 --> 01:56:45.480
It breeds familiarity with your users.

2041
01:56:48.270 --> 01:56:51.890
I want you to remember that you are not Google.

2042
01:56:51.890 --> 01:56:53.430
Nobody in this room is Google.

2043
01:56:54.870 --> 01:56:56.050
Okay, nobody corrected me on that,

2044
01:56:56.050 --> 01:56:57.430
so I gambled and won.

2045
01:56:58.620 --> 01:57:00.010
We all know Google's layout.

2046
01:57:00.010 --> 01:57:02.030
We're all comfortable looking at the Google homepage

2047
01:57:02.030 --> 01:57:04.410
and understanding what's a hyperlink and what isn't.

2048
01:57:05.350 --> 01:57:08.140
Most users probably aren't visiting your site daily,

2049
01:57:08.140 --> 01:57:09.410
or your piece of content,

2050
01:57:09.410 --> 01:57:11.070
or doing that thing in your software,

2051
01:57:11.070 --> 01:57:11.903
and if they are,

2052
01:57:11.903 --> 01:57:13.090
maybe they don't care anyway.

2053
01:57:13.990 --> 01:57:17.460
Relying on color alone for links won't be enough.

2054
01:57:17.460 --> 01:57:19.010
Please underline them.

2055
01:57:19.010 --> 01:57:20.550
If you are gonna use color,

2056
01:57:20.550 --> 01:57:22.680
you need to follow contrast values

2057
01:57:22.680 --> 01:57:25.110
that are already outlined in WCAG.

2058
01:57:25.110 --> 01:57:26.870
This stuff's documented.

2059
01:57:26.870 --> 01:57:27.890
This is from 2.0,

2060
01:57:27.890 --> 01:57:29.970
which is still the same in 2.1.

2061
01:57:29.970 --> 01:57:31.820
2.1 goes further to point out,

2062
01:57:31.820 --> 01:57:35.290
"Hey, if you're using icons and emoji, and other stuff."

2063
01:57:36.650 --> 01:57:38.710
When I look at a page like this,

2064
01:57:38.710 --> 01:57:41.750
I don't know what the hyperlink is,

2065
01:57:42.610 --> 01:57:45.350
and when I've tested users with these pages,

2066
01:57:45.350 --> 01:57:48.390
I've found that users go to different places.

2067
01:57:48.390 --> 01:57:50.670
Some go right to the image.

2068
01:57:50.670 --> 01:57:53.310
Others try to get their cursor

2069
01:57:53.310 --> 01:57:55.260
just right to click the title.

2070
01:57:55.260 --> 01:57:57.960
Others just wing it around until it turns into a hand.

2071
01:57:58.840 --> 01:58:00.220
Screen reader users,

2072
01:58:00.220 --> 01:58:01.280
if they're unlucky,

2073
01:58:01.280 --> 01:58:03.410
everything is announced as one link,

2074
01:58:03.410 --> 01:58:04.790
and then they get very cross,

2075
01:58:04.790 --> 01:58:05.670
or worse,

2076
01:58:05.670 --> 01:58:07.640
these are five different links,

2077
01:58:07.640 --> 01:58:08.980
and they hear the same link

2078
01:58:08.980 --> 01:58:10.890
with five different pieces of text,

2079
01:58:10.890 --> 01:58:12.583
and they have parse it every time.

2080
01:58:12.583 --> 01:58:13.416
Yeah?

2081
01:58:13.416 --> 01:58:14.320
<v Audience Member>Are buttons okay?</v>

2082
01:58:14.320 --> 01:58:15.760
<v ->Are buttons okay?</v>

2083
01:58:15.760 --> 01:58:18.760
Buttons should only be used to affect something on the page.

2084
01:58:19.770 --> 01:58:22.860
&lt;a href&gt; is how you take people to a new page.

2085
01:58:22.860 --> 01:58:24.590
If you're submitting a form,

2086
01:58:24.590 --> 01:58:26.410
input types admin is totally fine,

2087
01:58:26.410 --> 01:58:28.690
but if it's a call to action,

2088
01:58:28.690 --> 01:58:30.240
and visually, it looks like a button,

2089
01:58:30.240 --> 01:58:32.008
it should still be a link.

2090
01:58:32.008 --> 01:58:34.156
<v Audience Member>What about text in a block?</v>

2091
01:58:34.156 --> 01:58:35.682
<v ->What about text in a block like this?</v>

2092
01:58:35.682 --> 01:58:37.762
(audience member talking)

2093
01:58:37.762 --> 01:58:38.688
Tags.

2094
01:58:38.688 --> 01:58:42.920
(audience member talking)

2095
01:58:42.920 --> 01:58:43.990
Yeah.

2096
01:58:43.990 --> 01:58:45.060
Those are probably links.

2097
01:58:45.060 --> 01:58:46.350
On my site,

2098
01:58:46.350 --> 01:58:47.310
they are links,

2099
01:58:47.310 --> 01:58:49.040
because they load a brand new page

2100
01:58:49.040 --> 01:58:51.124
with a different URL in the address bar.

2101
01:58:51.124 --> 01:58:54.624
(audience member talking)

2102
01:58:55.930 --> 01:58:58.540
Well, yeah, I try to limit to only a handful of text,

2103
01:58:58.540 --> 01:58:59.830
but tag clouds,

2104
01:58:59.830 --> 01:59:01.100
things like that, links.

2105
01:59:01.100 --> 01:59:02.810
<v Audience Member>And, then underlined?</v>

2106
01:59:02.810 --> 01:59:04.050
<v ->And, underlined, yes.</v>

2107
01:59:04.050 --> 01:59:09.050
Now, I wanna qualify the underline applies to content links,

2108
01:59:09.290 --> 01:59:11.850
so you don't have to underline your sidebar links,

2109
01:59:11.850 --> 01:59:14.470
your tag clouds, your navigation.

2110
01:59:14.470 --> 01:59:16.670
Things that are apart of the general layout,

2111
01:59:16.670 --> 01:59:18.210
you don't need to underline.

2112
01:59:18.210 --> 01:59:19.730
It's that in-content stuff

2113
01:59:19.730 --> 01:59:21.997
that you need to make sure it stands out.

2114
01:59:21.997 --> 01:59:23.580
<v Audience Member>Okay.</v>

2115
01:59:23.580 --> 01:59:24.413
<v ->Monique?</v>

2116
01:59:24.413 --> 01:59:25.461
<v Monique>Is it the same if it's like</v>

2117
01:59:25.461 --> 01:59:27.526
see if the headers would be links

2118
01:59:27.526 --> 01:59:31.596
to, you know, the full article?

2119
01:59:31.596 --> 01:59:33.615
Would you underline that in this case?

2120
01:59:33.615 --> 01:59:35.309
<v ->In this case, I would underline the thing</v>

2121
01:59:35.309 --> 01:59:37.728
that I wanna direct people to.

2122
01:59:37.728 --> 01:59:39.900
But, there are different approaches,

2123
01:59:39.900 --> 01:59:43.620
and I'm not telling you that any other way is wrong.

2124
01:59:43.620 --> 01:59:45.150
I'm telling you if I was doing this,

2125
01:59:45.150 --> 01:59:48.620
I would probably make the image and the heading the link,

2126
01:59:49.500 --> 01:59:51.350
and the image would be decorative.

2127
01:59:51.350 --> 01:59:52.650
<v Monique>And, that would be underlined.</v>

2128
01:59:52.650 --> 01:59:53.850
<v ->And, this would be underlined.</v>

2129
01:59:53.850 --> 01:59:55.559
<v Monique>Because, I can imagine that this is maybe</v>

2130
01:59:55.559 --> 01:59:57.392
where the conflict comes in,

2131
01:59:57.392 --> 02:00:00.213
like if you have reading problems,

2132
02:00:00.213 --> 02:00:03.738
and seeing,

2133
02:00:03.738 --> 02:00:05.664
if there are problems with contrast,

2134
02:00:05.664 --> 02:00:08.360
or if you're dyslexic,

2135
02:00:08.360 --> 02:00:10.702
that can become really noisy.

2136
02:00:10.702 --> 02:00:13.010
<v ->Yeah, it can absolutely become noisy</v>

2137
02:00:13.010 --> 02:00:14.540
if you have too many underlines,

2138
02:00:14.540 --> 02:00:16.490
and there's too much going on on the page,

2139
02:00:16.490 --> 02:00:20.360
and this is part of the thing about web accessibility

2140
02:00:20.360 --> 02:00:22.080
is it's all about context,

2141
02:00:22.080 --> 02:00:23.720
and understanding the users,

2142
02:00:23.720 --> 02:00:25.220
and what you're doing here.

2143
02:00:25.220 --> 02:00:27.168
<v Monique>I just thought it should be underlined.</v>

2144
02:00:27.168 --> 02:00:28.001
<v ->Right.</v>

2145
02:00:28.001 --> 02:00:29.880
So, I'm making this general statement.

2146
02:00:29.880 --> 02:00:31.530
Your content links need underlines.

2147
02:00:31.530 --> 02:00:32.770
They need underlines.

2148
02:00:32.770 --> 02:00:35.700
Now, if you have special exceptions like your headers,

2149
02:00:35.700 --> 02:00:37.720
and you have a layout that very strongly conveys

2150
02:00:37.720 --> 02:00:39.360
that that's a link, okay,

2151
02:00:39.360 --> 02:00:40.460
but still that's the kind of thing

2152
02:00:40.460 --> 02:00:42.360
we would test it with users to be sure.

2153
02:00:46.130 --> 02:00:48.170
Sort of related to the link thing,

2154
02:00:48.170 --> 02:00:49.003
hit areas.

2155
02:00:50.500 --> 02:00:53.500
WCAG 2.1 has just introduced target size,

2156
02:00:53.500 --> 02:00:55.330
but they've introduced it at triple A,

2157
02:00:55.330 --> 02:00:56.530
which means you're probably never

2158
02:00:56.530 --> 02:00:58.180
going to be required to honor it.

2159
02:00:59.190 --> 02:01:00.920
I think that was a mistake,

2160
02:01:00.920 --> 02:01:02.520
but that's my opinion.

2161
02:01:02.520 --> 02:01:03.960
That being said,

2162
02:01:03.960 --> 02:01:07.400
we already know that some companies out there

2163
02:01:07.400 --> 02:01:09.250
have made some standard relating to this,

2164
02:01:09.250 --> 02:01:10.260
and these are not the first.

2165
02:01:10.260 --> 02:01:12.180
We can go back as long as

2166
02:01:12.180 --> 02:01:14.151
graphical user interfaces have existed,

2167
02:01:14.151 --> 02:01:17.830
since Tog was writing about this Apple in the 80s,

2168
02:01:17.830 --> 02:01:19.800
since IBM was playing around,

2169
02:01:19.800 --> 02:01:23.420
since Xerox first created mouse interfaces.

2170
02:01:23.420 --> 02:01:26.090
Hit areas need to be large enough to hit,

2171
02:01:26.090 --> 02:01:27.890
whether you're using a fine pointer,

2172
02:01:27.890 --> 02:01:31.450
a pen, or your meat stick on a train.

2173
02:01:33.000 --> 02:01:34.730
You need to be able to tap it,

2174
02:01:34.730 --> 02:01:38.068
and you need to leave space in between those tap areas.

2175
02:01:38.068 --> 02:01:40.950
I'm so glad that--
I don't use Tinder,

2176
02:01:40.950 --> 02:01:43.330
but if it was a tap instead of a swipe,

2177
02:01:43.330 --> 02:01:45.540
I might tap the wrong person.

2178
02:01:45.540 --> 02:01:46.760
That would be very awkward.

2179
02:01:46.760 --> 02:01:48.863
"I'm sorry, I didn't mean you."

2180
02:01:48.863 --> 02:01:50.080
(audience laughs)

2181
02:01:50.080 --> 02:01:50.913
Go away.

2182
02:01:52.570 --> 02:01:55.520
Fitts' Law is sort of relevant here,

2183
02:01:55.520 --> 02:01:57.860
because it talks about the time

2184
02:01:57.860 --> 02:01:59.170
you spend to get to that target

2185
02:01:59.170 --> 02:02:01.240
as a function of the size of that target.

2186
02:02:01.240 --> 02:02:03.160
So, how quickly can you use an interface

2187
02:02:03.160 --> 02:02:05.240
based on how large an area is

2188
02:02:05.240 --> 02:02:07.600
and how much space you have between them?

2189
02:02:07.600 --> 02:02:08.890
Apple, in its guidelines,

2190
02:02:08.890 --> 02:02:12.530
says you need a 44 point minimum size.

2191
02:02:12.530 --> 02:02:15.880
Microsoft says 48 with a two millimeter spacing.

2192
02:02:15.880 --> 02:02:20.450
Android says 48 with eight device pixels.

2193
02:02:20.450 --> 02:02:25.450
BBC is not a platform.

2194
02:02:25.630 --> 02:02:27.410
It makes interfaces,

2195
02:02:27.410 --> 02:02:29.380
and they have chosen seven millimeters

2196
02:02:29.380 --> 02:02:32.750
inside an exclusion zone of seven millimeters.

2197
02:02:32.750 --> 02:02:33.583
What's critical,

2198
02:02:33.583 --> 02:02:34.630
what I wanna point out here is

2199
02:02:34.630 --> 02:02:37.840
we have points, pixels, device pixels, and millimeters.

2200
02:02:39.590 --> 02:02:41.460
I can't seem to get anybody in the industry

2201
02:02:41.460 --> 02:02:45.030
to go to arcminutes as an effective unit of measure,

2202
02:02:45.030 --> 02:02:47.320
because arcminutes are the best unit,

2203
02:02:47.320 --> 02:02:49.080
and I'll do a talk about that some day,

2204
02:02:49.080 --> 02:02:51.280
and you will all fall asleep,

2205
02:02:51.280 --> 02:02:52.600
but until that day,

2206
02:02:52.600 --> 02:02:55.540
just recognize that they have standards.

2207
02:02:55.540 --> 02:02:57.300
Figure out what your standard is.

2208
02:02:57.300 --> 02:02:59.400
Make sure that it makes sense,

2209
02:03:00.290 --> 02:03:01.390
and I have links to all these,

2210
02:03:01.390 --> 02:03:02.670
so you can read more about them.

2211
02:03:02.670 --> 02:03:03.970
Make sure that it applies.

2212
02:03:05.320 --> 02:03:07.780
This is Apple giving a good example.

2213
02:03:09.740 --> 02:03:11.330
Meat stick with the small buttons.

2214
02:03:11.330 --> 02:03:12.880
Meat stick with bigger buttons.

2215
02:03:15.860 --> 02:03:17.840
And, I have the tiny hands of an American.

2216
02:03:19.690 --> 02:03:23.210
This is from Microsoft,

2217
02:03:23.210 --> 02:03:26.790
and they've done a good job of identifying target size

2218
02:03:26.790 --> 02:03:28.410
and the padding before the next target,

2219
02:03:28.410 --> 02:03:29.720
so if I miss,

2220
02:03:29.720 --> 02:03:31.970
I'm not accidentally hitting the wrong thing.

2221
02:03:34.100 --> 02:03:34.933
Android,

2222
02:03:35.890 --> 02:03:37.630
in their guidelines, similar thing.

2223
02:03:37.630 --> 02:03:38.463
They show the spacing.

2224
02:03:38.463 --> 02:03:40.120
They show some examples,

2225
02:03:40.120 --> 02:03:42.920
and BBC showing it in the millimeters,

2226
02:03:42.920 --> 02:03:44.370
in exclusion zones,

2227
02:03:44.370 --> 02:03:45.770
and all the spacing,

2228
02:03:45.770 --> 02:03:47.620
and all the recommendations around it.

2229
02:03:47.620 --> 02:03:48.890
A lot of this stuff is pre-written.

2230
02:03:48.890 --> 02:03:50.430
You don't need to invent this.

2231
02:03:50.430 --> 02:03:52.180
You just go steal it from somebody.

2232
02:03:53.060 --> 02:03:54.840
I'm a big fan of stealing stuff.

2233
02:03:55.960 --> 02:03:56.920
Color contrast.

2234
02:03:57.830 --> 02:03:59.220
Biggest question to ask is

2235
02:03:59.220 --> 02:04:01.070
is there enough contrast?

2236
02:04:01.070 --> 02:04:03.860
Really important to know going into things.

2237
02:04:03.860 --> 02:04:06.110
Can you tell what a hyperlink is in the rest of the page?

2238
02:04:06.110 --> 02:04:09.090
That's part of the reason why underlines are so critical.

2239
02:04:10.400 --> 02:04:11.650
Are the menus obvious?

2240
02:04:11.650 --> 02:04:13.790
Can you see that weird hamburger icon,

2241
02:04:13.790 --> 02:04:15.130
or the kabob icon,

2242
02:04:15.130 --> 02:04:16.840
if you're using Android,

2243
02:04:16.840 --> 02:04:18.110
the three dots,

2244
02:04:18.110 --> 02:04:19.160
it's a kabob.

2245
02:04:19.160 --> 02:04:20.250
It's a kabob.

2246
02:04:20.250 --> 02:04:21.820
I don't know,

2247
02:04:21.820 --> 02:04:24.085
otherwise it's like three poops,

2248
02:04:24.085 --> 02:04:25.010
and that's not cool.

2249
02:04:25.010 --> 02:04:26.230
(audience laughs)

2250
02:04:26.230 --> 02:04:28.400
Apparently, poops is a universal word.

2251
02:04:28.400 --> 02:04:31.420
Who would've thought that?

2252
02:04:31.420 --> 02:04:35.240
WCAG 2.0 identifies contrast 4.5 to one

2253
02:04:35.240 --> 02:04:36.440
for normal sized text,

2254
02:04:36.440 --> 02:04:38.350
which is the default text in the browser,

2255
02:04:38.350 --> 02:04:40.650
and if you're doing large text, 3.1.

2256
02:04:41.870 --> 02:04:44.080
Also, note that they do their sizing in points,

2257
02:04:44.080 --> 02:04:45.130
which makes me angry.

2258
02:04:46.267 --> 02:04:47.230
(exhales loudly)

2259
02:04:47.230 --> 02:04:48.510
Arcminutes, I'm telling you.

2260
02:04:48.510 --> 02:04:50.510
I'm trying to get W3C to do it.

2261
02:04:50.510 --> 02:04:53.280
WCAG 2.1 takes it a step further and says,

2262
02:04:53.280 --> 02:04:55.870
"By the way, your user interface components,"

2263
02:04:55.870 --> 02:04:57.870
like your buttons, and your funky icons,

2264
02:04:57.870 --> 02:05:00.110
and your social media share things, et cetera,

2265
02:05:00.110 --> 02:05:01.280
three to one.

2266
02:05:01.280 --> 02:05:03.140
Three to one is not that hard to hit.

2267
02:05:03.140 --> 02:05:05.450
Basically, it means don't put blue on blue.

2268
02:05:06.490 --> 02:05:11.150
Fill it a little bit more than that.

2269
02:05:12.710 --> 02:05:15.300
As I mentioned, WCAG 2.1 typography,

2270
02:05:15.300 --> 02:05:16.360
icons and glyphs,

2271
02:05:16.360 --> 02:05:18.540
form elements, error messages,

2272
02:05:18.540 --> 02:05:19.690
placeholders,

2273
02:05:19.690 --> 02:05:21.710
:hover, focus, and selected states.

2274
02:05:21.710 --> 02:05:23.520
Placeholders, by default,

2275
02:05:23.520 --> 02:05:26.140
the placeholder color in your browser

2276
02:05:27.090 --> 02:05:28.490
fails the contrast check.

2277
02:05:29.560 --> 02:05:31.160
Against a white background,

2278
02:05:31.160 --> 02:05:34.690
you need 767676 in order to meet

2279
02:05:34.690 --> 02:05:37.010
the minimum contrast for your placeholder types.

2280
02:05:37.010 --> 02:05:37.843
Oh, by the way,

2281
02:05:37.843 --> 02:05:38.730
at that contrast setting,

2282
02:05:38.730 --> 02:05:40.570
it looks like normal text.

2283
02:05:40.570 --> 02:05:41.970
Maybe the field's been filled out,

2284
02:05:41.970 --> 02:05:43.960
so maybe avoid placeholders.

2285
02:05:43.960 --> 02:05:45.121
Hey, Rian, what's up?

2286
02:05:45.121 --> 02:05:47.704
(Rian talking)

2287
02:05:49.930 --> 02:05:51.400
Firefox adds opacity to it,

2288
02:05:51.400 --> 02:05:52.650
which makes it even trickier,

2289
02:05:52.650 --> 02:05:55.880
so that's another thing you have to consider overriding.

2290
02:05:57.130 --> 02:05:58.750
Your :hover focus's selected states

2291
02:05:58.750 --> 02:06:01.360
need to be sufficiently different as well,

2292
02:06:01.360 --> 02:06:03.520
so I can tell, "Hey, this is the page I'm on,"

2293
02:06:03.520 --> 02:06:05.670
versus, "This is the thing I'm linking to."

2294
02:06:06.630 --> 02:06:09.350
I'd also like to note red on black

2295
02:06:10.360 --> 02:06:13.780
and red on white also fails the color contrast check,

2296
02:06:13.780 --> 02:06:16.580
so you just need to work those colors a little bit more.

2297
02:06:18.976 --> 02:06:20.970
This is the color palette from the Paciello Group.

2298
02:06:20.970 --> 02:06:23.210
This is from our style guide,

2299
02:06:23.210 --> 02:06:25.490
and we've identified what our core colors are.

2300
02:06:25.490 --> 02:06:26.500
We've also identified

2301
02:06:26.500 --> 02:06:29.130
what combinations you can never use.

2302
02:06:29.130 --> 02:06:31.330
This means if somebody is hired on our team,

2303
02:06:32.350 --> 02:06:34.780
maybe we get a new marketing intern,

2304
02:06:34.780 --> 02:06:35.613
and here she says,

2305
02:06:35.613 --> 02:06:37.800
"Yeah, let's make these new

2306
02:06:37.800 --> 02:06:40.840
"postcards with accessibility standards."

2307
02:06:40.840 --> 02:06:41.790
And, we see this color,

2308
02:06:41.790 --> 02:06:42.623
we'll just be able to say,

2309
02:06:42.623 --> 02:06:44.570
"You didn't read the guidelines.

2310
02:06:44.570 --> 02:06:46.340
"You didn't even have to eye drop it.

2311
02:06:46.340 --> 02:06:48.750
"All you had to do was not do that."

2312
02:06:48.750 --> 02:06:50.370
And, that's really an important thing to do,

2313
02:06:50.370 --> 02:06:53.340
if you have style guides or internal standards,

2314
02:06:53.340 --> 02:06:54.740
document this kind of stuff.

2315
02:06:58.460 --> 02:07:00.080
Label your fields.

2316
02:07:00.080 --> 02:07:01.940
When you're working on a form,

2317
02:07:01.940 --> 02:07:03.530
make sure that users,

2318
02:07:03.530 --> 02:07:05.050
when they first come to that form,

2319
02:07:05.050 --> 02:07:06.940
get all the instructions they need.

2320
02:07:06.940 --> 02:07:07.840
The entire form,

2321
02:07:07.840 --> 02:07:09.560
tell them up front.

2322
02:07:09.560 --> 02:07:13.180
Also, provide a programmatic indication of required fields,

2323
02:07:13.180 --> 02:07:15.730
and that could be with a required attribute,

2324
02:07:15.730 --> 02:07:18.180
and potentially in addition to ARIA required,

2325
02:07:18.180 --> 02:07:20.430
so you can catch all the screen reader users.

2326
02:07:21.540 --> 02:07:22.970
Provide formatting advice.

2327
02:07:24.190 --> 02:07:26.770
Tell them, "Hey, month, day, year.

2328
02:07:26.770 --> 02:07:27.920
"Day, month, year.

2329
02:07:27.920 --> 02:07:30.050
"Year, century, something."

2330
02:07:30.920 --> 02:07:32.410
Whatever it is, tell them in advance,

2331
02:07:32.410 --> 02:07:36.040
so that they're not being thrown back error messages,

2332
02:07:36.040 --> 02:07:38.870
and a good developer is going to accept

2333
02:07:38.870 --> 02:07:40.390
a multitude of formats anyway,

2334
02:07:40.390 --> 02:07:41.890
as long as they can be parsed.

2335
02:07:43.140 --> 02:07:46.100
Use ARIA to associate any formatting advice.

2336
02:07:46.100 --> 02:07:49.480
ARIA-describedby by is a great way to connect them.

2337
02:07:49.480 --> 02:07:50.900
Avoid placeholder text,

2338
02:07:50.900 --> 02:07:52.440
contrast issues,

2339
02:07:52.440 --> 02:07:53.400
cognitive issues,

2340
02:07:53.400 --> 02:07:56.400
it's not always easy to tell when a field's been filled out,

2341
02:07:57.260 --> 02:08:01.250
especially if you're using it in place of a proper label,

2342
02:08:01.250 --> 02:08:03.080
then, "What was that field I just filled out?

2343
02:08:03.080 --> 02:08:05.620
"I have to delete three fields to see."

2344
02:08:05.620 --> 02:08:07.780
Associate error messages with fields,

2345
02:08:07.780 --> 02:08:08.613
programmatically,

2346
02:08:08.613 --> 02:08:09.790
but also maybe if you have

2347
02:08:09.790 --> 02:08:12.310
a block of error messages at the top of the page,

2348
02:08:12.310 --> 02:08:13.360
first name is missing,

2349
02:08:13.360 --> 02:08:14.193
provide a link.

2350
02:08:15.060 --> 02:08:15.950
If it's a long form,

2351
02:08:15.950 --> 02:08:18.400
I might appreciate you just taking me right to the field,

2352
02:08:18.400 --> 02:08:21.230
especially if your error message style is terrible,

2353
02:08:21.230 --> 02:08:23.610
and I can't tell which field is broken.

2354
02:08:23.610 --> 02:08:25.510
Think of it as a good backup.

2355
02:08:27.660 --> 02:08:28.930
Simplest way to do this, though,

2356
02:08:28.930 --> 02:08:30.540
is use a label element.

2357
02:08:30.540 --> 02:08:33.700
Make sure the for attribute corresponds to the label,

2358
02:08:33.700 --> 02:08:35.710
to the inputs id attribute.

2359
02:08:36.550 --> 02:08:39.010
Label text provides a larger hit area,

2360
02:08:39.010 --> 02:08:40.500
so a little bit of overlap

2361
02:08:40.500 --> 02:08:42.780
before what I said about hit areas.

2362
02:08:42.780 --> 02:08:45.500
Label text means that I can click the word,

2363
02:08:45.500 --> 02:08:46.940
and it'll put the focus in the field.

2364
02:08:46.940 --> 02:08:48.030
I can click the word,

2365
02:08:48.030 --> 02:08:50.630
and it will toggle the checkbox to the radio button.

2366
02:08:51.600 --> 02:08:53.470
Label text should generally appear above

2367
02:08:53.470 --> 02:08:55.224
or to the left of text,

2368
02:08:55.224 --> 02:08:56.640
text inputs,

2369
02:08:56.640 --> 02:08:58.260
for left to right languages.

2370
02:08:58.260 --> 02:09:01.110
If it's a checkbox or a &lt;radio-button&gt;,

2371
02:09:01.110 --> 02:09:01.943
put it after.

2372
02:09:01.943 --> 02:09:03.200
Make it appear to the right.

2373
02:09:04.420 --> 02:09:06.200
And, if you have grouped fields,

2374
02:09:06.200 --> 02:09:07.480
like a group of checkboxes,

2375
02:09:07.480 --> 02:09:09.120
or a group of radio buttons,

2376
02:09:09.120 --> 02:09:11.380
or a group of address information,

2377
02:09:11.380 --> 02:09:13.860
wrap it in a &lt;legend&gt; in &lt;fieldset&gt;.

2378
02:09:13.860 --> 02:09:16.140
If you don't like the styles that they provide,

2379
02:09:16.140 --> 02:09:17.440
and you can't override them,

2380
02:09:17.440 --> 02:09:18.520
that's okay.

2381
02:09:18.520 --> 02:09:21.030
You can rewrite that using ARIA.

2382
02:09:21.030 --> 02:09:22.810
There are ARIA group roles you can use

2383
02:09:22.810 --> 02:09:26.690
just in case anybody is a little bit worried about that.

2384
02:09:31.660 --> 02:09:33.780
Oh, I have audio on this one.

2385
02:09:33.780 --> 02:09:36.090
I don't know if it's playing yet.

2386
02:09:36.090 --> 02:09:36.923
Let's see.

2387
02:09:42.669 --> 02:09:45.450
(computer audio speaking)

2388
02:09:45.450 --> 02:09:46.730
This is Indiegogo,

2389
02:09:46.730 --> 02:09:47.576
using NVDA.

2390
02:09:47.576 --> 02:09:51.300
(computer audio speaking)

2391
02:09:51.300 --> 02:09:52.747
Watch the field.

2392
02:09:52.747 --> 02:09:54.200
(computer audio speaking)

2393
02:09:54.200 --> 02:09:55.826
Watch the field.

2394
02:09:55.826 --> 02:09:56.810
(computer audio speaking)

2395
02:09:56.810 --> 02:09:58.622
I don't know what the field is.

2396
02:09:58.622 --> 02:10:00.670
(computer audio speaking)

2397
02:10:00.670 --> 02:10:01.520
Indiegogo--

2398
02:10:02.510 --> 02:10:03.703
Oh, here's the best part.

2399
02:10:03.703 --> 02:10:04.911
(computer audio speaking)

2400
02:10:04.911 --> 02:10:06.910
And, then when I leave the field, it erased it.

2401
02:10:06.910 --> 02:10:10.500
Indiegogo does not work for screen reader users.

2402
02:10:10.500 --> 02:10:11.790
It's a massive site.

2403
02:10:13.050 --> 02:10:15.430
None of these are labeled properly.

2404
02:10:15.430 --> 02:10:16.900
These aren't even placeholders.

2405
02:10:16.900 --> 02:10:18.280
These are labels that they did not

2406
02:10:18.280 --> 02:10:20.093
associate with the field properly.

2407
02:10:20.093 --> 02:10:21.840
(computer audio speaking)

2408
02:10:21.840 --> 02:10:23.740
The credit card number is about

2409
02:10:23.740 --> 02:10:26.198
the only one that reasonably works.

2410
02:10:26.198 --> 02:10:27.031
(computer audio speaking)

2411
02:10:27.031 --> 02:10:31.620
So, there are lots of sites out there that are successful

2412
02:10:31.620 --> 02:10:32.520
and do it wrong.

2413
02:10:33.780 --> 02:10:35.730
Being successful as a business

2414
02:10:35.730 --> 02:10:37.816
just means you're leaving more money on the table.

2415
02:10:37.816 --> 02:10:39.830
(computer audio talking)

2416
02:10:39.830 --> 02:10:40.990
But, here you can at least hear

2417
02:10:40.990 --> 02:10:42.610
that it's announcing those fields.

2418
02:10:42.610 --> 02:10:43.650
All these other fields,

2419
02:10:43.650 --> 02:10:45.306
it did not provide the appropriate labels.

2420
02:10:45.306 --> 02:10:49.370
(computer audio speaking)

2421
02:10:49.370 --> 02:10:50.203
Stop.

2422
02:10:51.060 --> 02:10:52.670
Okay, did I do that right?

2423
02:10:52.670 --> 02:10:53.740
Yes. Yay.

2424
02:10:54.870 --> 02:10:57.120
There's always a risk NVDA is gonna take over my machine,

2425
02:10:57.120 --> 02:10:59.570
and it'll sound like a Cylon attack.

2426
02:11:00.980 --> 02:11:01.813
Structure.

2427
02:11:03.050 --> 02:11:05.070
Labels, by the way, are an awesome part of structure,

2428
02:11:05.070 --> 02:11:06.138
just in case, you know,

2429
02:11:06.138 --> 02:11:06.971
&lt;fieldset&gt; and &lt;legend&gt;,

2430
02:11:06.971 --> 02:11:08.390
awesome part of structure.

2431
02:11:08.390 --> 02:11:12.240
HTML5 already has this beautiful structure

2432
02:11:12.240 --> 02:11:15.090
built into it through sectioning elements.

2433
02:11:15.090 --> 02:11:16.590
The &lt;header&gt;,

2434
02:11:16.590 --> 02:11:17.423
the &lt;nav&gt;,

2435
02:11:17.423 --> 02:11:18.256
the &lt;main&gt;,

2436
02:11:18.256 --> 02:11:19.790
only use one per page.

2437
02:11:19.790 --> 02:11:21.580
Aside, &lt;footer&gt; and a &lt;form&gt;,

2438
02:11:21.580 --> 02:11:22.920
maybe even your search form,

2439
02:11:22.920 --> 02:11:25.100
if you use those elements,

2440
02:11:25.100 --> 02:11:26.510
I, with a screen reader,

2441
02:11:26.510 --> 02:11:29.010
can jump right to the main content of the page.

2442
02:11:29.010 --> 02:11:30.580
I can jump to the &lt;footer&gt;.

2443
02:11:30.580 --> 02:11:31.980
I can jump up to the &lt;header&gt;,

2444
02:11:31.980 --> 02:11:33.420
or I can jump to the &lt;nav&gt;.

2445
02:11:33.420 --> 02:11:36.400
If you have three &lt;nav&gt;s on the page, that's okay.

2446
02:11:36.400 --> 02:11:39.040
Label them.

2447
02:11:39.040 --> 02:11:39.873
Label them,

2448
02:11:39.873 --> 02:11:41.200
and there are a bunch of tutorials on how to do that.

2449
02:11:41.200 --> 02:11:42.880
It can be as simple as an ARIA label,

2450
02:11:42.880 --> 02:11:43.770
or a visible text,

2451
02:11:43.770 --> 02:11:44.940
or whatever it is,

2452
02:11:44.940 --> 02:11:47.520
but I can just press D

2453
02:11:48.590 --> 02:11:49.990
to cycle through all the landmarks

2454
02:11:49.990 --> 02:11:51.690
on the page in my screen reader,

2455
02:11:51.690 --> 02:11:52.930
and there's a really cool plugin,

2456
02:11:52.930 --> 02:11:56.950
the landmark plugin that Matthew Tylee Atkinson wrote.

2457
02:11:56.950 --> 02:11:58.110
He's with the Paciello Group.

2458
02:11:58.110 --> 02:12:00.052
Funny, all the awesome people are there.

2459
02:12:00.052 --> 02:12:02.653
(audience member talking)
Whatever.

2460
02:12:02.653 --> 02:12:04.140
(audience member laughs)
Ignore her.

2461
02:12:04.140 --> 02:12:07.110
The landmark extension shows you

2462
02:12:07.110 --> 02:12:08.690
all the landmarks in your page

2463
02:12:08.690 --> 02:12:11.670
and will allow you to do landmark navigation

2464
02:12:11.670 --> 02:12:12.530
with a keyboard as well.

2465
02:12:12.530 --> 02:12:14.510
You don't even need a screen reader.

2466
02:12:14.510 --> 02:12:15.560
It's kind of awesome.

2467
02:12:16.530 --> 02:12:19.440
This is a layout that might look familiar to many of you.

2468
02:12:19.440 --> 02:12:20.920
It's probably a webpage.

2469
02:12:21.790 --> 02:12:23.660
This webpage is made accessible

2470
02:12:23.660 --> 02:12:26.510
by ensuring I use the right HTML elements,

2471
02:12:27.410 --> 02:12:29.810
and if I'm supporting a really old browser,

2472
02:12:29.810 --> 02:12:31.083
I can just attach these roles,

2473
02:12:31.083 --> 02:12:32.360
&lt;header role="banner"&gt;,

2474
02:12:32.360 --> 02:12:33.803
&lt;main role="main"&gt;,

2475
02:12:33.803 --> 02:12:35.373
&lt;nav role="navigation"&gt;,

2476
02:12:35.373 --> 02:12:37.570
&lt;footer role="content info"&gt;.

2477
02:12:38.950 --> 02:12:40.950
I feel like somebody made a mistake there,

2478
02:12:40.950 --> 02:12:41.800
and it wasn't me.

2479
02:12:42.890 --> 02:12:44.857
&lt;form role="search"&gt;,

2480
02:12:44.857 --> 02:12:47.300
&lt;aside role="complimentary"&gt;,

2481
02:12:47.300 --> 02:12:49.220
and really, I don't know why they chose content info

2482
02:12:49.220 --> 02:12:51.100
instead of just footer.

2483
02:12:51.100 --> 02:12:51.933
I do,

2484
02:12:51.933 --> 02:12:54.070
but it's a whole byte-shedding conversation.

2485
02:12:54.070 --> 02:12:57.440
Now, this might be the response of layout of that same site.

2486
02:12:58.510 --> 02:12:59.620
And, by responsive,

2487
02:12:59.620 --> 02:13:02.300
I'm specifically talking about the mobile,

2488
02:13:02.300 --> 02:13:04.160
narrow screen view,

2489
02:13:04.160 --> 02:13:07.070
so if I turn my laptop sideways or I collapse my window,

2490
02:13:08.380 --> 02:13:11.190
but all we've done is we've stacked that layout,

2491
02:13:11.190 --> 02:13:12.850
that mobile first approach,

2492
02:13:12.850 --> 02:13:14.918
and it's still the same stuff.

2493
02:13:14.918 --> 02:13:18.260
&lt;header&gt;, &lt;nav&gt;, &lt;form&gt;, &lt;main&gt;, &lt;aside&gt;, &lt;footer&gt;,

2494
02:13:18.260 --> 02:13:19.330
if they get reordered,

2495
02:13:19.330 --> 02:13:21.460
whatever's appropriate for your site,

2496
02:13:21.460 --> 02:13:24.950
but by using HTML5's main landmark regions,

2497
02:13:24.950 --> 02:13:26.400
you're already in good shape.

2498
02:13:27.500 --> 02:13:29.280
In addition to that,

2499
02:13:29.280 --> 02:13:31.960
use only one &lt;h1&gt; per page.

2500
02:13:31.960 --> 02:13:34.530
The &lt;h1&gt; should correspond to what the page is about.

2501
02:13:34.530 --> 02:13:37.660
It should correspond to the title element,

2502
02:13:37.660 --> 02:13:38.600
'cause that's why I'm here,

2503
02:13:38.600 --> 02:13:39.790
that's the page I'm reading.

2504
02:13:39.790 --> 02:13:41.050
It doesn't have the site name

2505
02:13:41.050 --> 02:13:42.950
and the five colons in the bar,

2506
02:13:42.950 --> 02:13:44.430
and the other characters you put in there,

2507
02:13:44.430 --> 02:13:46.503
but if it's about this company,

2508
02:13:46.503 --> 02:13:48.553
&lt;h1&gt; will probably be about this company.

2509
02:13:49.600 --> 02:13:50.820
Don't skip heading levels.

2510
02:13:50.820 --> 02:13:53.470
Don't go from an &lt;h1&gt; to an &lt;h3&gt;.

2511
02:13:53.470 --> 02:13:55.790
A screen reader user or somebody like me,

2512
02:13:55.790 --> 02:13:57.750
who might view an outline view of a page

2513
02:13:57.750 --> 02:13:59.910
will think that content is missing.

2514
02:13:59.910 --> 02:14:01.410
Where'd the &lt;h2&gt; go?

2515
02:14:01.410 --> 02:14:03.090
Do I have to click something to display it?

2516
02:14:03.090 --> 02:14:04.570
Uh oh.

2517
02:14:04.570 --> 02:14:06.320
To that end, use appropriate nesting.

2518
02:14:06.320 --> 02:14:09.110
So, if you're talking about dogs,

2519
02:14:09.110 --> 02:14:10.540
and then you talk about breeds,

2520
02:14:10.540 --> 02:14:12.480
and then you talk about Labradors,

2521
02:14:12.480 --> 02:14:13.860
you would come back up

2522
02:14:13.860 --> 02:14:16.110
if you're gonna talk about places they live,

2523
02:14:16.110 --> 02:14:17.810
all dogs, or whatever it is.

2524
02:14:17.810 --> 02:14:19.410
Make sure that that structure makes sense,

2525
02:14:19.410 --> 02:14:20.580
that you can parse it.

2526
02:14:21.820 --> 02:14:23.820
There is no Document Outline Algorithm.

2527
02:14:25.419 --> 02:14:28.690
I don't know how many of you have heard about that before,

2528
02:14:28.690 --> 02:14:29.880
but for those of you who've heard

2529
02:14:29.880 --> 02:14:31.990
about the Document Outline Algorithm,

2530
02:14:31.990 --> 02:14:33.210
it is a fiction.

2531
02:14:33.210 --> 02:14:35.094
It never existed.

2532
02:14:35.094 --> 02:14:38.100
It was never in a final HTML specification.

2533
02:14:38.100 --> 02:14:39.500
It was only ever in a draft.

2534
02:14:41.840 --> 02:14:43.780
The Document Outline Algorithm said

2535
02:14:43.780 --> 02:14:45.250
all you had to do was use an &lt;h1&gt;

2536
02:14:45.250 --> 02:14:46.950
every time you used a &lt;section&gt; or &lt;article&gt;,

2537
02:14:46.950 --> 02:14:48.330
and the page would auto-magically

2538
02:14:48.330 --> 02:14:52.200
figure out the proper structure and convey that.

2539
02:14:52.200 --> 02:14:54.860
No browser ever wanted to support that.

2540
02:14:54.860 --> 02:14:55.700
It doesn't exist,

2541
02:14:55.700 --> 02:14:57.850
so just use good heading structures,

2542
02:14:57.850 --> 02:15:00.840
regardless of how you're using those elements.

2543
02:15:00.840 --> 02:15:02.410
My general rule of thumb is any time

2544
02:15:02.410 --> 02:15:04.370
I open a &lt;section&gt; or an &lt;article&gt;,

2545
02:15:04.370 --> 02:15:06.050
it should have a heading anyway,

2546
02:15:06.050 --> 02:15:08.340
because I'm really creating a new section of content

2547
02:15:08.340 --> 02:15:09.540
into a chunk of content.

2548
02:15:11.410 --> 02:15:14.000
If I look at an article of mine,

2549
02:15:14.000 --> 02:15:16.540
and I just look at the heading structure,

2550
02:15:16.540 --> 02:15:17.860
I can tell pretty quickly.

2551
02:15:17.860 --> 02:15:19.240
There's what my page is about,

2552
02:15:19.240 --> 02:15:21.131
Be Wary of Guarantees,

2553
02:15:21.131 --> 02:15:23.890
&lt;h2&gt; would be evaluating vendors and tools,

2554
02:15:23.890 --> 02:15:25.200
and then I have all these tips.

2555
02:15:25.200 --> 02:15:26.860
Look for accessibility tickets.

2556
02:15:26.860 --> 02:15:28.470
Ask around.

2557
02:15:28.470 --> 02:15:29.650
Step back out of that.

2558
02:15:29.650 --> 02:15:31.360
What to do when you've been burned.

2559
02:15:31.360 --> 02:15:32.193
Step out of that,

2560
02:15:32.193 --> 02:15:33.080
some examples,

2561
02:15:33.080 --> 02:15:34.690
and then I say, "Sites that do it wrong."

2562
02:15:34.690 --> 02:15:36.160
TypeForm, Slack,

2563
02:15:36.160 --> 02:15:37.340
Wix, Disqus,

2564
02:15:37.340 --> 02:15:38.440
Polar, et cetera.

2565
02:15:38.440 --> 02:15:39.970
So, I have some structure to this page.

2566
02:15:39.970 --> 02:15:42.940
You can see how it's organized,

2567
02:15:42.940 --> 02:15:45.910
and it's pretty easy to get those visually.

2568
02:15:45.910 --> 02:15:47.150
There are a bunch of tools that do it.

2569
02:15:47.150 --> 02:15:51.300
I use Chris Pederick's web accessibility toolbar.

2570
02:15:51.300 --> 02:15:53.340
It has a document outline feature,

2571
02:15:53.340 --> 02:15:54.820
and it shows me that view,

2572
02:15:54.820 --> 02:15:56.110
and I use that when I do audits,

2573
02:15:56.110 --> 02:15:57.510
'cause it's awesomely handy.

2574
02:15:59.400 --> 02:16:02.530
Other ways to structure your document includes using lists.

2575
02:16:03.380 --> 02:16:06.280
Ordered lists, which put things in numbered order.

2576
02:16:07.980 --> 02:16:10.350
If it matters what follows another thing,

2577
02:16:10.350 --> 02:16:11.450
use an ordered list.

2578
02:16:11.450 --> 02:16:12.283
If it doesn't matter,

2579
02:16:12.283 --> 02:16:14.610
if it's a lose collection, unordered,

2580
02:16:14.610 --> 02:16:17.470
and you can use description lists for key value pairs.

2581
02:16:18.520 --> 02:16:21.320
Descriptions, definitions used to be their name

2582
02:16:21.320 --> 02:16:23.500
in older, cooler versions of HTML.

2583
02:16:25.880 --> 02:16:26.900
As an example,

2584
02:16:26.900 --> 02:16:28.890
if you have a recipe,

2585
02:16:28.890 --> 02:16:30.690
the instructions should be in order.

2586
02:16:31.620 --> 02:16:33.550
Boil water, add pasta, drain water.

2587
02:16:34.970 --> 02:16:37.620
If you've drained the water before you add the pasta,

2588
02:16:37.620 --> 02:16:38.660
you have a problem.

2589
02:16:38.660 --> 02:16:40.240
That's why it's an ordered list.

2590
02:16:41.240 --> 02:16:43.790
The order in which you put the pasta, water, and olive oil

2591
02:16:43.790 --> 02:16:45.280
on the counter is irrelevant.

2592
02:16:45.280 --> 02:16:47.050
This is just what you need to do it,

2593
02:16:47.050 --> 02:16:48.400
and on the definition list,

2594
02:16:49.530 --> 02:16:50.920
I need one pound of pasta,

2595
02:16:50.920 --> 02:16:52.390
four quarts of water,

2596
02:16:52.390 --> 02:16:53.840
not four quarts of olive oil.

2597
02:16:54.850 --> 02:16:55.683
If you do that,

2598
02:16:55.683 --> 02:16:56.560
let me know how it is.

2599
02:16:57.440 --> 02:16:58.590
I've always kinda wanted to do that,

2600
02:16:58.590 --> 02:16:59.423
just a big,

2601
02:16:59.423 --> 02:17:00.560
and just, yeah.

2602
02:17:00.560 --> 02:17:01.860
I'm sure it'd be terrible.

2603
02:17:05.190 --> 02:17:06.420
Be keyboard friendly.

2604
02:17:07.455 --> 02:17:10.250
I think I have a bunch of slides on this one.

2605
02:17:10.250 --> 02:17:11.730
Be careful with tabindex.

2606
02:17:11.730 --> 02:17:13.260
Tab index is dangerous.

2607
02:17:13.260 --> 02:17:15.130
I see people add tabindex to things

2608
02:17:15.130 --> 02:17:17.710
in order to allow them to tab through a page.

2609
02:17:17.710 --> 02:17:20.210
That's not necessarily a good idea.

2610
02:17:20.210 --> 02:17:22.770
You use tabindex, negative one if you're gonna use

2611
02:17:22.770 --> 02:17:24.730
script to set focus on something,

2612
02:17:24.730 --> 02:17:28.760
like a dialogue that you've popped up.

2613
02:17:28.760 --> 02:17:30.910
It does not put it in the tab order of the page.

2614
02:17:30.910 --> 02:17:35.140
tabindex="0" will allow the user to set focus to it.

2615
02:17:35.140 --> 02:17:38.130
You'll see this when people do a &lt;div&gt; tabindex="0",

2616
02:17:38.130 --> 02:17:40.060
because they've made it into a button,

2617
02:17:40.060 --> 02:17:41.680
'cause they hate their users.

2618
02:17:43.100 --> 02:17:44.590
tabindex="1" one or greater,

2619
02:17:44.590 --> 02:17:45.423
don't do this.

2620
02:17:45.423 --> 02:17:47.840
It totally messes with the tab order of the page.

2621
02:17:47.840 --> 02:17:51.460
If you do tabindex="1", two, three, four,

2622
02:17:51.460 --> 02:17:52.450
you can go visit a site,

2623
02:17:52.450 --> 02:17:53.570
and as soon as you start tabbing,

2624
02:17:53.570 --> 02:17:55.690
you can get trapped in a crappy CAPTCHA,

2625
02:17:55.690 --> 02:17:58.970
which often use a tabindex of three, four, five, six,

2626
02:17:58.970 --> 02:18:01.100
before you get into the skip page link.

2627
02:18:02.650 --> 02:18:05.880
Positive tabindex values will always get focused

2628
02:18:05.880 --> 02:18:09.530
first on the page before the regular content on the page.

2629
02:18:09.530 --> 02:18:10.740
So, don't do that,

2630
02:18:10.740 --> 02:18:12.210
unless you want to force your users

2631
02:18:12.210 --> 02:18:15.440
into your terrible, nonsensical flow.

2632
02:18:17.950 --> 02:18:20.620
If you have scrolling content boxes,

2633
02:18:20.620 --> 02:18:22.230
that's a thing.

2634
02:18:22.230 --> 02:18:24.540
You might want to remember the keyboard users

2635
02:18:24.540 --> 02:18:27.090
can't scroll those content boxes.

2636
02:18:27.090 --> 02:18:27.923
They can see them,

2637
02:18:27.923 --> 02:18:28.756
but they don't have a mouse.

2638
02:18:28.756 --> 02:18:30.190
They don't have a mouse wheel.

2639
02:18:30.190 --> 02:18:33.530
They can't put focus on it in order to make it scroll.

2640
02:18:33.530 --> 02:18:35.750
If you have content that only displays on :hover,

2641
02:18:35.750 --> 02:18:36.992
remember that your keyboard users

2642
02:18:36.992 --> 02:18:40.240
also probably cannot access it.

2643
02:18:40.240 --> 02:18:41.990
A technique to get around that,

2644
02:18:41.990 --> 02:18:42.880
like a scrolling area,

2645
02:18:42.880 --> 02:18:45.950
would be to give it a &lt;div role="region" and an aria-label,

2646
02:18:45.950 --> 02:18:47.840
so a screen reader user knows what it is,

2647
02:18:47.840 --> 02:18:50.090
and then give it a tabindex="0".

2648
02:18:50.090 --> 02:18:51.480
Now, I can put focus on it,

2649
02:18:51.480 --> 02:18:52.630
and when I do that,

2650
02:18:52.630 --> 02:18:53.730
I can start to scroll.

2651
02:18:54.930 --> 02:18:58.460
So, in this table, where all of the text gets clipped,

2652
02:18:58.460 --> 02:18:59.450
I have scroll bars,

2653
02:18:59.450 --> 02:19:01.430
and all I'm doing is tabbing through,

2654
02:19:01.430 --> 02:19:03.530
and then using my arrow keys.

2655
02:19:03.530 --> 02:19:07.240
This is one where the text-only expands on :hover,

2656
02:19:07.240 --> 02:19:11.120
but because I've given it a tabindex and a focus style,

2657
02:19:11.120 --> 02:19:13.550
the focus style matches the :hover style,

2658
02:19:13.550 --> 02:19:16.060
and it expands to show me the stuff.

2659
02:19:16.060 --> 02:19:17.800
So, there are cases where you can use stuff

2660
02:19:17.800 --> 02:19:18.990
we tell you not to use,

2661
02:19:18.990 --> 02:19:21.230
and it can actually benefit the user.

2662
02:19:21.230 --> 02:19:23.080
The trick is to be keyboard friendly.

2663
02:19:25.210 --> 02:19:27.070
Emoji are a thing,

2664
02:19:27.070 --> 02:19:30.050
and I think I have video for this as well.

2665
02:19:30.050 --> 02:19:30.883
Emoji are tricky,

2666
02:19:30.883 --> 02:19:32.630
because they can sometimes convey

2667
02:19:32.630 --> 02:19:34.380
too much or too little information.

2668
02:19:36.110 --> 02:19:38.750
I understand that peaches and eggplants

2669
02:19:38.750 --> 02:19:41.700
are popular with the kids for emoji.

2670
02:19:41.700 --> 02:19:43.240
Am I wrong with that?

2671
02:19:43.240 --> 02:19:45.137
Does eggplant translate?

2672
02:19:45.137 --> 02:19:48.840
It's probably for the best I didn't put it up here, then.

2673
02:19:48.840 --> 02:19:51.710
It's the big, purple--
(audience member talking)

2674
02:19:51.710 --> 02:19:53.134
Aubergine, thank you.

2675
02:19:53.134 --> 02:19:55.217
(laughs)

2676
02:19:58.177 --> 02:19:59.200
(computer audio speaking)

2677
02:19:59.200 --> 02:20:03.822
So, this is listening to it in NVDA.

2678
02:20:03.822 --> 02:20:07.322
(computer audio speaking)

2679
02:20:09.940 --> 02:20:11.210
So, using the mouse,

2680
02:20:13.860 --> 02:20:16.260
I have a tutorial that shows you how to do this,

2681
02:20:19.000 --> 02:20:21.340
and I also have it support a keyboard user

2682
02:20:21.340 --> 02:20:23.900
by putting tabindex on some of these,

2683
02:20:23.900 --> 02:20:26.370
so that just the ones where I put tab index,

2684
02:20:26.370 --> 02:20:28.690
you can tab to them and see what's going on.

2685
02:20:29.770 --> 02:20:30.932
Let me try and play this again,.

2686
02:20:30.932 --> 02:20:33.190
(computer audio talking)

2687
02:20:33.190 --> 02:20:37.000
Graphic poop.
(computer audio talking)

2688
02:20:38.720 --> 02:20:41.380
Graphic mouse.
(computer audio speaking)

2689
02:20:41.380 --> 02:20:43.060
The idea here is I've taken

2690
02:20:43.060 --> 02:20:45.290
something that's strictly visual,

2691
02:20:45.290 --> 02:20:47.860
and I've added support for a screen reader,

2692
02:20:47.860 --> 02:20:50.830
and then I've took something that is keyboard only,

2693
02:20:51.730 --> 02:20:52.900
or, I'm sorry, mouse only,

2694
02:20:52.900 --> 02:20:55.260
and I added keyboard support to it.

2695
02:20:55.260 --> 02:20:57.150
And, by the way, I use a mouse,

2696
02:20:57.150 --> 02:20:58.500
and I don't use a screen reader,

2697
02:20:58.500 --> 02:21:00.810
and I don't know what some of these really cool emoji are

2698
02:21:00.810 --> 02:21:02.060
that the kids are using,

2699
02:21:02.060 --> 02:21:03.540
so it adds value to me.

2700
02:21:03.540 --> 02:21:05.640
Consider me a cognitively challenged user,

2701
02:21:06.850 --> 02:21:09.332
'cause I need that assistance.

2702
02:21:09.332 --> 02:21:10.165
(computer audio talking)
Oops.

2703
02:21:10.165 --> 02:21:11.880
Hey, look, that plays automatically.

2704
02:21:13.770 --> 02:21:16.920
Do not use &lt;div&gt; nor &lt;span&gt; as a control.

2705
02:21:16.920 --> 02:21:17.920
They're not links.

2706
02:21:17.920 --> 02:21:19.020
They are not buttons.

2707
02:21:19.020 --> 02:21:21.580
They are not your really cool select menu.

2708
02:21:21.580 --> 02:21:23.970
Try and find real controls first and foremost.

2709
02:21:25.480 --> 02:21:27.700
If a control takes you to another URL,

2710
02:21:27.700 --> 02:21:30.070
if you're moving somebody to another page,

2711
02:21:30.070 --> 02:21:31.450
&lt;a href&gt;.

2712
02:21:31.450 --> 02:21:34.430
It's important to note it does not fire on the space bar.

2713
02:21:34.430 --> 02:21:36.170
If I put focus on a hyperlink,

2714
02:21:36.170 --> 02:21:37.120
and I hit the space bar,

2715
02:21:37.120 --> 02:21:38.770
can anybody tell me what happens?

2716
02:21:41.070 --> 02:21:42.320
I'll take that as a no.

2717
02:21:42.320 --> 02:21:44.749
If I hit space when a link has focus,

2718
02:21:44.749 --> 02:21:47.629
the page scrolls one screen-fold.

2719
02:21:47.629 --> 02:21:49.400
(audience member talking)

2720
02:21:49.400 --> 02:21:51.970
So, if you have a link that you're calling a &lt;button&gt;,

2721
02:21:51.970 --> 02:21:53.990
and maybe you've put role="button" on it,

2722
02:21:53.990 --> 02:21:57.090
&lt;button&gt; does fire when I press the space bar.

2723
02:21:57.090 --> 02:21:58.390
So, if you put role="button",

2724
02:21:58.390 --> 02:22:00.150
my screen reader will tell me it's a button.

2725
02:22:00.150 --> 02:22:01.230
I'm gonna hit the space bar,

2726
02:22:01.230 --> 02:22:03.010
'cause it's the biggest key on the keyboard,

2727
02:22:03.010 --> 02:22:05.080
and nothing's going to happen,

2728
02:22:05.080 --> 02:22:06.840
because you're using the wrong element,

2729
02:22:06.840 --> 02:22:08.500
and you're recasting it

2730
02:22:08.500 --> 02:22:11.010
and lying to the user about what it is.

2731
02:22:11.010 --> 02:22:13.740
If the control changes something on the current page,

2732
02:22:13.740 --> 02:22:16.040
just use a &lt;button&gt;, type button.

2733
02:22:16.040 --> 02:22:17.240
It's that simple.

2734
02:22:17.240 --> 02:22:18.567
If you're submitting a form field,

2735
02:22:18.567 --> 02:22:19.653
&lt;input type="submit"&gt;,

2736
02:22:19.653 --> 02:22:21.660
&lt;button type="submit"&gt;,

2737
02:22:21.660 --> 02:22:23.800
for internal style reasons,

2738
02:22:23.800 --> 02:22:25.350
code, style reasons,

2739
02:22:25.350 --> 02:22:28.700
I always counsel my clients using &lt;input type="submit"&gt;,

2740
02:22:28.700 --> 02:22:31.620
so they wouldn't mentally confuse it with a &lt;button&gt;.

2741
02:22:31.620 --> 02:22:32.757
I would try to get them to think,

2742
02:22:32.757 --> 02:22:34.573
&lt;input type="submit"&gt; forms,

2743
02:22:34.573 --> 02:22:36.910
&lt;button type="button"&gt; for opening

2744
02:22:36.910 --> 02:22:38.390
and closing boxes on the page,

2745
02:22:38.390 --> 02:22:39.223
and scrolling,

2746
02:22:39.223 --> 02:22:40.590
and doing stuff like that,

2747
02:22:40.590 --> 02:22:43.130
versus a link which takes me to another page.

2748
02:22:44.680 --> 02:22:47.240
It's really easy to style this stuff.

2749
02:22:47.240 --> 02:22:48.740
One of those is a &lt;button&gt;.

2750
02:22:48.740 --> 02:22:50.040
One of those is a link.

2751
02:22:50.040 --> 02:22:52.090
One of those is an &lt;input type="submit"&gt;,

2752
02:22:53.410 --> 02:22:55.160
but they all look exactly the same.

2753
02:22:56.020 --> 02:22:58.690
There's really no reason to use the wrong element.

2754
02:22:58.690 --> 02:23:00.860
You can make them look however you want.

2755
02:23:02.370 --> 02:23:05.220
Make sure that you define focus styles.

2756
02:23:05.220 --> 02:23:07.170
Anywhere that you have a :hover style,

2757
02:23:08.420 --> 02:23:09.570
add the focus selector.

2758
02:23:11.160 --> 02:23:12.720
So, when I put my cursor over something,

2759
02:23:12.720 --> 02:23:13.560
if it changes color,

2760
02:23:13.560 --> 02:23:14.460
if it catches fire,

2761
02:23:14.460 --> 02:23:16.400
if it sends an e-mail to my grandmother,

2762
02:23:16.400 --> 02:23:18.730
make it do that when I tab to it as well.

2763
02:23:19.670 --> 02:23:21.090
Make sure that you don't have

2764
02:23:21.090 --> 02:23:22.860
this style in your style sheets.

2765
02:23:22.860 --> 02:23:24.600
If you're using a CSS reset,

2766
02:23:24.600 --> 02:23:26.440
if you ever see {outline:none;},

2767
02:23:26.440 --> 02:23:28.340
unless you have a damn good reason for using it,

2768
02:23:28.340 --> 02:23:29.760
just remove that.

2769
02:23:29.760 --> 02:23:30.650
Just get rid of it.

2770
02:23:30.650 --> 02:23:33.280
By default, at least stuff will work.

2771
02:23:33.280 --> 02:23:35.940
Generally, don't rely on browser defaults.

2772
02:23:35.940 --> 02:23:37.520
You can test this just with a tab key.

2773
02:23:37.520 --> 02:23:38.740
You can tab around pages,

2774
02:23:38.740 --> 02:23:41.780
and you should know where you are at all times.

2775
02:23:41.780 --> 02:23:43.770
There are cases, though,

2776
02:23:43.770 --> 02:23:45.310
where you will see pretty quickly

2777
02:23:45.310 --> 02:23:47.940
how the browser default is wildly insufficient.

2778
02:23:49.140 --> 02:23:50.790
This is a screenshot from Chrome.

2779
02:23:52.360 --> 02:23:54.450
I'm on a Google page.

2780
02:23:54.450 --> 02:23:57.180
This Google page is telling me how to use Chrome,

2781
02:23:58.060 --> 02:23:59.860
and I'm tabbing through it with my keyboard,

2782
02:23:59.860 --> 02:24:02.680
and the default focus outline is blue,

2783
02:24:03.640 --> 02:24:05.480
and the default background color

2784
02:24:05.480 --> 02:24:08.400
of the navigation bar is a very similar blue.

2785
02:24:08.400 --> 02:24:09.840
So, I can't even see.

2786
02:24:09.840 --> 02:24:10.673
You might be able to see,

2787
02:24:10.673 --> 02:24:11.506
I mean I can see it,

2788
02:24:11.506 --> 02:24:13.460
but further back, you might not be able to see it.

2789
02:24:13.460 --> 02:24:15.960
So, don't rely on the browser defaults.

2790
02:24:15.960 --> 02:24:17.220
Create good styles.

2791
02:24:18.320 --> 02:24:19.730
Make sure that they work the same

2792
02:24:19.730 --> 02:24:22.510
for keyboard and mouse users.

2793
02:24:25.540 --> 02:24:29.610
This is me trying to use the now gone Virgin America site.

2794
02:24:29.610 --> 02:24:30.443
If you look down here,

2795
02:24:30.443 --> 02:24:32.220
you can see the URL keeps changing.

2796
02:24:32.220 --> 02:24:33.360
I'm tabbing through the page.

2797
02:24:33.360 --> 02:24:35.710
I'm trying to see where I am on the page.

2798
02:24:35.710 --> 02:24:38.560
I have no idea where I am on the page until it scrolls.

2799
02:24:38.560 --> 02:24:40.080
It scrolled, awesome.

2800
02:24:40.080 --> 02:24:41.530
I still don't know where I am.

2801
02:24:41.530 --> 02:24:42.590
No, still not a clue,

2802
02:24:42.590 --> 02:24:43.660
the page keeps scrolling.

2803
02:24:43.660 --> 02:24:45.120
I'm hitting the tab key,

2804
02:24:45.120 --> 02:24:46.570
no idea,

2805
02:24:46.570 --> 02:24:48.950
and it isn't until I get to the very bottom of the page

2806
02:24:48.950 --> 02:24:52.090
that I start to get a sense of where I might be.

2807
02:24:52.090 --> 02:24:54.230
This site, the Virgin American site, again,

2808
02:24:54.230 --> 02:24:55.480
thankfully shut down now,

2809
02:24:56.370 --> 02:24:59.210
the Virgin America site won all sorts of accolades.

2810
02:24:59.210 --> 02:25:01.170
Design awards, it got articles

2811
02:25:01.170 --> 02:25:04.770
in popular Condenast magazines, whatever,

2812
02:25:04.770 --> 02:25:07.200
and it was a wildly unusable site.

2813
02:25:08.190 --> 02:25:09.160
And, one day, they said,

2814
02:25:09.160 --> 02:25:10.300
"We're gonna make it accessible."

2815
02:25:10.300 --> 02:25:12.180
So, they hired a third party,

2816
02:25:12.180 --> 02:25:13.720
and they added a link that says,

2817
02:25:13.720 --> 02:25:15.420
"See the accessible version,"

2818
02:25:15.420 --> 02:25:17.507
and the accessible version was worse.

2819
02:25:17.507 --> 02:25:20.260
(audience laughs)

2820
02:25:20.260 --> 02:25:23.260
Those of us in the accessibility community just piled on.

2821
02:25:23.260 --> 02:25:24.650
We had so much fun.

2822
02:25:24.650 --> 02:25:25.670
It was just this Twitter game

2823
02:25:25.670 --> 02:25:28.010
of who could find the next most annoying thing.

2824
02:25:28.010 --> 02:25:29.490
It didn't work with a screen reader.

2825
02:25:29.490 --> 02:25:31.900
Their groups of radio buttons weren't unique,

2826
02:25:31.900 --> 02:25:34.330
so you could select all of the radio buttons at once.

2827
02:25:34.330 --> 02:25:35.163
The colors were wrong.

2828
02:25:35.163 --> 02:25:36.090
There were no graphics,

2829
02:25:36.090 --> 02:25:37.590
but they had weird image tags.

2830
02:25:37.590 --> 02:25:38.540
It was just a mess.

2831
02:25:39.750 --> 02:25:41.080
And, that probably would not have happened

2832
02:25:41.080 --> 02:25:43.640
if they'd just left their focus outlines on,

2833
02:25:43.640 --> 02:25:45.900
because then, we wouldn't have started picking on them.

2834
02:25:45.900 --> 02:25:49.550
It made them feel they had to respond as poorly as they did.

2835
02:25:54.450 --> 02:25:55.930
Display versus source order.

2836
02:25:56.950 --> 02:25:59.470
This is something that people often forget about.

2837
02:26:01.280 --> 02:26:04.900
You can use CSS to reorder your code.

2838
02:26:05.990 --> 02:26:08.420
So, your code can be a heading,

2839
02:26:08.420 --> 02:26:09.430
and a block of content,

2840
02:26:09.430 --> 02:26:10.410
and more blocks of content,

2841
02:26:10.410 --> 02:26:11.380
and more headings,

2842
02:26:11.380 --> 02:26:12.950
and you can use CSS floats

2843
02:26:12.950 --> 02:26:15.210
or absolute positioning to rearrange it.

2844
02:26:15.210 --> 02:26:17.170
You've been able to do that for a really long time,

2845
02:26:17.170 --> 02:26:19.290
and it's always been a potential problem.

2846
02:26:19.290 --> 02:26:21.040
With Flexbox and Grid,

2847
02:26:21.040 --> 02:26:24.290
it becomes even more of a potential problem,

2848
02:26:24.290 --> 02:26:26.750
specifically because you can use the order property

2849
02:26:26.750 --> 02:26:29.680
and Flexbox to rearrange things on the page.

2850
02:26:29.680 --> 02:26:30.581
The catch, of course,

2851
02:26:30.581 --> 02:26:33.740
is that visually, it might look one way,

2852
02:26:33.740 --> 02:26:35.670
but it might be announced a different way.

2853
02:26:35.670 --> 02:26:37.330
Giving instructions to somebody

2854
02:26:37.330 --> 02:26:39.550
can suddenly be meaningless,

2855
02:26:39.550 --> 02:26:41.520
whether they're just seeing differently

2856
02:26:41.520 --> 02:26:42.700
than what they're hearing,

2857
02:26:42.700 --> 02:26:44.330
or the mobile or the desktop version

2858
02:26:44.330 --> 02:26:46.270
have reordered the content,

2859
02:26:46.270 --> 02:26:47.770
or their CSS is broken.

2860
02:26:47.770 --> 02:26:48.760
They're on an older browser

2861
02:26:48.760 --> 02:26:51.228
that doesn't support Flex or Grid.

2862
02:26:51.228 --> 02:26:54.060
The behavior of how the browsers

2863
02:26:54.060 --> 02:26:56.260
handle this stuff might be different.

2864
02:26:56.260 --> 02:26:58.480
Firefox no longer does it this way.

2865
02:26:58.480 --> 02:26:59.980
They've changed,

2866
02:26:59.980 --> 02:27:02.420
but the idea was you could reorder stuff.

2867
02:27:02.420 --> 02:27:05.580
So, in this example,

2868
02:27:05.580 --> 02:27:09.160
it will at least jump one, two, three, four,

2869
02:27:09.160 --> 02:27:11.560
one, two, three, four,

2870
02:27:11.560 --> 02:27:13.960
because that's the order it appears in the code.

2871
02:27:14.980 --> 02:27:19.980
Over here, it doesn't go one, two, three, four.

2872
02:27:20.860 --> 02:27:23.460
It goes in the order it appears on the screen

2873
02:27:23.460 --> 02:27:25.700
as I'm tabbing through that page.

2874
02:27:25.700 --> 02:27:27.880
These are two dramatically different experiences,

2875
02:27:27.880 --> 02:27:29.650
and they're just two different browsers.

2876
02:27:30.990 --> 02:27:32.840
I prefer the way that Firefox did it,

2877
02:27:32.840 --> 02:27:34.950
because it was following the code order,

2878
02:27:34.950 --> 02:27:36.880
and I felt that it was force authors

2879
02:27:36.880 --> 02:27:38.980
to do a better job of managing that,

2880
02:27:38.980 --> 02:27:41.780
but Firefox eventually went that way,

2881
02:27:43.140 --> 02:27:45.180
which is confusing for users,

2882
02:27:46.460 --> 02:27:47.400
screen reader users,

2883
02:27:47.400 --> 02:27:48.850
sited screen reader users,

2884
02:27:48.850 --> 02:27:50.550
and people following instructions.

2885
02:27:52.680 --> 02:27:53.890
You've heard me talk a couple times

2886
02:27:53.890 --> 02:27:55.480
about how I'm repeating things you say

2887
02:27:55.480 --> 02:27:57.000
for the benefit of captions.

2888
02:27:58.621 --> 02:28:00.171
Are we really that low on time?

2889
02:28:03.060 --> 02:28:05.660
Bear in mind, everybody uses captions and subtitles.

2890
02:28:07.828 --> 02:28:09.110
In rare cases have their been,

2891
02:28:09.110 --> 02:28:10.290
other than totally blind people,

2892
02:28:10.290 --> 02:28:12.040
who don't use them in some setting,

2893
02:28:12.950 --> 02:28:14.640
regardless of your circumstances.

2894
02:28:14.640 --> 02:28:17.300
They should include an audio description.

2895
02:28:17.300 --> 02:28:19.200
They should include the speaker identifications,

2896
02:28:19.200 --> 02:28:21.660
so you know who it is who's talking.

2897
02:28:21.660 --> 02:28:22.493
There's a great site,

2898
02:28:22.493 --> 02:28:24.150
Craptions, NoMoreCraptions.com,

2899
02:28:24.150 --> 02:28:27.990
where you can upload your captions from a YouTube video,

2900
02:28:27.990 --> 02:28:30.880
and you can review them to see if they are any good,

2901
02:28:30.880 --> 02:28:33.200
and you can fix the really terrible stuff.

2902
02:28:33.200 --> 02:28:35.950
This is the talk I gave in Sweden.

2903
02:28:36.900 --> 02:28:38.662
"While so long to his Viagra."

2904
02:28:38.662 --> 02:28:40.670
(audience laughs)

2905
02:28:40.670 --> 02:28:41.750
I think what he was saying is,

2906
02:28:41.750 --> 02:28:43.000
"This is Adrian Roselli."

2907
02:28:46.628 --> 02:28:49.580
Do all your video/audio clips have text alternatives?

2908
02:28:49.580 --> 02:28:52.290
Are the links the closed captions or transcripts

2909
02:28:52.290 --> 02:28:54.810
built into the player or are they a separate text link?

2910
02:28:54.810 --> 02:28:56.140
So, if the player doesn't even load,

2911
02:28:56.140 --> 02:28:58.570
can I at least download that transcript?

2912
02:28:58.570 --> 02:29:00.880
Is there an audio description available?

2913
02:29:00.880 --> 02:29:03.860
I have a bunch of tools that you can reference later on.

2914
02:29:05.640 --> 02:29:07.530
I don't wanna go too deeply into ARIA,

2915
02:29:07.530 --> 02:29:09.790
partly because I'm running out of time.

2916
02:29:09.790 --> 02:29:13.560
ARIA stands for Accessible Rich Internet Applications,

2917
02:29:13.560 --> 02:29:15.690
and the idea was it's a bridging technology

2918
02:29:15.690 --> 02:29:18.400
between novel interactions,

2919
02:29:18.400 --> 02:29:19.390
and screen readers,

2920
02:29:21.160 --> 02:29:22.720
and other devices that will support it.

2921
02:29:22.720 --> 02:29:27.140
The idea was that HTML5 doesn't have patterns

2922
02:29:27.140 --> 02:29:32.120
for things like tabbed interfaces and accordion interfaces,

2923
02:29:32.120 --> 02:29:34.390
and ARIA is there to help patch that up

2924
02:29:34.390 --> 02:29:36.080
until an element might appear.

2925
02:29:36.080 --> 02:29:40.140
So, while the HTML team discusses panels and panel sets

2926
02:29:40.140 --> 02:29:41.580
that would take the place of carousels,

2927
02:29:41.580 --> 02:29:43.140
and tabs, and accordions,

2928
02:29:43.140 --> 02:29:46.660
you can use ARIA to sort of Spackle over that.

2929
02:29:47.860 --> 02:29:50.020
There are some rules to using ARIA.

2930
02:29:50.020 --> 02:29:52.540
Use a native HTML5 element first.

2931
02:29:52.540 --> 02:29:54.860
Don't just start throwing ARIA at stuff.

2932
02:29:54.860 --> 02:29:56.810
Look for the element that does the job.

2933
02:29:58.130 --> 02:29:59.550
Don't change native semantics.

2934
02:29:59.550 --> 02:30:01.350
Do not change an &lt;h1&gt; into a button.

2935
02:30:02.500 --> 02:30:04.640
Do not change a link into a button.

2936
02:30:05.560 --> 02:30:06.480
Different interactions,

2937
02:30:06.480 --> 02:30:07.480
different behaviors.

2938
02:30:09.360 --> 02:30:12.620
All interactive ARIA controls must work with a keyboard.

2939
02:30:12.620 --> 02:30:14.810
They have to be able to perform equivalent actions.

2940
02:30:14.810 --> 02:30:16.490
If your users can't do that,

2941
02:30:16.490 --> 02:30:17.390
you got a problem.

2942
02:30:18.310 --> 02:30:19.460
You either gotta fix your ARIA

2943
02:30:19.460 --> 02:30:22.170
or come up with a different interaction.

2944
02:30:22.170 --> 02:30:25.080
Do not use role="presentation" or aria-hidden="true"

2945
02:30:25.080 --> 02:30:26.890
on an element that can receive focus,

2946
02:30:26.890 --> 02:30:29.530
because a screen reader will never know it's there.

2947
02:30:29.530 --> 02:30:32.090
These basically say this doesn't exist,

2948
02:30:32.090 --> 02:30:34.129
and by allowing them to put focus on it,

2949
02:30:34.129 --> 02:30:36.330
you're going to confuse the situation,

2950
02:30:36.330 --> 02:30:38.230
because I'll never be able to get to it.

2951
02:30:40.120 --> 02:30:42.550
Every interactive element must have an accessible name.

2952
02:30:42.550 --> 02:30:45.470
There must be a programmatic name associated with a control.

2953
02:30:45.470 --> 02:30:46.720
Sometimes it's visible,

2954
02:30:46.720 --> 02:30:47.960
like the text in a button.

2955
02:30:47.960 --> 02:30:49.160
Sometimes it comes from something

2956
02:30:49.160 --> 02:30:50.390
like the alt text on an image.

2957
02:30:50.390 --> 02:30:52.060
It's usually very easy to satisfy,

2958
02:30:52.060 --> 02:30:54.930
but make sure that you are at least providing that.

2959
02:30:54.930 --> 02:30:56.780
You can test that in a screen reader.

2960
02:30:57.760 --> 02:30:58.930
There are all these really cool,

2961
02:30:58.930 --> 02:31:00.800
prebuilt pattern libraries that you can lean on

2962
02:31:00.800 --> 02:31:02.500
to pull a lot of this information.

2963
02:31:03.900 --> 02:31:06.170
Pattern libraries are a great way to document

2964
02:31:06.170 --> 02:31:08.010
all the rules for your custom widgets.

2965
02:31:08.010 --> 02:31:10.360
Pattern libraries allow you to define things like,

2966
02:31:10.360 --> 02:31:12.750
"These are the keyboard shortcuts it needs to honor.

2967
02:31:12.750 --> 02:31:15.020
"These are the different states that it has.

2968
02:31:15.020 --> 02:31:16.190
"There are the things to click.

2969
02:31:16.190 --> 02:31:18.350
"These are the messages when it goes wrong."

2970
02:31:19.600 --> 02:31:21.940
Individual widgets can be used

2971
02:31:21.940 --> 02:31:24.670
to put together a larger pattern library.

2972
02:31:24.670 --> 02:31:26.620
The ARIA Authoring Practices Guide

2973
02:31:26.620 --> 02:31:28.330
already has a prebuilt pattern library.

2974
02:31:28.330 --> 02:31:30.880
You can go steal a ton of stuff from them.

2975
02:31:30.880 --> 02:31:32.520
It's already built.

2976
02:31:32.520 --> 02:31:33.630
Much of the code is already there.

2977
02:31:33.630 --> 02:31:35.830
The keyboard interaction is already defined.

2978
02:31:37.140 --> 02:31:38.370
It's not perfect,

2979
02:31:38.370 --> 02:31:39.710
but it can help you out.

2980
02:31:39.710 --> 02:31:41.550
If you've got a really, really custom widget

2981
02:31:41.550 --> 02:31:43.150
you've never seen before,

2982
02:31:43.150 --> 02:31:45.360
like a DDR style interface,

2983
02:31:45.360 --> 02:31:47.790
if you make people dance in front of their computer,

2984
02:31:47.790 --> 02:31:49.050
ARIA's not gonna help you.

2985
02:31:49.050 --> 02:31:51.020
It's probably just a terrible interface.

2986
02:31:52.310 --> 02:31:56.540
This is an example from the ARIA Authoring Practices.

2987
02:31:57.730 --> 02:31:58.970
That's from their practices.

2988
02:31:58.970 --> 02:32:01.090
This is just a terrible mock up of it,

2989
02:32:01.090 --> 02:32:02.990
but it tells you what's the tab order.

2990
02:32:03.870 --> 02:32:04.703
If I tab through it,

2991
02:32:04.703 --> 02:32:05.536
what happens?

2992
02:32:05.536 --> 02:32:07.300
What are the different roles and states

2993
02:32:07.300 --> 02:32:09.700
that I pull out of ARIA to tell me what it does

2994
02:32:09.700 --> 02:32:12.100
or the different behaviors that we're gonna see?

2995
02:32:14.010 --> 02:32:17.420
BBC has done a beautiful job with its pattern libraries.

2996
02:32:17.420 --> 02:32:20.360
The BBC has gone so far as to identify

2997
02:32:21.650 --> 02:32:23.900
what the label text should say,

2998
02:32:23.900 --> 02:32:25.930
what the images' sizes should be,

2999
02:32:25.930 --> 02:32:27.630
what comes first in the tab order.

3000
02:32:28.940 --> 02:32:30.400
They include things like,

3001
02:32:30.400 --> 02:32:32.080
"This should be an &lt;h2&gt;.

3002
02:32:32.080 --> 02:32:33.950
"This is also an &lt;h2&gt;."

3003
02:32:33.950 --> 02:32:36.780
They provide detail that's great

3004
02:32:36.780 --> 02:32:39.560
for somebody on the design team,

3005
02:32:39.560 --> 02:32:40.990
and somebody on the development team,

3006
02:32:40.990 --> 02:32:42.470
and everybody in between

3007
02:32:42.470 --> 02:32:44.540
to be able to implement these patterns,

3008
02:32:44.540 --> 02:32:47.450
and they don't run the risk of having a new developer

3009
02:32:47.450 --> 02:32:49.800
come up and invent something new

3010
02:32:49.800 --> 02:32:51.490
or break an existing pattern.

3011
02:32:53.860 --> 02:32:57.200
I told you there were four exercises, right?

3012
02:32:57.200 --> 02:32:58.360
Yeah, four.

3013
02:32:58.360 --> 02:33:00.050
This is the fourth and final one.

3014
02:33:00.050 --> 02:33:01.710
I feel like I should've started this sooner,

3015
02:33:01.710 --> 02:33:03.010
'cause like three of you are asleep,

3016
02:33:03.010 --> 02:33:04.051
and they're all Rian.

3017
02:33:04.051 --> 02:33:06.840
(audience laughs)

3018
02:33:06.840 --> 02:33:08.880
So, here's what I want you to do.

3019
02:33:08.880 --> 02:33:11.530
I want you to take that user interface element,

3020
02:33:11.530 --> 02:33:13.540
and I want you talk about,

3021
02:33:13.540 --> 02:33:14.373
make some notes,

3022
02:33:14.373 --> 02:33:15.400
draw on it, whatever it is,

3023
02:33:15.400 --> 02:33:17.190
how you might code it.

3024
02:33:17.190 --> 02:33:19.070
Think about those disability categories

3025
02:33:19.070 --> 02:33:21.980
that you each individually were representing earlier.

3026
02:33:23.280 --> 02:33:25.630
Think about that persona that you came up with,

3027
02:33:26.590 --> 02:33:27.800
Hannah, Adrianna,

3028
02:33:28.960 --> 02:33:30.390
random guy.
<v Audience Member>Matt.</v>

3029
02:33:30.390 --> 02:33:33.776
<v ->Matt.
(audience laughs)</v>

3030
02:33:33.776 --> 02:33:35.300
I'm terrible at this game.

3031
02:33:35.300 --> 02:33:36.940
And, think about those changing needs

3032
02:33:36.940 --> 02:33:37.773
that they're gonna have,

3033
02:33:37.773 --> 02:33:39.450
those different contexts.

3034
02:33:39.450 --> 02:33:41.582
Somebody might totally be able to use it in one context,

3035
02:33:41.582 --> 02:33:44.010
but if Hannah's at a dance club,

3036
02:33:44.010 --> 02:33:46.320
she's not gonna be able to use Tinder in the same way.

3037
02:33:46.320 --> 02:33:48.770
Why do I keep coming back to Tinder?

3038
02:33:48.770 --> 02:33:50.680
Anyway, take 15 minutes,

3039
02:33:50.680 --> 02:33:52.030
and write something up,

3040
02:33:52.030 --> 02:33:55.603
and my plan is to wrap this up relatively quickly,

3041
02:33:55.603 --> 02:33:57.313
so we can get you outta here at a reasonable time,

3042
02:33:57.313 --> 02:33:59.764
'cause I think I have five slides at the end of this.

3043
02:33:59.764 --> 02:34:01.159
So, go nuts.

3044
02:34:01.159 --> 02:34:02.660
(audience laughs)

3045
02:34:02.660 --> 02:34:05.660
(audience chatting)

3046
02:42:45.990 --> 02:42:46.940
Hello, everybody.

3047
02:42:47.780 --> 02:42:51.590
I'm going to cut this exercise short.

3048
02:42:51.590 --> 02:42:53.410
I'm sorry to do that,

3049
02:42:53.410 --> 02:42:55.540
mostly because I wanted to see what you guys came up with.

3050
02:42:55.540 --> 02:42:56.540
What I'm going to do is,

3051
02:42:56.540 --> 02:42:59.490
in order to manage it in the time that we have,

3052
02:42:59.490 --> 02:43:02.270
is I'm going to give each group the microphone,

3053
02:43:02.270 --> 02:43:04.310
and I want you to very quickly tell me

3054
02:43:04.310 --> 02:43:07.760
what your interface element is and a thing,

3055
02:43:07.760 --> 02:43:09.310
let's just do one thing,

3056
02:43:09.310 --> 02:43:14.240
that you did to accommodate users and that benefit.

3057
02:43:14.240 --> 02:43:15.890
So, let's hear from your group.

3058
02:43:15.890 --> 02:43:17.070
<v ->One thing?</v>

3059
02:43:17.070 --> 02:43:18.572
<v ->Yeah, let's do one thing.</v>

3060
02:43:18.572 --> 02:43:20.872
If you do it quickly, we'll do a second thing.

3061
02:43:22.340 --> 02:43:23.840
So, what was your interface component?

3062
02:43:23.840 --> 02:43:26.110
<v ->It was a signup form.</v>
<v ->A signup form.</v>

3063
02:43:26.110 --> 02:43:27.681
<v ->For something.</v>
<v ->Okay.</v>

3064
02:43:27.681 --> 02:43:32.681
<v ->And, we made the checkboxes,</v>

3065
02:43:32.850 --> 02:43:36.210
sorry, the feeds without the placeholder,

3066
02:43:36.210 --> 02:43:39.240
but with the tag.
<v ->The label text.</v>

3067
02:43:39.240 --> 02:43:41.090
<v ->A label tag, yeah.</v>

3068
02:43:41.090 --> 02:43:43.930
We also added icons next to widget field

3069
02:43:43.930 --> 02:43:46.420
to let them know,

3070
02:43:47.675 --> 02:43:49.880
maybe let dyslexic people know easier

3071
02:43:50.750 --> 02:43:51.920
what's the label about.

3072
02:43:51.920 --> 02:43:54.270
For example, the name and the last name,

3073
02:43:54.270 --> 02:43:58.650
we put a little icon of a person.

3074
02:43:58.650 --> 02:43:59.483
<v ->Okay.</v>

3075
02:43:59.483 --> 02:44:01.472
<v ->At the e-mail, we put the at symbol,</v>

3076
02:44:01.472 --> 02:44:03.809
and yeah I did that,

3077
02:44:03.809 --> 02:44:08.809
and we used the big font in our mind,

3078
02:44:10.720 --> 02:44:15.400
and we added a big check box and a big bottom,

3079
02:44:15.400 --> 02:44:17.980
so that they can click on it easily.

3080
02:44:17.980 --> 02:44:18.813
<v ->Okay.</v>

3081
02:44:18.813 --> 02:44:19.710
I looked at your checkbox,

3082
02:44:19.710 --> 02:44:21.660
and what I like is that you have all of the text

3083
02:44:21.660 --> 02:44:23.360
after the checkbox and the label as well,

3084
02:44:23.360 --> 02:44:25.650
so that'd be a huge hit area.

3085
02:44:25.650 --> 02:44:28.250
I could press it with my elbow from across the room.

3086
02:44:29.850 --> 02:44:30.820
Somebody from this table,

3087
02:44:30.820 --> 02:44:32.790
tell me what your interface component is

3088
02:44:32.790 --> 02:44:35.710
and a thing or two,

3089
02:44:35.710 --> 02:44:37.960
or maybe more of what you did.

3090
02:44:37.960 --> 02:44:42.880
<v ->Okay, our component is a shopping cart page,</v>

3091
02:44:42.880 --> 02:44:45.890
but the product description area of facts.

3092
02:44:45.890 --> 02:44:47.040
<v ->A product page, okay.</v>

3093
02:44:47.040 --> 02:44:47.873
<v ->Yeah.</v>

3094
02:44:47.873 --> 02:44:49.980
Well, no, it's the shopping cart,

3095
02:44:49.980 --> 02:44:51.970
but people can see what products

3096
02:44:51.970 --> 02:44:52.803
they've put in their shopping cart.

3097
02:44:52.803 --> 02:44:53.636
<v ->Oh, okay,</v>

3098
02:44:53.636 --> 02:44:54.520
<v ->Yeah, but not all the other stuff</v>

3099
02:44:54.520 --> 02:44:55.737
that's in shopping carts.

3100
02:44:55.737 --> 02:44:57.230
<v ->Okay.</v>

3101
02:44:57.230 --> 02:45:01.480
<v ->So, we have the product name underlined,</v>

3102
02:45:01.480 --> 02:45:03.700
so they can go back to the product,

3103
02:45:03.700 --> 02:45:05.160
so they know it's link,

3104
02:45:05.160 --> 02:45:06.360
and we have a product image,

3105
02:45:06.360 --> 02:45:10.840
so they can refer to the stuff they're actually buying,

3106
02:45:10.840 --> 02:45:15.840
and we have a quantity box with big up and down arrows,

3107
02:45:16.640 --> 02:45:20.300
so people can--
<v ->Increase or decrease.</v>

3108
02:45:20.300 --> 02:45:21.870
<v ->Increase or decrease.</v>

3109
02:45:21.870 --> 02:45:23.460
And, we were actually struggling

3110
02:45:23.460 --> 02:45:26.740
with the way we were displaying the price,

3111
02:45:26.740 --> 02:45:28.750
like show the regular price,

3112
02:45:28.750 --> 02:45:30.230
show what's the discount.

3113
02:45:31.370 --> 02:45:33.090
Is the price displayed the discount

3114
02:45:33.090 --> 02:45:34.720
or should you put a minus or percentage?

3115
02:45:34.720 --> 02:45:36.650
We were trying to figure that out.

3116
02:45:36.650 --> 02:45:37.690
That was the hard part.

3117
02:45:37.690 --> 02:45:38.820
<v ->If it's any consolation,</v>

3118
02:45:38.820 --> 02:45:41.911
there are a lot of people who do Ecommerce for accessibility

3119
02:45:41.911 --> 02:45:44.343
who struggle with the best way to convey

3120
02:45:44.343 --> 02:45:45.630
what's the original price,

3121
02:45:45.630 --> 02:45:46.463
what's the sale price,

3122
02:45:46.463 --> 02:45:47.350
how much is that discount

3123
02:45:47.350 --> 02:45:49.560
without providing too much information,

3124
02:45:49.560 --> 02:45:50.708
without overloading the user.

3125
02:45:50.708 --> 02:45:52.230
<v ->Yeah.</v>

3126
02:45:52.230 --> 02:45:53.063
<v ->Yeah.</v>

3127
02:45:53.063 --> 02:45:54.230
What's cool is I think there are

3128
02:45:54.230 --> 02:45:55.790
some case studies on this online.

3129
02:45:55.790 --> 02:45:58.340
I can't remember who off the top of my head, sadly.

3130
02:45:59.560 --> 02:46:01.180
Thank you.

3131
02:46:01.180 --> 02:46:02.750
All right, who from here?

3132
02:46:02.750 --> 02:46:04.010
You're holding the pen.

3133
02:46:04.010 --> 02:46:05.200
Does that mean it's you?

3134
02:46:06.700 --> 02:46:07.533
Anybody?

3135
02:46:10.140 --> 02:46:12.200
Oh, come on.
(group talking)

3136
02:46:12.200 --> 02:46:13.033
<v ->You.</v>

3137
02:46:14.790 --> 02:46:16.266
<v ->I think she just assigned you.</v>

3138
02:46:16.266 --> 02:46:17.910
(audience member laughs)

3139
02:46:17.910 --> 02:46:19.840
So, what's your interface component?

3140
02:46:19.840 --> 02:46:20.870
What's your interface component

3141
02:46:20.870 --> 02:46:22.650
and some of the considerations you made?

3142
02:46:22.650 --> 02:46:27.650
<v ->It's a form to be filled in order to send a message</v>

3143
02:46:29.690 --> 02:46:32.330
to complete information,

3144
02:46:32.330 --> 02:46:36.670
to ask for more content for more information.

3145
02:46:36.670 --> 02:46:37.503
<v ->Okay.</v>

3146
02:46:37.503 --> 02:46:40.500
<v ->So, just have four fields with names or name,</v>

3147
02:46:40.500 --> 02:46:43.720
e-mail, and message, then GDPR consent,

3148
02:46:43.720 --> 02:46:48.720
and validation control for a reCAPTCHA.

3149
02:46:50.670 --> 02:46:51.503
<v ->Okay.</v>

3150
02:46:51.503 --> 02:46:53.780
<v ->And, the ascend button.</v>

3151
02:46:55.560 --> 02:47:00.560
We considered just the possibilities

3152
02:47:00.980 --> 02:47:04.550
of having big elements,

3153
02:47:04.550 --> 02:47:06.840
so they can be easily clickable.

3154
02:47:07.970 --> 02:47:12.950
We were considering also the fact that GDPR consent

3155
02:47:12.950 --> 02:47:16.200
to be given not with a checkbox,

3156
02:47:16.200 --> 02:47:21.200
but with a regular pop,

3157
02:47:21.460 --> 02:47:22.900
with a message bottom,

3158
02:47:22.900 --> 02:47:27.900
so that there can be selectable also from for blind people.

3159
02:47:31.320 --> 02:47:32.830
And,

3160
02:47:35.750 --> 02:47:37.270
we just

3161
02:47:37.270 --> 02:47:39.960
have black and white interface,

3162
02:47:39.960 --> 02:47:43.050
so with not any particular color added to it,

3163
02:47:43.050 --> 02:47:45.600
so that it is is accessible for everyone

3164
02:47:45.600 --> 02:47:48.520
without any information conveyed through code.

3165
02:47:50.040 --> 02:47:50.873
<v ->Okay.</v>

3166
02:47:50.873 --> 02:47:52.830
That's an interesting choice.

3167
02:47:52.830 --> 02:47:54.660
We usually don't recommend going black and white,

3168
02:47:54.660 --> 02:47:57.720
because you can convey valuable information with color

3169
02:47:57.720 --> 02:48:00.080
to people who can still see color.

3170
02:48:00.080 --> 02:48:01.720
That doesn't mean it's wrong.

3171
02:48:01.720 --> 02:48:03.240
It's just an interesting choice,

3172
02:48:03.240 --> 02:48:04.660
and I don't know,

3173
02:48:04.660 --> 02:48:05.550
based on your persona,

3174
02:48:05.550 --> 02:48:07.830
that might be totally appropriate,

3175
02:48:07.830 --> 02:48:10.150
'cause I don't know her intimately.

3176
02:48:10.150 --> 02:48:11.716
She declined my Tinder.

3177
02:48:11.716 --> 02:48:13.720
(audience laughs)

3178
02:48:13.720 --> 02:48:15.620
I really gotta stop with that.

3179
02:48:15.620 --> 02:48:16.453
All right.

3180
02:48:17.590 --> 02:48:18.590
Thank you very much.

3181
02:48:19.710 --> 02:48:22.710
Ideally, if I had planned more time,

3182
02:48:22.710 --> 02:48:24.560
we would do a little bit more in depth.

3183
02:48:24.560 --> 02:48:26.660
I just have a few last minutes slides,

3184
02:48:26.660 --> 02:48:28.430
and then I'm gonna set you free,

3185
02:48:28.430 --> 02:48:30.620
as long as I hit the right button here.

3186
02:48:30.620 --> 02:48:34.150
Part of my job as an accessibility consultant

3187
02:48:34.150 --> 02:48:36.170
is not to tell you you can't do a thing.

3188
02:48:37.420 --> 02:48:39.370
I'm not supposed to be the one who says

3189
02:48:40.370 --> 02:48:42.850
you can't make that cool design.

3190
02:48:42.850 --> 02:48:44.230
I'm supposed to be the guy who makes sure

3191
02:48:44.230 --> 02:48:46.380
that you can do it and build it accessibly.

3192
02:48:47.590 --> 02:48:50.620
There's a risk when you build things following a checklist.

3193
02:48:50.620 --> 02:48:54.200
You can end up with something that is wildly inaccessible.

3194
02:48:54.200 --> 02:48:57.010
This ramp integrated into stairs

3195
02:48:57.010 --> 02:48:59.030
will kill somebody in a wheelchair,

3196
02:48:59.030 --> 02:49:00.860
either by slamming them into a wall

3197
02:49:00.860 --> 02:49:02.970
or sending them into the pit of crocodiles,

3198
02:49:02.970 --> 02:49:03.870
and people like me,

3199
02:49:03.870 --> 02:49:05.470
who take the stairs two at a time,

3200
02:49:05.470 --> 02:49:07.880
are gonna trip every few steps.

3201
02:49:07.880 --> 02:49:08.840
And, they got to that,

3202
02:49:08.840 --> 02:49:10.540
because they followed a checklist.

3203
02:49:11.760 --> 02:49:12.630
At the same time,

3204
02:49:12.630 --> 02:49:15.450
you have to remember that it's about maintenance.

3205
02:49:15.450 --> 02:49:17.630
So, you can have a ramp that's totally accessible,

3206
02:49:17.630 --> 02:49:20.510
but if you put a potted tree on it

3207
02:49:20.510 --> 02:49:21.930
in the middle of winter,

3208
02:49:21.930 --> 02:49:24.140
you've taken an affordance that you built

3209
02:49:24.140 --> 02:49:25.980
and made it completely inaccessible.

3210
02:49:27.020 --> 02:49:28.950
It's an ongoing process.

3211
02:49:28.950 --> 02:49:30.520
It's not a checklist,

3212
02:49:30.520 --> 02:49:32.330
and that's the thing I also want you

3213
02:49:32.330 --> 02:49:34.610
to keep in mind as you leave here.

3214
02:49:34.610 --> 02:49:35.730
I will upload the slides.

3215
02:49:35.730 --> 02:49:37.440
I will tweet the URL of them,

3216
02:49:37.440 --> 02:49:38.273
and that is it.

3217
02:49:38.273 --> 02:49:39.340
My talk is over,

3218
02:49:39.340 --> 02:49:41.490
I think just as the point that I negotiated.

3219
02:49:41.490 --> 02:49:42.541
So, bye.

3220
02:49:42.541 --> 02:49:45.708
(audience applauding)