1 00:00:03,562 --> 00:00:07,984 Super excited to introduce our next [INAUDIBLE] this session. 2 00:00:07,984 --> 00:00:12,361 He is a web developer, UX designer, and instructor, 3 00:00:12,361 --> 00:00:17,133 based in Portland, Oregon, here at treehouse, y'all. 4 00:00:17,133 --> 00:00:21,546 He is currently employed as a software development instructor on my team, 5 00:00:21,546 --> 00:00:22,812 this is my teammate. 6 00:00:22,812 --> 00:00:25,531 He believes in user centric design, and 7 00:00:25,531 --> 00:00:29,700 enforces those principles even when teaching development. 8 00:00:29,700 --> 00:00:36,843 He is a rock star in every way, he is my teammate, please welcome Anwar Montasir. 9 00:00:36,843 --> 00:00:38,400 >> Thank you, welcome. 10 00:00:38,400 --> 00:00:40,004 Thank you all for joining me today. 11 00:00:40,004 --> 00:00:42,085 Thank you for your interest in accessibility. 12 00:00:42,085 --> 00:00:44,871 Just a few other thank yous as we get going. 13 00:00:44,871 --> 00:00:48,907 I wanted to thank Ryan of course, founder CEO of treehouse, 14 00:00:48,907 --> 00:00:52,073 Liz Jackson has just done such an amazing work, 15 00:00:52,073 --> 00:00:57,632 getting all these engaging speakers together, connecting them to our audience. 16 00:00:57,632 --> 00:01:01,523 Our production team Jesse, Michael, Patrick, Tony, for 17 00:01:01,523 --> 00:01:06,042 the kind introduction, and Kayleen who will be monitoring our chat. 18 00:01:06,042 --> 00:01:10,691 I've been practicing this talk and it turns out I have a lot to say, 19 00:01:10,691 --> 00:01:15,089 but I'll leave as much time as I can at the end for questions, so 20 00:01:15,089 --> 00:01:17,594 don't hesitate to drop them on it. 21 00:01:17,594 --> 00:01:23,261 Double tap my presentation to enlarge, and very critical this next slide. 22 00:01:23,261 --> 00:01:29,187 This will be shared every so often in the chat, but a service called streamtext.net, 23 00:01:29,187 --> 00:01:33,504 is providing captions, so I know those benefit a lot of users. 24 00:01:33,504 --> 00:01:38,909 So, hopefully you have that link available if you need captions. 25 00:01:40,514 --> 00:01:41,710 All right, who am I? 26 00:01:41,710 --> 00:01:42,835 My name is Anwar. 27 00:01:42,835 --> 00:01:45,825 I'm a designer, a developer, a teacher at Treehouse. 28 00:01:45,825 --> 00:01:49,616 I've been here since October of last year, and like Dr. 29 00:01:49,616 --> 00:01:52,303 Toni said, I'm lucky to be on her team. 30 00:01:52,303 --> 00:01:54,763 I'm an accessibility advocate. 31 00:01:54,763 --> 00:01:59,428 In addition to writing and delivering curriculum at Treehouse, 32 00:01:59,428 --> 00:02:02,313 including our accessibility content, 33 00:02:02,313 --> 00:02:07,181 I launched a course called accessibility for UX designers in June. 34 00:02:07,181 --> 00:02:09,927 I'm currently working on accessibility for 35 00:02:09,927 --> 00:02:13,548 web developers that's scheduled to launch in September. 36 00:02:13,548 --> 00:02:16,619 I'm also auditing Treehouse's product for 37 00:02:16,619 --> 00:02:20,023 better accessibility for our student learners. 38 00:02:20,023 --> 00:02:23,707 And connect with me on LinkedIn, my address is up on the screen. 39 00:02:23,707 --> 00:02:27,895 I definitely would love to hear from who you are, 40 00:02:27,895 --> 00:02:30,969 what brought you to this festival. 41 00:02:30,969 --> 00:02:35,701 And yeah, Michelle gave a ton of great advice on crafting short 42 00:02:35,701 --> 00:02:41,079 messages in LinkedIn when you connect, so that'll be awesome to see. 43 00:02:41,079 --> 00:02:45,084 Where did I come from before Treehouse? 44 00:02:45,084 --> 00:02:48,871 I grew up in Arizona, went to school in the late 90s. 45 00:02:48,871 --> 00:02:54,230 I studied graphic design and painting, I taught myself HTML, pretty much to 46 00:02:54,230 --> 00:02:59,601 learn and accessibility on my own mostly on the job and doing my own research. 47 00:02:59,601 --> 00:03:03,569 I've been in the industry two decades, mostly in New York City, 48 00:03:03,569 --> 00:03:06,899 although I moved to Portland, Oregon four years ago. 49 00:03:06,899 --> 00:03:11,354 I worked in a bunch of different ad agencies as well as a freelancer, and 50 00:03:11,354 --> 00:03:14,637 I've always done a pretty broad variety of things. 51 00:03:14,637 --> 00:03:19,105 HTML, CSS, full stack, JavaScript development, 52 00:03:19,105 --> 00:03:22,791 as well as UX design and all that it entails. 53 00:03:22,791 --> 00:03:25,751 I've also been teaching for quite a while, 54 00:03:25,751 --> 00:03:30,162 as you can see up on the screen, eight colleges, two bootcamps. 55 00:03:30,162 --> 00:03:32,227 All of these prior to Treehouse. 56 00:03:32,227 --> 00:03:37,517 Now, the question I've pondered as an accessibility advocate, 57 00:03:37,517 --> 00:03:41,388 is out of these 10 schools, how many of them had 58 00:03:41,388 --> 00:03:46,311 accessibility curriculum built in already when I got there? 59 00:03:46,311 --> 00:03:48,395 One, okay. 60 00:03:48,395 --> 00:03:50,345 Not great at all, right? 61 00:03:50,345 --> 00:03:54,017 Okay, well, then you might ask at least, 62 00:03:54,017 --> 00:03:58,507 how many had accessibility training for teachers? 63 00:03:58,507 --> 00:04:00,426 Wow, okay. 64 00:04:00,426 --> 00:04:04,924 Disappointing, unacceptable, use whatever term you want. 65 00:04:04,924 --> 00:04:09,195 Our goal here should be creating graduates who can hit the ground running, right? 66 00:04:09,195 --> 00:04:13,977 That will consider disabled users from the beginning, the research, 67 00:04:13,977 --> 00:04:19,006 the brainstorming process, all the way through design and development. 68 00:04:19,006 --> 00:04:23,817 But how can they do that if we're not teaching, now as educators? 69 00:04:23,817 --> 00:04:28,166 This is not just my experience, in 2018, webAIM, 70 00:04:28,166 --> 00:04:33,545 if you don't know them, web accessibility in mind, webaim.org. 71 00:04:33,545 --> 00:04:37,827 They surveyed 724 Web Accessibility practitioners, 72 00:04:37,827 --> 00:04:41,495 asked them a bunch of interesting questions, but 73 00:04:41,495 --> 00:04:46,211 one that stood out to me was, did you learn anything substantive 74 00:04:46,211 --> 00:04:50,601 about web accessibility as part of your formal schooling? 75 00:04:50,601 --> 00:04:52,239 Nope, all right? 76 00:04:52,239 --> 00:04:55,252 Almost 93% said, no. 77 00:04:55,252 --> 00:05:02,164 So, what other conclusion was I to reach, then we're letting students down. 78 00:05:02,164 --> 00:05:06,075 Students are either learning accessibility on the job, 79 00:05:06,075 --> 00:05:10,315 they're educating themselves, doing their own research, 80 00:05:10,315 --> 00:05:15,547 coming into events like this one, or worse, maybe they're not learning. 81 00:05:15,547 --> 00:05:18,329 Even though as the slide suggests, 82 00:05:18,329 --> 00:05:22,791 disability can happen to anyone, anywhere, anytime. 83 00:05:22,791 --> 00:05:25,669 And I don't just mean permanent disability, 84 00:05:25,669 --> 00:05:29,593 although that's a very large community to be thinking about. 85 00:05:29,593 --> 00:05:34,360 The global report on disability suggests that this is over 1 86 00:05:34,360 --> 00:05:39,513 billion people worldwide, 15% of the earth's population. 87 00:05:39,513 --> 00:05:44,012 However, taking a look at it, on the screen there's 88 00:05:44,012 --> 00:05:49,121 a graphic from Microsoft inclusive design 101 toolkit. 89 00:05:49,121 --> 00:05:52,546 That's a free download and I highly recommend that. 90 00:05:52,546 --> 00:05:55,130 It shows all the reasons, for example, 91 00:05:55,130 --> 00:05:58,025 a person might need to use a phone one handed. 92 00:05:58,025 --> 00:06:01,673 And yes, it could be because of a permanent disability, 93 00:06:01,673 --> 00:06:03,580 a person who only has one arm. 94 00:06:03,580 --> 00:06:07,857 It could also be a temporary disability, oops, I broke my arm, 95 00:06:07,857 --> 00:06:12,546 it's in a cast, in a sling for the next two months, I'm lest handed. 96 00:06:12,546 --> 00:06:16,072 Or a situational disability, I am holding a baby, 97 00:06:16,072 --> 00:06:20,007 eventually I will put the baby down, but in the meantime I 98 00:06:20,007 --> 00:06:24,934 need to attend to this baby and solve some sort of task with my free hand. 99 00:06:24,934 --> 00:06:29,754 When you look at it this way, disability really affects all of us, and 100 00:06:29,754 --> 00:06:32,141 we all need accessible products. 101 00:06:32,141 --> 00:06:37,305 So I've given you, hopefully a long list of positives, 102 00:06:37,305 --> 00:06:43,339 why do we need accessible design, and it's the right thing to do. 103 00:06:43,339 --> 00:06:47,844 It's unfair to not allow everyone access to what we make. 104 00:06:47,844 --> 00:06:49,810 Hopefully that's why you're here. 105 00:06:49,810 --> 00:06:53,543 Hopefully you're interested in accessible designs because it's the right 106 00:06:53,543 --> 00:06:54,181 thing to do. 107 00:06:54,181 --> 00:06:59,122 It's also worth mentioning that there are a lot of negatives if you don't get 108 00:06:59,122 --> 00:06:59,807 it right. 109 00:06:59,807 --> 00:07:04,244 This first lawsuit I have up on the screen, is particularly famous, 110 00:07:04,244 --> 00:07:08,908 Domino's Pizza thought the Americans with Disability Act all the way to 111 00:07:08,908 --> 00:07:11,679 the Supreme Court, and thankfully lost. 112 00:07:11,679 --> 00:07:18,122 But there's a whole bunch of other famous accessibility lawsuits worth studying. 113 00:07:18,122 --> 00:07:22,987 I mentioned with Americans, the Americans with Disabilities Act. 114 00:07:22,987 --> 00:07:28,230 Those of you in America should know title 3 has been used to state that websites and 115 00:07:28,230 --> 00:07:30,971 apps are places of public accommodation. 116 00:07:30,971 --> 00:07:36,153 So in other words, it's treated the same as designing a building with no wheelchair 117 00:07:36,153 --> 00:07:40,759 ramp, is considered discriminatory against people with disabilities. 118 00:07:40,759 --> 00:07:44,922 Also, I should mention section 508. 119 00:07:44,922 --> 00:07:49,769 This states that federal agencies need to make their electronic information 120 00:07:49,769 --> 00:07:52,466 accessible to people with disabilities. 121 00:07:52,466 --> 00:07:56,543 And if you're thinking, well, I don't work for the federal government, 122 00:07:56,543 --> 00:08:00,750 this also includes everyone that does business with the federal government, 123 00:08:00,750 --> 00:08:02,871 so, actually a lot of organizations. 124 00:08:02,871 --> 00:08:04,877 If you're not in America, 125 00:08:04,877 --> 00:08:09,771 we'll talk about the more globally recognized rules in a moment. 126 00:08:09,771 --> 00:08:14,554 Also consider the cost of retrofitting for accessibility. 127 00:08:14,554 --> 00:08:19,322 When I say retrofitting, I mean, rather than getting it right the first time, 128 00:08:19,322 --> 00:08:23,248 somebody sue's you, and then you have to go back and make fixes. 129 00:08:23,248 --> 00:08:29,333 An organisation called Australia's Centre for Inclusive Design did a study, 130 00:08:29,333 --> 00:08:34,234 and they estimated that it can cost as much as 10,000 times 131 00:08:34,234 --> 00:08:39,071 the cost of just working it into your process the first, okay? 132 00:08:39,071 --> 00:08:42,772 Despite knowing all this, stuff like this keeps happening. 133 00:08:42,772 --> 00:08:45,855 You may have seen this, this was only last month. 134 00:08:45,855 --> 00:08:50,670 Twitter, one of the tech giants, rolls out a new feature, audio tweets. 135 00:08:50,670 --> 00:08:55,331 Okay, I don't wanna type out my tweet, or I'm somewhere where I can't, instead, 136 00:08:55,331 --> 00:08:58,914 I'll just record my voice saying a tweet, sounds neat, right? 137 00:08:58,914 --> 00:09:02,417 Except, they did not provide captions. 138 00:09:02,417 --> 00:09:04,974 Okay, so who couldn't access this content? 139 00:09:04,974 --> 00:09:09,967 Well, deaf and hard of hearing users, also users with ADHD, 140 00:09:09,967 --> 00:09:15,074 an auditory processing disorder, depend on those captions. 141 00:09:15,074 --> 00:09:18,943 Users in a noisy room, well, I can't hear my phone right now, 142 00:09:18,943 --> 00:09:21,439 how can I listen to this audio actually? 143 00:09:21,439 --> 00:09:26,773 Non native speakers, perhaps I hear it, but I'm not touching all the words. 144 00:09:26,773 --> 00:09:32,107 Twitter let all these audiences down, plus the black and white circle 145 00:09:32,107 --> 00:09:38,269 that you see on the right side of the screen, that was the user's profile image. 146 00:09:38,269 --> 00:09:41,204 It was blinking in time with the spoken text, 147 00:09:41,204 --> 00:09:45,761 and at times it was blinking more rapidly than three times per second, 148 00:09:45,761 --> 00:09:49,951 which is the above the threshold of what could set off seizures. 149 00:09:49,951 --> 00:09:54,891 So users from the seizures were also at risk from the speech. 150 00:09:54,891 --> 00:09:59,373 And you ask, how does this happen in 2020? 151 00:09:59,373 --> 00:10:04,109 How do we get that One of the key points 152 00:10:04,109 --> 00:10:08,931 of my talk here is the idea that empathy isn't enough. 153 00:10:08,931 --> 00:10:13,919 When I built my script draft for Accessibility for UX Designers, and 154 00:10:13,919 --> 00:10:19,691 it changed a lot after the draft, but when I put it together, I did my research. 155 00:10:19,691 --> 00:10:22,265 I talked to some other people I knew in the field. 156 00:10:22,265 --> 00:10:25,336 But I was primarily driven by two things. 157 00:10:25,336 --> 00:10:29,079 One is the WCAG, if you don't know these, you should, 158 00:10:29,079 --> 00:10:31,876 Web Content Accessibility Guidelines. 159 00:10:31,876 --> 00:10:34,930 These are the universal standards that I mentioned. 160 00:10:34,930 --> 00:10:38,296 So it doesn't matter if you're in America or not. 161 00:10:38,296 --> 00:10:41,567 When you are building an app or product or website, 162 00:10:41,567 --> 00:10:47,062 you can judge what you've built against the Web Content Accessibility Guidelines. 163 00:10:47,062 --> 00:10:52,213 If you've met these guidelines, you probably have an accessible product, 164 00:10:52,213 --> 00:10:57,151 although it's still important to test this with actual disabled users. 165 00:10:57,151 --> 00:11:02,643 If you haven't met the guidelines, then your work is not complete. 166 00:11:02,643 --> 00:11:06,544 So I used the WCAG, I also used my own empathy for 167 00:11:06,544 --> 00:11:09,876 disabled users, and that's natural. 168 00:11:09,876 --> 00:11:13,401 Every UX program will stress the importance of empathy. 169 00:11:13,401 --> 00:11:19,538 You think about design deliverables, like personas that are rooted in empathy for 170 00:11:19,538 --> 00:11:23,231 users with experiences different than your own. 171 00:11:23,231 --> 00:11:24,831 I'm not here to say that's a bad thing. 172 00:11:24,831 --> 00:11:29,411 Empathy belongs in every UX designer's toolkit. 173 00:11:29,411 --> 00:11:33,953 But I don't depend on assistive technology. 174 00:11:33,953 --> 00:11:36,521 And there are limits to my own imagination. 175 00:11:36,521 --> 00:11:41,021 I can try imagining what it would be like to be blind or deaf or 176 00:11:41,021 --> 00:11:43,553 have a motor skills disability. 177 00:11:43,553 --> 00:11:48,404 And I could even test out, say, a screen reader on my own, 178 00:11:48,404 --> 00:11:53,066 a device that would read out web content to a blind user. 179 00:11:53,066 --> 00:11:55,490 That's still no substitute for 180 00:11:55,490 --> 00:11:59,541 asking disabled users about their own experiences. 181 00:11:59,541 --> 00:12:01,317 And so that's what I did. 182 00:12:01,317 --> 00:12:07,208 I have three users on the screen here, their LinkedIn profiles are shown. 183 00:12:07,208 --> 00:12:11,082 They would love to connect with you just as much as I would, 184 00:12:11,082 --> 00:12:14,735 Jennifer Nordell, Ricardo Rodriguez and Nina Tran. 185 00:12:14,735 --> 00:12:20,320 Jennifer, she's been getting the sort of shouts all week during this conference. 186 00:12:20,320 --> 00:12:22,609 She's awesome, I'm lucky to work with her. 187 00:12:22,609 --> 00:12:26,868 She's a student success specialist here at Treehouse, 188 00:12:26,868 --> 00:12:31,925 as well as I've had two other reviewers who looked over my script for 189 00:12:31,925 --> 00:12:35,313 language and accuracy of recommendations. 190 00:12:35,313 --> 00:12:40,339 I didn't want to speak for these users, so I had them craft their own bio. 191 00:12:40,339 --> 00:12:43,719 Apologies for reading for a moment. 192 00:12:43,719 --> 00:12:47,182 My name is Jennifer Nordell, and I am disabled. 193 00:12:47,182 --> 00:12:48,171 When I was 18, 194 00:12:48,171 --> 00:12:52,637 I was involved in a car accident that left me with a traumatic brain injury. 195 00:12:52,637 --> 00:12:57,265 Among other things, this left me sensitive to light, sound and motion. 196 00:12:57,265 --> 00:13:00,866 I just don't see the world the way I did before the accident. 197 00:13:00,866 --> 00:13:03,392 I have auditory processing disorder. 198 00:13:03,392 --> 00:13:07,779 I can hear just fine, but I can't interpret speech very well. 199 00:13:07,779 --> 00:13:11,950 It's as if I took your spoken sentence and threw it in a blender. 200 00:13:11,950 --> 00:13:15,925 Because of this, I am heavily dependent upon closed captioning and 201 00:13:15,925 --> 00:13:18,169 transcripts to learn through video. 202 00:13:18,169 --> 00:13:22,148 And because of my sensitivity to light and motion, 203 00:13:22,148 --> 00:13:27,991 I typically enable the reduced motion accessibility option on my iPhone. 204 00:13:27,991 --> 00:13:32,722 So like I said, I work with Jennifer and I'm lucky to do so. 205 00:13:32,722 --> 00:13:37,593 The next two reviewers, I met them both after a conference like this one. 206 00:13:37,593 --> 00:13:43,335 It was an in-person conference, early in 2020, called Convey UX. 207 00:13:43,335 --> 00:13:49,005 And we were at a talk called Inclusive Research by Lauren Isaacson. 208 00:13:49,005 --> 00:13:52,783 Ricardo Rodriguez was born several months premature, 209 00:13:52,783 --> 00:13:57,521 and as a result, he experienced both physical and cognitive delays, 210 00:13:57,521 --> 00:14:01,474 and was unable to walk or speak until he was 11 years old. 211 00:14:05,828 --> 00:14:10,086 He has successfully completed high school, and works to advocate for 212 00:14:10,086 --> 00:14:14,433 disabled youth in foster care, along with people with disabilities. 213 00:14:14,433 --> 00:14:19,360 Despite being affected by several disabilities, such as limited vision and 214 00:14:19,360 --> 00:14:23,606 motor skills, today Ricardo currently manages the Journeymen of 215 00:14:23,606 --> 00:14:28,609 San Diego's website as a freelance web developer through the use of assistive 216 00:14:28,609 --> 00:14:33,653 technology such as magnification, high contrast mode, and text to speech. 217 00:14:33,653 --> 00:14:38,800 As a benefit of being born severely disabled, Ricardo possesses insights 218 00:14:38,800 --> 00:14:44,113 on various disabilities, and works on using that experience to help instill 219 00:14:44,113 --> 00:14:49,039 the importance of making products and services accessible to others. 220 00:14:49,039 --> 00:14:53,686 And finally, Nina Tran, who I also met at Convey UX. 221 00:14:53,686 --> 00:14:56,887 Nina says I'm from Seattle, Washington. 222 00:14:56,887 --> 00:15:01,080 I'm a senior at the University of Washington, and will be graduating with 223 00:15:01,080 --> 00:15:05,289 a bachelor's degree in disability studies and informatics next spring. 224 00:15:05,289 --> 00:15:08,885 My passion is accessibility with disability justice. 225 00:15:08,885 --> 00:15:13,119 I care about how to make everything inclusive, accessible, and 226 00:15:13,119 --> 00:15:17,123 equitable in a holistic way because of my life experiences and 227 00:15:17,123 --> 00:15:20,359 struggles navigating the world as a deaf person. 228 00:15:20,359 --> 00:15:25,455 So I want to share one of my favorite quotes by Mia Mingus with you all. 229 00:15:25,455 --> 00:15:29,887 I imagine a world where our organizing and activism is less segregated, 230 00:15:29,887 --> 00:15:33,231 where our movements and communities are accessible, 231 00:15:33,231 --> 00:15:37,391 and don't participate in the isolation of disabled communities. 232 00:15:37,391 --> 00:15:41,983 I imagine a place where we fight for whole and connected people, 233 00:15:41,983 --> 00:15:44,204 families, and communities. 234 00:15:44,204 --> 00:15:45,753 All right, together, 235 00:15:45,753 --> 00:15:51,109 these three reviewers challenged what I thought I knew about accessible design. 236 00:15:51,109 --> 00:15:53,259 And that's what I'm here to speak of today. 237 00:15:53,259 --> 00:15:58,090 I don't really have time to break down all of the WCAG recommendations, but 238 00:15:58,090 --> 00:15:59,841 you should check them out. 239 00:15:59,841 --> 00:16:04,570 I want to cover what I learned from these three kind reviewers, 240 00:16:04,570 --> 00:16:07,167 starting with some definitions. 241 00:16:07,167 --> 00:16:11,520 You've probably heard the terms accessible design, inclusive design, 242 00:16:11,520 --> 00:16:12,701 universal design. 243 00:16:12,701 --> 00:16:17,375 They've been talked about all week here at the Treehouse Festival. 244 00:16:17,375 --> 00:16:20,301 When I started my script, both Ricardo and 245 00:16:20,301 --> 00:16:24,709 Nina called me out because I wasn't using them that carefully. 246 00:16:24,709 --> 00:16:26,717 I think I was confusing the definitions. 247 00:16:26,717 --> 00:16:31,796 But there is a distinction, and they shouldn't be used interchangeably. 248 00:16:31,796 --> 00:16:36,587 Accessible design means specifically considering the needs of users 249 00:16:36,587 --> 00:16:38,057 with disabilities. 250 00:16:38,057 --> 00:16:42,418 Have you tested whether your product can be used by disabled users? 251 00:16:42,418 --> 00:16:47,909 If not, or if you don't know, you still have work to do. 252 00:16:47,909 --> 00:16:52,728 Now, accessible design sometimes has, or I should say often has 253 00:16:52,728 --> 00:16:57,384 universal benefits, and this is known as the curb cut effect. 254 00:16:57,384 --> 00:17:02,931 Once upon a time, elevated sidewalks did not have cuts in them. 255 00:17:02,931 --> 00:17:05,270 Users did not navigate sidewalks. 256 00:17:05,270 --> 00:17:10,857 Now, this was done specifically with accessibility in mind. 257 00:17:10,857 --> 00:17:14,907 However, it turns out they also make life easier for 258 00:17:14,907 --> 00:17:20,620 pedestrians pushing strollers or bicycles, wheeling a lot of luggage, 259 00:17:20,620 --> 00:17:24,878 using crutches, even distracted by a mobile device. 260 00:17:24,878 --> 00:17:30,132 Inclusive design means including people who might otherwise be marginalized. 261 00:17:30,132 --> 00:17:33,211 Inclusive design draws on the full range of human diversity. 262 00:17:33,211 --> 00:17:36,935 This is something that we value at Treehouse. 263 00:17:36,935 --> 00:17:41,534 Part of our mission is reflect the diversity of the USA. 264 00:17:41,534 --> 00:17:46,056 I've mentioned that disabled people are a substantial minority. 265 00:17:46,056 --> 00:17:52,761 But inclusive design also aims at anyone who is historically underserved, 266 00:17:52,761 --> 00:17:57,790 which could mean women, ethnic minorities, lesbian, 267 00:17:57,790 --> 00:18:01,996 gay, bisexual, trans, queer, plus, etc. 268 00:18:01,996 --> 00:18:06,493 Universal design, described by Ron Mace, one of its founders, 269 00:18:06,493 --> 00:18:11,644 as usable by all people to the greatest extent possible without the need for 270 00:18:11,644 --> 00:18:14,205 adaptation or specialized design. 271 00:18:14,205 --> 00:18:15,452 Sounds great, right? 272 00:18:15,452 --> 00:18:20,646 If you've created a simple, intuitive product that works for all audiences, 273 00:18:20,646 --> 00:18:26,166 children, the elderly, people of different body sizes, abilities, and needs. 274 00:18:26,166 --> 00:18:28,751 Sounds amazing, that's universal design. 275 00:18:28,751 --> 00:18:33,706 However, the participation of excluded communities and needs of 276 00:18:33,706 --> 00:18:38,938 disabled users must be prioritized over a one size fits all approach. 277 00:18:38,938 --> 00:18:41,806 Is your product truly universal, or 278 00:18:41,806 --> 00:18:46,347 have you excluded perspectives different than your own? 279 00:18:50,660 --> 00:18:55,875 All right, language, very important when we talk about disability. 280 00:18:55,875 --> 00:19:00,431 I've encountered a few talks lately where discussing this come up, 281 00:19:00,431 --> 00:19:04,528 identity-first language versus person-first language. 282 00:19:04,528 --> 00:19:08,938 Person-first as it sounds puts person-first in the description, 283 00:19:08,938 --> 00:19:12,137 person with disabilities, person with autism. 284 00:19:12,137 --> 00:19:16,591 Whereas identity-first puts, again, as it sounds, 285 00:19:16,591 --> 00:19:21,624 the description first, disabled person, autistic person. 286 00:19:21,624 --> 00:19:27,096 Now, I've read the recommendation a lot to stick to person-first language. 287 00:19:27,096 --> 00:19:30,538 But Jennifer brought up a really powerful question. 288 00:19:30,538 --> 00:19:35,509 She said that people with invisible disabilities might favor 289 00:19:35,509 --> 00:19:37,906 identity-first language. 290 00:19:37,906 --> 00:19:41,937 She wanted it to be known that not every disability is obvious when you look at 291 00:19:41,937 --> 00:19:42,505 a person. 292 00:19:42,505 --> 00:19:47,478 And sometimes, she's encountered people who were resistant to believing 293 00:19:47,478 --> 00:19:49,507 her that she had a disability. 294 00:19:49,507 --> 00:19:53,992 And she favors identity-first language for that reason. 295 00:19:53,992 --> 00:19:57,565 So when including disabled users in your research, 296 00:19:57,565 --> 00:20:00,334 excuse me, don't make an assumption. 297 00:20:00,334 --> 00:20:03,870 Ask them how they describe themselves and their abilities. 298 00:20:06,409 --> 00:20:11,306 All right, I mentioned that I met Nina Tran at Convey UX after 299 00:20:11,306 --> 00:20:14,197 a talk called Inclusive Research. 300 00:20:14,197 --> 00:20:18,173 And I was particularly drawn to her by the questions and 301 00:20:18,173 --> 00:20:23,115 statements that she made in the question and answer section after. 302 00:20:23,115 --> 00:20:25,556 She described deafness as a language minority, and 303 00:20:25,556 --> 00:20:27,285 I've never really heard this term. 304 00:20:27,285 --> 00:20:30,494 Nina identifies as deaf, not disabled. 305 00:20:30,494 --> 00:20:33,989 She considers herself a part of a language minority. 306 00:20:33,989 --> 00:20:40,286 If I spoke ASL, or American Sign Language, we would have no trouble communicating. 307 00:20:40,286 --> 00:20:45,295 She also noted in reviewing my script not to use the term hearing impaired, 308 00:20:45,295 --> 00:20:50,641 it was not communicated, excuse me, it was not created by the deaf community. 309 00:20:50,641 --> 00:20:54,165 It is not embraced by the deaf community, and 310 00:20:54,165 --> 00:20:57,982 the term impaired suggests a lack or a negative. 311 00:20:57,982 --> 00:21:02,829 So we will use deaf or hard of hearing, except as you can hopefully 312 00:21:02,829 --> 00:21:07,514 see at the bottom of my slide, I have little d deaf, big D deaf. 313 00:21:07,514 --> 00:21:12,531 I didn't know the difference between those either, but again I had Nina's help. 314 00:21:12,531 --> 00:21:17,216 Big D deaf describes someone who is actively engaged within the deaf 315 00:21:17,216 --> 00:21:21,748 community, and most likely communicates using sign language. 316 00:21:21,748 --> 00:21:25,964 Little d deaf, this person might be able to communicate orally, 317 00:21:25,964 --> 00:21:30,116 and doesn't have a strong connection with the deaf community. 318 00:21:30,116 --> 00:21:33,185 And hard of hearing describes mild to moderate hearing loss. 319 00:21:33,185 --> 00:21:38,535 The source of this information, which is linked in my slide, Genna Matheson. 320 00:21:38,535 --> 00:21:44,411 She ends with if you're unsure about how someone identifies themselves, 321 00:21:44,411 --> 00:21:49,269 just ask, and that's going to be a reoccurring theme today. 322 00:21:49,269 --> 00:21:50,805 Interaction etiquette, 323 00:21:50,805 --> 00:21:55,200 I mentioned this talk that I went to by Lauren Isaacson multiple times, and 324 00:21:55,200 --> 00:21:59,404 I actually just borrowed one of her slides because it's so important. 325 00:21:59,404 --> 00:22:02,963 When you involve a disabled person in your research, 326 00:22:02,963 --> 00:22:05,585 you need to make some accommodations. 327 00:22:05,585 --> 00:22:11,575 And I also highlight this slide because I got it wrong and I want to own up to it. 328 00:22:11,575 --> 00:22:16,731 I had just seen the slide and bullet point number one says speak directly to 329 00:22:16,731 --> 00:22:22,151 the person with the disability, not their interpreter or their companion. 330 00:22:22,151 --> 00:22:26,635 Then I met Nina and what did I do, but instantly, my head was drawn to 331 00:22:26,635 --> 00:22:31,121 the source of the sound, which was her sign language interpreter, 332 00:22:31,121 --> 00:22:35,784 which means that I was not looking Nina in the eye when she first spoke. 333 00:22:35,784 --> 00:22:40,450 All right, I messed up and I need to get better, and that's why this slide is so 334 00:22:40,450 --> 00:22:41,246 important. 335 00:22:46,159 --> 00:22:51,119 All right, plain language, I would say I've been an evangelist of plain 336 00:22:51,119 --> 00:22:55,199 language ever since I read the chapter Design for Scanning, 337 00:22:55,199 --> 00:22:58,807 Not Reading, in Steve Krug's Don't Make Me Think. 338 00:22:58,807 --> 00:23:03,206 If you're studying design, check out that book for sure. 339 00:23:03,206 --> 00:23:08,174 An excellent free resource is a federal government website called 340 00:23:08,174 --> 00:23:13,332 plainlanguage.gov, and I have samples from that site right here. 341 00:23:13,332 --> 00:23:17,529 And you can see that really any user would much rather read 342 00:23:17,529 --> 00:23:20,333 the column on the right than the left. 343 00:23:20,333 --> 00:23:25,588 In terms of tips for plain language and they're all over this website, 344 00:23:25,588 --> 00:23:28,487 keep your reading level appropriate. 345 00:23:28,487 --> 00:23:32,569 Don't speak at a higher reading level than you need to. 346 00:23:32,569 --> 00:23:34,544 Use short paragraphs, 347 00:23:34,544 --> 00:23:40,279 long paragraphs like the text on the left is visually intimidating. 348 00:23:40,279 --> 00:23:43,498 Bulleted lists, I look at the text on the right and 349 00:23:43,498 --> 00:23:46,123 the important stuff sticks out to me. 350 00:23:46,123 --> 00:23:51,783 After a flood, I need to watch out for the air, damp building materials, great, 351 00:23:51,783 --> 00:23:57,376 that's much more meaningful than me having to hunt through that text to find it. 352 00:23:57,376 --> 00:24:00,182 Keep it conversational, at Treehouse, 353 00:24:00,182 --> 00:24:04,037 we have to practice what we deliver out loud all the time. 354 00:24:04,037 --> 00:24:05,769 Do the same with your writing. 355 00:24:05,769 --> 00:24:10,881 If it sounds clunky, maybe it is, maybe it needs to be reworked. 356 00:24:10,881 --> 00:24:13,430 Plain language has universal benefits, but 357 00:24:13,430 --> 00:24:18,204 it's particularly important to those with cognitive disabilities and dementia. 358 00:24:20,819 --> 00:24:23,715 All right interface design. 359 00:24:23,715 --> 00:24:29,201 Now, the WC in WCAG is a little misleading, right? 360 00:24:29,201 --> 00:24:34,718 Web Content Accessibility Guidelines, web content suggests websites and 361 00:24:34,718 --> 00:24:38,250 apps, but, and Ricardo pointed this out to me, 362 00:24:38,250 --> 00:24:42,318 all digital interfaces are required to be accessible. 363 00:24:42,318 --> 00:24:47,039 Some of you have perhaps encountered a Redbox DVD rental 364 00:24:47,039 --> 00:24:50,360 kiosk at a pharmacy or a grocery store. 365 00:24:50,360 --> 00:24:55,300 In 2014, they agreed to a $1.2 million settlement 366 00:24:55,300 --> 00:25:00,354 because they hadn't made these accessible to blind users. 367 00:25:00,354 --> 00:25:04,149 I've heard rumors, the last, it's version 2.1, 368 00:25:04,149 --> 00:25:08,114 the last update to the WCAG came in September, 2018. 369 00:25:08,114 --> 00:25:13,802 I've heard rumors that, next time, they're gonna rename it to make this clearer, 370 00:25:13,802 --> 00:25:16,500 but I don't know if that's true or not. 371 00:25:16,500 --> 00:25:17,925 Interface elements, 372 00:25:17,925 --> 00:25:22,357 this is another one that I'd say I've been a long time evangelist of. 373 00:25:22,357 --> 00:25:26,499 Picture yourself using a mobile device, a touchscreen, and 374 00:25:26,499 --> 00:25:31,201 we can all picture ourselves struggling to tap something on the screen 375 00:25:31,201 --> 00:25:36,399 because the interface elements were either too small or too close together. 376 00:25:36,399 --> 00:25:42,281 The WCAG says your minimum target size should be a minimum of 44 pixels square, 377 00:25:42,281 --> 00:25:45,063 and that's a great recommendation. 378 00:25:45,063 --> 00:25:52,222 However, Jennifer pointed out that I had simply misread the recommendations. 379 00:25:52,222 --> 00:25:55,832 It doesn't actually say touch interfaces anywhere. 380 00:25:55,832 --> 00:26:00,466 So while you should get your touch interfaces correct, 381 00:26:00,466 --> 00:26:03,333 it also applies to mouse targets. 382 00:26:03,333 --> 00:26:07,685 Most of you will recognize what I have on screen here, 383 00:26:07,685 --> 00:26:12,521 that if you've ever opened an application window on a Mac, 384 00:26:12,521 --> 00:26:17,860 there's a red close, a yellow minimize, and a green maximize. 385 00:26:17,860 --> 00:26:23,773 But these are only 16 pixels in size, which means Jennifer can't use them. 386 00:26:23,773 --> 00:26:28,677 Anyone who has trouble making precise movements with a mouse 387 00:26:28,677 --> 00:26:32,727 is going to find that these are too small to click. 388 00:26:32,727 --> 00:26:35,647 So that means, it's not only touch targets, and 389 00:26:35,647 --> 00:26:40,248 it also means that Apple is not following its own recommendation in this case. 390 00:26:43,106 --> 00:26:47,383 Now, I've built and designed a lot of websites, and 391 00:26:47,383 --> 00:26:50,993 I've tested a lot of them for screen reader, 392 00:26:50,993 --> 00:26:54,997 a device that reads content aloud to a blind user. 393 00:26:54,997 --> 00:26:57,859 And you'll hear these recommendations all the time. 394 00:26:57,859 --> 00:27:02,363 Provide alt descriptions for your image. 395 00:27:02,363 --> 00:27:05,551 Here's a woman playing basketball, right? 396 00:27:05,551 --> 00:27:08,433 Well, I will describe this woman playing basketball, 397 00:27:08,433 --> 00:27:10,163 throwing the ball into the hoop. 398 00:27:10,163 --> 00:27:14,070 Now someone who can't see the image will understand it. 399 00:27:14,070 --> 00:27:18,017 However, I have not tested enough for screen magnifiers, and 400 00:27:18,017 --> 00:27:20,186 I feel like this gets overlooked. 401 00:27:20,186 --> 00:27:25,002 There's a graphic on the screen right now, indicating a site called 402 00:27:25,002 --> 00:27:29,746 Bureau of Internet Accessibility and what it looks like zoomed in. 403 00:27:29,746 --> 00:27:33,960 Many low vision users like Ricardo rely on screen 404 00:27:33,960 --> 00:27:37,567 magnifiers used to enlarge web content. 405 00:27:37,567 --> 00:27:41,144 Accessible design for screen magnifiers means your 406 00:27:41,144 --> 00:27:45,532 user shouldn't have to scroll horizontally to read your text or 407 00:27:45,532 --> 00:27:50,181 struggle to use your navigation, even when zoomed in at 200%. 408 00:27:50,181 --> 00:27:55,285 I know I'm guilty of not testing this enough, but having met Ricardo and 409 00:27:55,285 --> 00:28:00,054 observed him using his phone and having gone through these slides, 410 00:28:00,054 --> 00:28:03,665 I don't intend to make this mistake in the future. 411 00:28:09,158 --> 00:28:13,560 Keyboard navigation, not every user is capable of using a mouse or 412 00:28:13,560 --> 00:28:14,896 a touchscreen, and 413 00:28:14,896 --> 00:28:20,101 it's possible that they will be navigating your site purely with a keyboard. 414 00:28:20,101 --> 00:28:25,276 If that's the case, focus indicators are incredibly important. 415 00:28:25,276 --> 00:28:29,733 One of the more maddening experiences I've had as a college teacher is as 416 00:28:29,733 --> 00:28:34,274 recently as 2018, I inherited another instructor's curriculum. 417 00:28:34,274 --> 00:28:39,620 I want to say it was a JavaScript course, who recommended how to use 418 00:28:39,620 --> 00:28:46,320 CSS to turn focus indicators off because they're distracting, absolutely not. 419 00:28:46,320 --> 00:28:49,100 Picture yourself holding a mouse, 420 00:28:49,100 --> 00:28:54,482 trying to select items on the screen, and you can't see the cursor. 421 00:28:54,482 --> 00:28:57,980 How would you know what you were selecting, what you were doing? 422 00:28:57,980 --> 00:29:03,645 This would be a similar situation if you were trying to navigate with the keyboard 423 00:29:03,645 --> 00:29:09,244 and focus indicators, which show the currently selected element was hidden. 424 00:29:09,244 --> 00:29:14,230 A light blue indicator is used by default, it's pretty thin. 425 00:29:14,230 --> 00:29:16,211 I recommend making it more prominent. 426 00:29:18,521 --> 00:29:23,696 Jennifer pointed out that you really need to combine principles to get this right. 427 00:29:23,696 --> 00:29:26,806 I haven't really talked about color contrast anywhere, 428 00:29:26,806 --> 00:29:29,795 it's actually one of the more famous WCAG principles. 429 00:29:29,795 --> 00:29:36,172 Make sure that your foreground and background color have enough contrast. 430 00:29:36,172 --> 00:29:40,946 Here's a case where hm, didn't really work out with the focus indicators. 431 00:29:40,946 --> 00:29:45,476 Jennifer sent me two screenshots trying to navigate Apple's 432 00:29:45,476 --> 00:29:48,684 accessibility options in light mode. 433 00:29:48,684 --> 00:29:51,272 Look at that lovely focus indicator. 434 00:29:51,272 --> 00:29:56,577 It's bold, and it's highlighted, Enable Sticky Keys, plenty of contrast. 435 00:29:56,577 --> 00:30:01,590 Then I get into dark mode, I have no idea what's highlighted now. 436 00:30:01,590 --> 00:30:06,440 Jennifer didn't know either, and therefore she can't use dark mode on her Mac. 437 00:30:06,440 --> 00:30:12,596 I'm not picking on Apple, it may look like I am from these last couple of options. 438 00:30:12,596 --> 00:30:17,534 Apple actually has a tremendous commitment to accessibility, but 439 00:30:17,534 --> 00:30:20,921 like anyone, they always have more to learn. 440 00:30:20,921 --> 00:30:23,006 Keyboard traps. 441 00:30:23,006 --> 00:30:26,915 I knew about this, I just didn't know the term as developed. 442 00:30:26,915 --> 00:30:31,929 Sure you test, and test the more your product using only a keyboard, 443 00:30:31,929 --> 00:30:35,999 and make sure your cursor doesn't get stuck anywhere. 444 00:30:35,999 --> 00:30:40,063 And if your application provides keyboard shortcuts, 445 00:30:40,063 --> 00:30:44,479 that's tremendously helpful for your keyboard audience. 446 00:30:44,479 --> 00:30:49,102 But make sure that you make the shortcuts easy to learn, and 447 00:30:49,102 --> 00:30:51,703 the documentation easy to find. 448 00:30:51,703 --> 00:30:53,851 And there you go, Apple has actually done this as well. 449 00:30:53,851 --> 00:30:58,912 I'm looking at Mac accessibility shortcuts from their accessibility website. 450 00:31:00,924 --> 00:31:01,769 Forms. 451 00:31:01,769 --> 00:31:04,988 This is a place where lots goes wrong. 452 00:31:04,988 --> 00:31:07,253 Reduced cognitive load. 453 00:31:07,253 --> 00:31:11,526 I think this is your big test of, am I building a successful form? 454 00:31:11,526 --> 00:31:16,217 Jamie Rene Williams spoke earlier this week in a talk called, 455 00:31:16,217 --> 00:31:20,904 day in the life of the UX designer, and I noticed that phrase, 456 00:31:20,904 --> 00:31:24,711 I need to work every day to reduce cognitive load. 457 00:31:24,711 --> 00:31:29,733 So we have some bullet points on the screen, minimize questions per screen, 458 00:31:29,733 --> 00:31:33,595 making sure the purpose of each part of the form is obvious, 459 00:31:33,595 --> 00:31:35,463 clearly label form inputs. 460 00:31:35,463 --> 00:31:40,432 Again, this tremendously benefits your audience with cognitive 461 00:31:40,432 --> 00:31:42,569 disabilities or dementia. 462 00:31:42,569 --> 00:31:47,658 And Ricardo wanted to stress that, it's much more important that you 463 00:31:47,658 --> 00:31:53,455 be specific and accurate with your labels then they provide short text labels. 464 00:31:53,455 --> 00:31:57,151 Designers love short text labels, they're easy to fit in mobile. 465 00:31:57,151 --> 00:32:00,857 But it's much more important people can understand your form. 466 00:32:03,061 --> 00:32:05,267 Avoid unnecessary questions. 467 00:32:05,267 --> 00:32:07,423 This will shorten your form. 468 00:32:07,423 --> 00:32:10,745 Great, we just said minimize questions per screen. 469 00:32:10,745 --> 00:32:14,563 But also one potential source of frustration 470 00:32:14,563 --> 00:32:17,787 out there is questions about gender. 471 00:32:17,787 --> 00:32:24,269 If you have an extremely compelling reason to ask about gender, 472 00:32:24,269 --> 00:32:28,231 maybe it's a demographics question, 473 00:32:28,231 --> 00:32:35,675 then you're going to need to provide either plenty of response options, 474 00:32:35,675 --> 00:32:40,254 or an input where a user can type of their own. 475 00:32:40,254 --> 00:32:43,856 And you need to assure the user their information will be private, 476 00:32:43,856 --> 00:32:45,155 anonymous, and safe. 477 00:32:45,155 --> 00:32:49,642 Otherwise you run the risk of excluding non-binary users or 478 00:32:49,642 --> 00:32:54,660 people who just don't feel comfortable answering that question. 479 00:32:54,660 --> 00:32:58,256 Making the required fields obvious, as I said, 480 00:32:58,256 --> 00:33:03,180 one key to making a successful form, is reducing cognitive load. 481 00:33:03,180 --> 00:33:09,953 I would say the other is minimize errors, make sure that users know what is obvious. 482 00:33:09,953 --> 00:33:16,031 And I built a food delivery form as my demo for accessibility for UX designers. 483 00:33:16,031 --> 00:33:18,879 Careful with what you make required. 484 00:33:18,879 --> 00:33:23,037 If you are a phone, excuse me, a food delivery service, 485 00:33:23,037 --> 00:33:26,849 perfectly reasonable to ask for a phone number, but 486 00:33:26,849 --> 00:33:32,851 if you require the phone number, you might be excluding deaf or nonverbal users. 487 00:33:32,851 --> 00:33:36,081 So think about, can you accept an alternate contact? 488 00:33:36,081 --> 00:33:39,955 Active versus inactive links. 489 00:33:39,955 --> 00:33:44,737 So I had a great discussion with Hope Armstrong, one of my colleagues, 490 00:33:44,737 --> 00:33:48,659 those of you who study UX at Treehouse, you know her well. 491 00:33:48,659 --> 00:33:53,816 The WCAG doesn't actually enforce making your inactive links 492 00:33:53,816 --> 00:33:59,273 the links to come that you can't click, yet have a high contrast. 493 00:33:59,273 --> 00:34:01,034 But does that mean you shouldn't do it? 494 00:34:01,034 --> 00:34:06,653 Don't your low vision users deserve to know what's coming on your form? 495 00:34:08,871 --> 00:34:14,178 Placeholder text, the practice on the left is a terrible practice, 496 00:34:14,178 --> 00:34:17,752 using placeholders to label your form input. 497 00:34:17,752 --> 00:34:21,904 It seems like a space saver, but as soon as the user starts typing, 498 00:34:21,904 --> 00:34:26,373 they disappear, and then you can't remember what it was filling out. 499 00:34:26,373 --> 00:34:30,602 Placeholders are also a contrast challenge, make them to light, 500 00:34:30,602 --> 00:34:36,127 low vision users can't see them, too dark and they look like pre-filled form field. 501 00:34:36,127 --> 00:34:39,439 So, stay away from them wherever you can. 502 00:34:39,439 --> 00:34:40,479 You might say, 503 00:34:40,479 --> 00:34:45,451 couldn't I use placeholders to suggest before adding of a phone number? 504 00:34:45,451 --> 00:34:49,503 You could, but then if the user starts typing, and 505 00:34:49,503 --> 00:34:53,187 they get destructive, a phone call comes in. 506 00:34:53,187 --> 00:34:56,878 Or again may have a cognitive disability or dementia, 507 00:34:56,878 --> 00:35:00,097 how are they supposed to remember that format? 508 00:35:00,097 --> 00:35:04,452 Developers they recommend input masks which just shapes the data 509 00:35:04,452 --> 00:35:07,705 to the correct format as the user begins typing. 510 00:35:09,490 --> 00:35:13,918 Okay, I believe this is my last category, but this is a dear one, 511 00:35:13,918 --> 00:35:15,538 the Treehouse videos. 512 00:35:15,538 --> 00:35:21,679 Avoid sounds that autoplay, the WCAG doesn't say this, the WCAG just says, 513 00:35:21,679 --> 00:35:26,907 provide a mechanism for pausing the sound or lowering the volume. 514 00:35:26,907 --> 00:35:30,393 And Jennifer, Nina, and Ricardo, all said, no, 515 00:35:30,393 --> 00:35:35,321 just don't make them autoplay for three different reasons, actually. 516 00:35:35,321 --> 00:35:39,885 Ricardo said, it's tough to use a screen reader while the video is autoplaying, 517 00:35:39,885 --> 00:35:42,146 how can you listen to the screen reader? 518 00:35:42,146 --> 00:35:46,858 Jennifer, who is sensitive to sound and motion says she sometimes 519 00:35:46,858 --> 00:35:50,830 gets uncomfortable or even ill by an unexpected sound. 520 00:35:50,830 --> 00:35:55,129 And Nina pointed out that often users will want to make adjustments 521 00:35:55,129 --> 00:35:57,631 to the captions before hitting play. 522 00:35:57,631 --> 00:36:03,956 So, I would say, go beyond the WCAG in this case, don't autoplay videos. 523 00:36:03,956 --> 00:36:09,519 If you're curious how the browser will handle it by default, this is an odd one. 524 00:36:09,519 --> 00:36:14,000 Firefox in their mission statement prizes user control. 525 00:36:14,000 --> 00:36:16,829 Firefox will not autoplay videos, and 526 00:36:16,829 --> 00:36:21,728 you actually as a user have to go change that setting, if you cared. 527 00:36:21,728 --> 00:36:26,461 Chrome, not only autoplay videos, if you're on a site where you've 528 00:36:26,461 --> 00:36:30,635 played videos before, they will continue the autoplay, but 529 00:36:30,635 --> 00:36:34,746 you as a user don't have the option anymore to turn that off. 530 00:36:34,746 --> 00:36:38,911 So, developers don't depend on the browser to handle this. 531 00:36:38,911 --> 00:36:44,895 Captions, not just for deaf and hard of hearing audiences. 532 00:36:44,895 --> 00:36:50,174 I'm sure a ton of you watch treehouses videos with the captions on, I always do. 533 00:36:50,174 --> 00:36:52,574 They're helpful in a noisy environment, 534 00:36:52,574 --> 00:36:57,451 they're helpful to understand difficult vocabulary, they're helpful for folks. 535 00:36:57,451 --> 00:37:02,184 Jennifer pointed out that also the WCAG captions guideline doesn't 536 00:37:02,184 --> 00:37:06,932 mention auditory processing disorder, I didn't know about this. 537 00:37:06,932 --> 00:37:11,122 It's not about hearing but about how the brain understands speech. 538 00:37:11,122 --> 00:37:15,214 Jennifer said in her bio, she can hear you just fine, but 539 00:37:15,214 --> 00:37:19,411 distinguishing sounds sometimes they get scrambled on. 540 00:37:19,411 --> 00:37:23,824 And this actually affects 5% of school aged children, so 541 00:37:23,824 --> 00:37:26,305 not an insignificant augments. 542 00:37:26,305 --> 00:37:28,334 When designing captions, 543 00:37:28,334 --> 00:37:32,836 fortunately treehouse had a lot of good practices in place. 544 00:37:32,836 --> 00:37:37,535 The white text on a black background provides great contrast, 545 00:37:37,535 --> 00:37:40,381 no more than two lines of text at once. 546 00:37:40,381 --> 00:37:45,228 And treehouse's captions are draggable, you can move them out of the way if 547 00:37:45,228 --> 00:37:48,504 they're covering something critical on screen. 548 00:37:48,504 --> 00:37:54,288 Two changes I did have to make when I got here, one was implementing an instructor 549 00:37:54,288 --> 00:37:59,991 led caption review, because no service will ever provide 100% accuracy, 550 00:37:59,991 --> 00:38:03,842 and key information sometimes gets mistranslated. 551 00:38:03,842 --> 00:38:09,925 And also Nina pointed out I need to work hard to identify who is speaking. 552 00:38:09,925 --> 00:38:14,161 Here's a screenshot from my video with three speakers. 553 00:38:14,161 --> 00:38:17,984 Mark Sutton is demonstrating how to use a screen reader, 554 00:38:17,984 --> 00:38:20,781 then the screen reader begins speaking. 555 00:38:20,781 --> 00:38:24,200 And then I resumes speaking. 556 00:38:24,200 --> 00:38:29,745 Our caption service here at treehouse, I believe it's called CLO 24, 557 00:38:29,745 --> 00:38:33,054 does not identify speakers by default, and 558 00:38:33,054 --> 00:38:36,821 Nina really struggled with how to use our videos. 559 00:38:36,821 --> 00:38:43,270 Okay, I will leave you with a list of resources, there are plenty more, 560 00:38:43,270 --> 00:38:49,194 but definitely should know the A11Y project deep, and WebAIM, 561 00:38:49,194 --> 00:38:54,413 as well as some potential resources for further reading. 562 00:38:54,413 --> 00:38:56,451 These get updated all the time. 563 00:38:56,451 --> 00:39:00,220 And I think I'm ready for questions. 564 00:39:04,066 --> 00:39:09,181 Do we need to know advance coding to make accessible digital products? 565 00:39:09,181 --> 00:39:11,094 That's a really good question. 566 00:39:11,094 --> 00:39:14,026 A lot of, hoops, just flip slack, okay, 567 00:39:14,026 --> 00:39:19,170 a lot of accessibility actually comes when you're learning HTML basics. 568 00:39:19,170 --> 00:39:22,329 So that's the best way to get accessibility, right? 569 00:39:22,329 --> 00:39:27,199 If you read semantic HTML carefully, there's an article, 570 00:39:27,199 --> 00:39:33,117 there's an author named Shayhmwe, how that I look at his articles a lot, 571 00:39:33,117 --> 00:39:39,244 s-h-a-y-h-m-w-e, how to use semantic HTML meaningfully and why. 572 00:39:39,244 --> 00:39:44,688 If you get the basics of HTML right, you are very well on your way. 573 00:39:44,688 --> 00:39:49,935 The other key part is, once you do get into advanced JavaScript, you do have 574 00:39:49,935 --> 00:39:55,598 to be cautious, or sometimes JavaScript will update more content on the screen. 575 00:39:55,598 --> 00:40:00,737 And the browser isn't built to notify users of assistive technology, 576 00:40:00,737 --> 00:40:04,771 but something changed on the screen using JavaScript. 577 00:40:04,771 --> 00:40:08,310 So there are some advanced features as well, but I would say definitely. 578 00:40:08,310 --> 00:40:11,076 Get to know semantic HTML inside out. 579 00:40:13,342 --> 00:40:17,614 What web and UX design would you like to see more websites roll out? 580 00:40:17,614 --> 00:40:19,988 What are the most common issues you see? 581 00:40:19,988 --> 00:40:29,467 Hmm, that's an interesting question. 582 00:40:29,467 --> 00:40:34,573 I think really what I want to see is more all members of 583 00:40:34,573 --> 00:40:40,276 the team being equally passionate about accessibility. 584 00:40:40,276 --> 00:40:45,531 I mentioned that I am attempting to audit Treehouse's product. 585 00:40:45,531 --> 00:40:48,694 But I should mention, it's not just my job. 586 00:40:48,694 --> 00:40:52,270 And if it were just my job, it would never go right. 587 00:40:52,270 --> 00:40:55,449 I'm also here to educate my team members, and 588 00:40:55,449 --> 00:41:01,010 I've had all sorts of team members since I've been here fix things on their own. 589 00:41:01,010 --> 00:41:05,964 So I noticed the contrast on this animation I just built was off and 590 00:41:05,964 --> 00:41:06,875 I fixed it. 591 00:41:06,875 --> 00:41:12,461 So this is what I want to see is equal passion from every member of the team. 592 00:41:14,244 --> 00:41:18,694 How do you promote accessibility in your workspace when they have no 593 00:41:18,694 --> 00:41:21,436 accessibility background guidelines? 594 00:41:21,436 --> 00:41:26,236 Well, you already heard a talk from Michelle Zelman this morning, 595 00:41:26,236 --> 00:41:27,505 she's amazing. 596 00:41:27,505 --> 00:41:34,637 And yeah, I think the types of conference talks we've had at the festival, 597 00:41:34,637 --> 00:41:39,436 we're wanting to do similar things at Treehouse. 598 00:41:39,436 --> 00:41:41,531 I think that inclusiveness and 599 00:41:41,531 --> 00:41:45,892 diversity training is very important no matter where you work. 600 00:41:45,892 --> 00:41:49,624 I think accessibility training is also important. 601 00:41:52,197 --> 00:41:57,956 Where can we gain skills accreditation training for or accessibility? 602 00:41:57,956 --> 00:42:03,109 Well in terms of learnings, I think the places 603 00:42:03,109 --> 00:42:07,616 on the screen are a great place to start. 604 00:42:07,616 --> 00:42:10,784 In terms of accreditation, I honestly don't know. 605 00:42:10,784 --> 00:42:14,682 I think Nielsen Norman Group is potentially a good place to go for that. 606 00:42:14,682 --> 00:42:19,624 I do have some folks, some former colleagues and former students of mine 607 00:42:19,624 --> 00:42:24,337 who have actually gotten accreditation from Nielsen Norman Group. 608 00:42:24,337 --> 00:42:28,885 And since they have a heavy emphasis on accessibility, 609 00:42:28,885 --> 00:42:32,959 that's potentially a way to get accreditation. 610 00:42:32,959 --> 00:42:38,102 I'll say it, I don't have any accreditation on it, I haven't gone 611 00:42:38,102 --> 00:42:43,887 through the Nielsen Norman conference, but I've heard it's really cool. 612 00:42:45,706 --> 00:42:50,890 What are some accessibility issues and trends in AR and VR? 613 00:42:50,890 --> 00:42:54,324 If you find out the answer, I've asked you to connect with me on LinkedIn. 614 00:42:54,324 --> 00:42:59,562 If you find out the answer, come back and I would love to take your course on it. 615 00:42:59,562 --> 00:43:04,201 I admit, I don't know anything about AR or VR. 616 00:43:04,201 --> 00:43:08,754 I would have to imagine there are plenty of accessibility issues. 617 00:43:08,754 --> 00:43:13,877 I don't think the right now is really built to handle those things. 618 00:43:13,877 --> 00:43:19,946 So yeah, it's an excellent question and I'm really glad you're asking that, 619 00:43:19,946 --> 00:43:25,302 and if more people start asking it hopefully accessibility will emerge 620 00:43:25,302 --> 00:43:30,228 faster with AR and VR than it did with web design and development. 621 00:43:30,228 --> 00:43:34,262 But that's a good question, I don't know. 622 00:43:34,262 --> 00:43:39,481 How is your approach to accessibility changed over time? 623 00:43:39,481 --> 00:43:43,911 I honestly think a big catalyst was the launch of HTML5, 624 00:43:43,911 --> 00:43:48,998 which was, I can't remember, the mid 2000s or something. 625 00:43:48,998 --> 00:43:54,726 Before we had semantic HTML, I mentioned already using your HTML tags 626 00:43:54,726 --> 00:44:00,457 descriptively to accurately describe what's going on in your page. 627 00:44:00,457 --> 00:44:05,446 We didn't use to have this, and a lot of websites were built in Flash. 628 00:44:05,446 --> 00:44:09,862 I was a Flash developer for a long time in the mid 2000s. 629 00:44:09,862 --> 00:44:13,191 Those were not accessible in any way, shape, or form. 630 00:44:13,191 --> 00:44:19,695 So once HTML5 came out and I said, really, I can actually make this usable for 631 00:44:19,695 --> 00:44:23,635 broader audiences, that sparked by interest. 632 00:44:23,635 --> 00:44:30,370 But as this talk hopefully indicates, I'm constantly trying to learn new things. 633 00:44:30,370 --> 00:44:38,864 And my knowledge is nowhere near complete as the AR VR question just indicated. 634 00:44:38,864 --> 00:44:43,984 What are some of the tools available to test the accessibility of a website or 635 00:44:43,984 --> 00:44:45,271 web application? 636 00:44:45,271 --> 00:44:49,856 Great question, Google Lighthouse, which you will, 637 00:44:49,856 --> 00:44:55,914 I believe it's found built into your Google browser when you do inspect. 638 00:44:55,914 --> 00:44:57,809 You have a bunch of options there. 639 00:44:57,809 --> 00:45:04,193 Google Lighthouse will audit your product for accessibility and 640 00:45:04,193 --> 00:45:09,311 also performance, how fast is this thing loading. 641 00:45:09,311 --> 00:45:15,320 There's also a plugin called Axe, A-X-E, I believe it's made by the organization D. 642 00:45:15,320 --> 00:45:19,547 Axe is great for websites or apps that use a lot of 643 00:45:19,547 --> 00:45:24,222 JavaScript because Axe you can rerun it every time. 644 00:45:24,222 --> 00:45:27,975 JavaScript runs and check the accessibility again. 645 00:45:27,975 --> 00:45:31,321 So those are great tools, and I'm glad you asked that question. 646 00:45:31,321 --> 00:45:35,695 I will close with accessibility audits. 647 00:45:35,695 --> 00:45:36,841 They're awesome. 648 00:45:36,841 --> 00:45:41,227 HTML5.validator.edu, that's the third one. 649 00:45:41,227 --> 00:45:46,448 I use that a lot just to check the validity of my HTML itself. 650 00:45:46,448 --> 00:45:52,944 Those only catch I think less than half of the potential issues you can have. 651 00:45:52,944 --> 00:45:57,470 So do run those audits, they're amazing, but it's not a substitute for 652 00:45:57,470 --> 00:45:58,427 user testing. 653 00:46:01,646 --> 00:46:05,435 Question on the forums and avoiding unnecessary questions. 654 00:46:05,435 --> 00:46:10,907 How do you draw the line for gathering gender and demographic information? 655 00:46:10,907 --> 00:46:16,553 I think most of the time, if you sit and ask yourself this question, 656 00:46:16,553 --> 00:46:20,221 and it really could apply to phone numbers, 657 00:46:20,221 --> 00:46:24,501 email addresses, it could apply to any question. 658 00:46:24,501 --> 00:46:29,261 Just sit and think to yourself or discuss with your organization, 659 00:46:29,261 --> 00:46:31,813 do I really need this information? 660 00:46:31,813 --> 00:46:33,938 My default is kind of no. 661 00:46:33,938 --> 00:46:36,698 And then I have to convince myself, 662 00:46:36,698 --> 00:46:40,562 here are really strong reasons that we need this. 663 00:46:40,562 --> 00:46:43,839 Because I think every user objects in some way. 664 00:46:43,839 --> 00:46:47,119 Phone numbers, why did they need this phone number? 665 00:46:47,119 --> 00:46:51,974 I don't want whichever organization calling me, that's weird. 666 00:46:51,974 --> 00:46:56,545 So we've all felt that way designing forms. 667 00:46:56,545 --> 00:46:59,992 Gender, yeah, I think you would really know 668 00:46:59,992 --> 00:47:04,723 that your organization depends on having this information. 669 00:47:04,723 --> 00:47:09,251 And if that's not the case, then great, you've shortened your form and 670 00:47:09,251 --> 00:47:12,848 you've also avoided making people feel uncomfortable. 671 00:47:12,848 --> 00:47:16,915 There are plenty of cases where people look to the form and 672 00:47:16,915 --> 00:47:20,157 they saw two radio buttons, male, female. 673 00:47:20,157 --> 00:47:23,590 This doesn't apply to me, and they couldn't complete the form. 674 00:47:23,590 --> 00:47:25,510 So we wanna still clear of that. 675 00:47:28,769 --> 00:47:32,980 What are your suggestions for someone working on a portfolio project and 676 00:47:32,980 --> 00:47:35,821 wants to showcase an accessibility case study? 677 00:47:35,821 --> 00:47:37,940 What should you include? 678 00:47:37,940 --> 00:47:39,321 That's an excellent question. 679 00:47:39,321 --> 00:47:43,349 A couple of speakers have actually mentioned this week the idea of 680 00:47:43,349 --> 00:47:48,561 an accomplishment journal, each week write down what you accomplished this week. 681 00:47:48,561 --> 00:47:51,417 And then when you build your portfolio or resume, 682 00:47:51,417 --> 00:47:53,601 you can highlight that information. 683 00:47:53,601 --> 00:47:57,401 I think it would depend on the accessibility study itself. 684 00:47:57,401 --> 00:48:01,235 One possibility could be you arrived somewhere and 685 00:48:01,235 --> 00:48:07,035 took a website that didn't have very good accessibility and you fixed it up. 686 00:48:07,035 --> 00:48:10,949 And that's probably a reasonably easy thing to document, 687 00:48:10,949 --> 00:48:14,638 you could just kind of do a before and after, all right. 688 00:48:14,638 --> 00:48:20,711 Before our videos lacked captions, after not only do our videos have captions, 689 00:48:20,711 --> 00:48:26,269 but here's all the things I did to ensure that they were useful captions. 690 00:48:26,269 --> 00:48:31,292 If you're starting a website from scratch and you just wanna make 691 00:48:31,292 --> 00:48:36,968 sure that it's accessible, I would say include that in your case study. 692 00:48:36,968 --> 00:48:40,984 A lot of portfolios say here's the finished products, 693 00:48:40,984 --> 00:48:45,776 now let me back up and this was my planning, this was my sketching. 694 00:48:45,776 --> 00:48:49,437 You could have a little section for accessibility and 695 00:48:49,437 --> 00:48:51,841 what I learned on the project. 696 00:48:51,841 --> 00:48:56,116 I actually didn't realize that screen magnifiers were important, but 697 00:48:56,116 --> 00:48:59,141 I showed my site to Ricardo and he couldn't use it. 698 00:48:59,141 --> 00:49:00,896 Here were the fixes I made. 699 00:49:02,633 --> 00:49:06,573 Can you explain the A, AA, AAA ranking system? 700 00:49:06,573 --> 00:49:07,747 Very good question. 701 00:49:07,747 --> 00:49:11,049 For those of you who don't get the context of that question, 702 00:49:11,049 --> 00:49:15,016 it's in my course that I made for Treehouse but it wasn't in any slides. 703 00:49:15,016 --> 00:49:17,719 Sorry, plugging it. 704 00:49:17,719 --> 00:49:22,817 So the tag recommendations are all A recommendations, 705 00:49:22,817 --> 00:49:26,080 which means really simple to meet. 706 00:49:26,080 --> 00:49:32,079 An example of a single A recommendation is sufficient color contrast or 707 00:49:32,079 --> 00:49:34,980 alt descriptions for your image, 708 00:49:34,980 --> 00:49:39,683 just like it should be no effort at all to get this right. 709 00:49:39,683 --> 00:49:44,076 AA would be a little bit tougher to implement, but 710 00:49:44,076 --> 00:49:48,379 you still definitely need to have these things. 711 00:49:48,379 --> 00:49:56,320 I feel like most of what applies to video captions actually falls under AA. 712 00:49:56,320 --> 00:50:01,527 And it might require an external service and it might require 713 00:50:01,527 --> 00:50:07,259 spending a little bit of money, but it's absolutely essential. 714 00:50:07,259 --> 00:50:12,966 I say if you are not at AA with your product, Your work is definitely not done. 715 00:50:12,966 --> 00:50:21,085 Triple A, Microsoft famously is committed to making all of their products triple A. 716 00:50:21,085 --> 00:50:24,310 Just like Apple, but it doesn't mean that they never get anything wrong. 717 00:50:24,310 --> 00:50:30,343 I think all of us make mistakes and we hold up and try to fix them. 718 00:50:30,343 --> 00:50:35,255 Triple A, an example actually is the captions that we 719 00:50:35,255 --> 00:50:39,404 are providing for this talk, captioning for 720 00:50:39,404 --> 00:50:44,539 a live presentation rather than pre-recorded video, 721 00:50:44,539 --> 00:50:49,256 that's even tougher and it qualifies as triple A. 722 00:50:49,256 --> 00:50:54,025 But with tag, it doesn't actually require a triple A, but go for 723 00:50:54,025 --> 00:50:55,598 it whenever you can. 724 00:50:55,598 --> 00:51:00,698 I mean, again, I think both Nina and Jennifer couldn't make use 725 00:51:00,698 --> 00:51:06,104 of this presentation Tag tree has not met the triple A requirements. 726 00:51:06,104 --> 00:51:10,413 So, whenever it is within your means to do so, 727 00:51:10,413 --> 00:51:15,614 I say yes, go above and beyond, get that triple A mark. 728 00:51:15,614 --> 00:51:19,226 Do you recommend using animation or staying away from it, 729 00:51:19,226 --> 00:51:21,520 from an accessibility standpoint? 730 00:51:21,520 --> 00:51:26,518 That's a really good question and it's led to some conversations 731 00:51:26,518 --> 00:51:30,535 with our animator Michael Myers, who's awesome and 732 00:51:30,535 --> 00:51:35,461 who has really embraced making his animations more accessible. 733 00:51:35,461 --> 00:51:41,088 Definitely one of the things to consider is blinking. 734 00:51:41,088 --> 00:51:44,493 If something is blinking more than three times per second, 735 00:51:44,493 --> 00:51:47,022 you absolutely need to stay away from that. 736 00:51:47,022 --> 00:51:50,106 And I already mentioned that Twitter got that wrong. 737 00:51:50,106 --> 00:51:55,096 Slack has a great accessibility feature that I hope gets embraced in 738 00:51:55,096 --> 00:51:56,506 a lot more places. 739 00:51:56,506 --> 00:52:01,524 If you go into your Slack preferences, there's an accessibility toolbar. 740 00:52:01,524 --> 00:52:06,340 And there's a checkbox that says disable animations and 741 00:52:06,340 --> 00:52:08,858 GIFs or something like that. 742 00:52:08,858 --> 00:52:14,800 But basically, a lot of users actually can't concentrate with animation going. 743 00:52:14,800 --> 00:52:18,565 Or like Jennifer said, the motion might make her kinda dizzy. 744 00:52:18,565 --> 00:52:23,565 So if you can provide that kind of feature in an app, reduce motion, 745 00:52:23,565 --> 00:52:27,714 Jennifer mentioned Apple has that, that's amazing. 746 00:52:27,714 --> 00:52:30,053 So it's a really good question. 747 00:52:30,053 --> 00:52:35,196 I would just say, be cautious with animation and 748 00:52:35,196 --> 00:52:40,601 interview some disabled users and get their info. 749 00:52:40,601 --> 00:52:44,368 When is it appropriate to image-caption on a common 750 00:52:44,368 --> 00:52:47,202 high traffic page like a landing page? 751 00:52:47,202 --> 00:52:52,680 I'm not entirely sure I understand the question. 752 00:52:52,680 --> 00:52:59,153 All descriptions which describe the images to users using screen readers, 753 00:52:59,153 --> 00:53:04,218 they are required unless the image is totally decorative. 754 00:53:04,218 --> 00:53:08,958 If you add an image of an orange is great in and it adds no meaning to the page, 755 00:53:08,958 --> 00:53:13,855 then you can leave the whole description blank because somebody on the screen 756 00:53:13,855 --> 00:53:16,514 reader doesn't need to know about that. 757 00:53:16,514 --> 00:53:19,131 But that's pretty rare I would say, 758 00:53:19,131 --> 00:53:23,193 a meaningful description is helpful 99% of the time. 759 00:53:23,193 --> 00:53:28,718 It also has the side benefit of SEO, images that are described well, 760 00:53:28,718 --> 00:53:33,301 do better in the search engines than images that don't. 761 00:53:33,301 --> 00:53:40,398 In terms of using the figure elements like figure and fig caption in HTML. 762 00:53:40,398 --> 00:53:45,605 Those are great tools, I'm not entirely sure how 763 00:53:45,605 --> 00:53:50,813 fig caption in particular affects accessibility 764 00:53:50,813 --> 00:53:56,145 other than it does communicate the role of what this 765 00:53:56,145 --> 00:54:04,213 thing is which is always helpful to your assistive technology users, okay. 766 00:54:04,213 --> 00:54:05,910 All right, thank you, Caitlin. 767 00:54:05,910 --> 00:54:06,923 Thank you to everyone. 768 00:54:06,923 --> 00:54:09,464 Yep, we're done here. 769 00:54:09,464 --> 00:54:13,007 Thanks for joining me and definitely connect me with LinkedIn. 770 00:54:13,007 --> 00:54:16,911 And stick around, I think we have another cool chat coming at 11.