Designing Accessibility Curriculum with Anwar Montasir

Super excited to introduce our next [INAUDIBLE] this session. 0:03 He is a web developer, UX designer, and instructor, 0:07 based in Portland, Oregon, here at treehouse, y'all. 0:12 He is currently employed as a software development instructor on my team, 0:17 this is my teammate. 0:21 He believes in user centric design, and 0:22 enforces those principles even when teaching development. 0:25 He is a rock star in every way, he is my teammate, please welcome Anwar Montasir. 0:29 >> Thank you, welcome. 0:36 Thank you all for joining me today. 0:38 Thank you for your interest in accessibility. 0:40 Just a few other thank yous as we get going. 0:42 I wanted to thank Ryan of course, founder CEO of treehouse, 0:44 Liz Jackson has just done such an amazing work, 0:48 getting all these engaging speakers together, connecting them to our audience. 0:52 Our production team Jesse, Michael, Patrick, Tony, for 0:57 the kind introduction, and Kayleen who will be monitoring our chat. 1:01 I've been practicing this talk and it turns out I have a lot to say, 1:06 but I'll leave as much time as I can at the end for questions, so 1:10 don't hesitate to drop them on it. 1:15 Double tap my presentation to enlarge, and very critical this next slide. 1:17 This will be shared every so often in the chat, but a service called streamtext.net, 1:23 is providing captions, so I know those benefit a lot of users. 1:29 So, hopefully you have that link available if you need captions. 1:33 All right, who am I? 1:40 My name is Anwar. 1:41 I'm a designer, a developer, a teacher at Treehouse. 1:42 I've been here since October of last year, and like Dr. 1:45 Toni said, I'm lucky to be on her team. 1:49 I'm an accessibility advocate. 1:52 In addition to writing and delivering curriculum at Treehouse, 1:54 including our accessibility content, 1:59 I launched a course called accessibility for UX designers in June. 2:02 I'm currently working on accessibility for 2:07 web developers that's scheduled to launch in September. 2:09 I'm also auditing Treehouse's product for 2:13 better accessibility for our student learners. 2:16 And connect with me on LinkedIn, my address is up on the screen. 2:20 I definitely would love to hear from who you are, 2:23 what brought you to this festival. 2:27 And yeah, Michelle gave a ton of great advice on crafting short 2:30 messages in LinkedIn when you connect, so that'll be awesome to see. 2:35 Where did I come from before Treehouse? 2:41 I grew up in Arizona, went to school in the late 90s. 2:45 I studied graphic design and painting, I taught myself HTML, pretty much to 2:48 learn and accessibility on my own mostly on the job and doing my own research. 2:54 I've been in the industry two decades, mostly in New York City, 2:59 although I moved to Portland, Oregon four years ago. 3:03 I worked in a bunch of different ad agencies as well as a freelancer, and 3:06 I've always done a pretty broad variety of things. 3:11 HTML, CSS, full stack, JavaScript development, 3:14 as well as UX design and all that it entails. 3:19 I've also been teaching for quite a while, 3:22 as you can see up on the screen, eight colleges, two bootcamps. 3:25 All of these prior to Treehouse. 3:30 Now, the question I've pondered as an accessibility advocate, 3:32 is out of these 10 schools, how many of them had 3:37 accessibility curriculum built in already when I got there? 3:41 One, okay. 3:46 Not great at all, right? 3:48 Okay, well, then you might ask at least, 3:50 how many had accessibility training for teachers? 3:54 Wow, okay. 3:58 Disappointing, unacceptable, use whatever term you want. 4:00 Our goal here should be creating graduates who can hit the ground running, right? 4:04 That will consider disabled users from the beginning, the research, 4:09 the brainstorming process, all the way through design and development. 4:13 But how can they do that if we're not teaching, now as educators? 4:19 This is not just my experience, in 2018, webAIM, 4:23 if you don't know them, web accessibility in mind, webaim.org. 4:28 They surveyed 724 Web Accessibility practitioners, 4:33 asked them a bunch of interesting questions, but 4:37 one that stood out to me was, did you learn anything substantive 4:41 about web accessibility as part of your formal schooling? 4:46 Nope, all right? 4:50 Almost 93% said, no. 4:52 So, what other conclusion was I to reach, then we're letting students down. 4:55 Students are either learning accessibility on the job, 5:02 they're educating themselves, doing their own research, 5:06 coming into events like this one, or worse, maybe they're not learning. 5:10 Even though as the slide suggests, 5:15 disability can happen to anyone, anywhere, anytime. 5:18 And I don't just mean permanent disability, 5:22 although that's a very large community to be thinking about. 5:25 The global report on disability suggests that this is over 1 5:29 billion people worldwide, 15% of the earth's population. 5:34 However, taking a look at it, on the screen there's 5:39 a graphic from Microsoft inclusive design 101 toolkit. 5:44 That's a free download and I highly recommend that. 5:49 It shows all the reasons, for example, 5:52 a person might need to use a phone one handed. 5:55 And yes, it could be because of a permanent disability, 5:58 a person who only has one arm. 6:01 It could also be a temporary disability, oops, I broke my arm, 6:03 it's in a cast, in a sling for the next two months, I'm lest handed. 6:07 Or a situational disability, I am holding a baby, 6:12 eventually I will put the baby down, but in the meantime I 6:16 need to attend to this baby and solve some sort of task with my free hand. 6:20 When you look at it this way, disability really affects all of us, and 6:24 we all need accessible products. 6:29 So I've given you, hopefully a long list of positives, 6:32 why do we need accessible design, and it's the right thing to do. 6:37 It's unfair to not allow everyone access to what we make. 6:43 Hopefully that's why you're here. 6:47 Hopefully you're interested in accessible designs because it's the right 6:49 thing to do. 6:53 It's also worth mentioning that there are a lot of negatives if you don't get 6:54 it right. 6:59 This first lawsuit I have up on the screen, is particularly famous, 6:59 Domino's Pizza thought the Americans with Disability Act all the way to 7:04 the Supreme Court, and thankfully lost. 7:08 But there's a whole bunch of other famous accessibility lawsuits worth studying. 7:11 I mentioned with Americans, the Americans with Disabilities Act. 7:18 Those of you in America should know title 3 has been used to state that websites and 7:22 apps are places of public accommodation. 7:28 So in other words, it's treated the same as designing a building with no wheelchair 7:30 ramp, is considered discriminatory against people with disabilities. 7:36 Also, I should mention section 508. 7:40 This states that federal agencies need to make their electronic information 7:44 accessible to people with disabilities. 7:49 And if you're thinking, well, I don't work for the federal government, 7:52 this also includes everyone that does business with the federal government, 7:56 so, actually a lot of organizations. 8:00 If you're not in America, 8:02 we'll talk about the more globally recognized rules in a moment. 8:04 Also consider the cost of retrofitting for accessibility. 8:09 When I say retrofitting, I mean, rather than getting it right the first time, 8:14 somebody sue's you, and then you have to go back and make fixes. 8:19 An organisation called Australia's Centre for Inclusive Design did a study, 8:23 and they estimated that it can cost as much as 10,000 times 8:29 the cost of just working it into your process the first, okay? 8:34 Despite knowing all this, stuff like this keeps happening. 8:39 You may have seen this, this was only last month. 8:42 Twitter, one of the tech giants, rolls out a new feature, audio tweets. 8:45 Okay, I don't wanna type out my tweet, or I'm somewhere where I can't, instead, 8:50 I'll just record my voice saying a tweet, sounds neat, right? 8:55 Except, they did not provide captions. 8:58 Okay, so who couldn't access this content? 9:02 Well, deaf and hard of hearing users, also users with ADHD, 9:04 an auditory processing disorder, depend on those captions. 9:09 Users in a noisy room, well, I can't hear my phone right now, 9:15 how can I listen to this audio actually? 9:18 Non native speakers, perhaps I hear it, but I'm not touching all the words. 9:21 Twitter let all these audiences down, plus the black and white circle 9:26 that you see on the right side of the screen, that was the user's profile image. 9:32 It was blinking in time with the spoken text, 9:38 and at times it was blinking more rapidly than three times per second, 9:41 which is the above the threshold of what could set off seizures. 9:45 So users from the seizures were also at risk from the speech. 9:49 And you ask, how does this happen in 2020? 9:54 How do we get that One of the key points 9:59 of my talk here is the idea that empathy isn't enough. 10:04 When I built my script draft for Accessibility for UX Designers, and 10:08 it changed a lot after the draft, but when I put it together, I did my research. 10:13 I talked to some other people I knew in the field. 10:19 But I was primarily driven by two things. 10:22 One is the WCAG, if you don't know these, you should, 10:25 Web Content Accessibility Guidelines. 10:29 These are the universal standards that I mentioned. 10:31 So it doesn't matter if you're in America or not. 10:34 When you are building an app or product or website, 10:38 you can judge what you've built against the Web Content Accessibility Guidelines. 10:41 If you've met these guidelines, you probably have an accessible product, 10:47 although it's still important to test this with actual disabled users. 10:52 If you haven't met the guidelines, then your work is not complete. 10:57 So I used the WCAG, I also used my own empathy for 11:02 disabled users, and that's natural. 11:06 Every UX program will stress the importance of empathy. 11:09 You think about design deliverables, like personas that are rooted in empathy for 11:13 users with experiences different than your own. 11:19 I'm not here to say that's a bad thing. 11:23 Empathy belongs in every UX designer's toolkit. 11:24 But I don't depend on assistive technology. 11:29 And there are limits to my own imagination. 11:33 I can try imagining what it would be like to be blind or deaf or 11:36 have a motor skills disability. 11:41 And I could even test out, say, a screen reader on my own, 11:43 a device that would read out web content to a blind user. 11:48 That's still no substitute for 11:53 asking disabled users about their own experiences. 11:55 And so that's what I did. 11:59 I have three users on the screen here, their LinkedIn profiles are shown. 12:01 They would love to connect with you just as much as I would, 12:07 Jennifer Nordell, Ricardo Rodriguez and Nina Tran. 12:11 Jennifer, she's been getting the sort of shouts all week during this conference. 12:14 She's awesome, I'm lucky to work with her. 12:20 She's a student success specialist here at Treehouse, 12:22 as well as I've had two other reviewers who looked over my script for 12:26 language and accuracy of recommendations. 12:31 I didn't want to speak for these users, so I had them craft their own bio. 12:35 Apologies for reading for a moment. 12:40 My name is Jennifer Nordell, and I am disabled. 12:43 When I was 18, 12:47 I was involved in a car accident that left me with a traumatic brain injury. 12:48 Among other things, this left me sensitive to light, sound and motion. 12:52 I just don't see the world the way I did before the accident. 12:57 I have auditory processing disorder. 13:00 I can hear just fine, but I can't interpret speech very well. 13:03 It's as if I took your spoken sentence and threw it in a blender. 13:07 Because of this, I am heavily dependent upon closed captioning and 13:11 transcripts to learn through video. 13:15 And because of my sensitivity to light and motion, 13:18 I typically enable the reduced motion accessibility option on my iPhone. 13:22 So like I said, I work with Jennifer and I'm lucky to do so. 13:27 The next two reviewers, I met them both after a conference like this one. 13:32 It was an in-person conference, early in 2020, called Convey UX. 13:37 And we were at a talk called Inclusive Research by Lauren Isaacson. 13:43 Ricardo Rodriguez was born several months premature, 13:49 and as a result, he experienced both physical and cognitive delays, 13:52 and was unable to walk or speak until he was 11 years old. 13:57 He has successfully completed high school, and works to advocate for 14:05 disabled youth in foster care, along with people with disabilities. 14:10 Despite being affected by several disabilities, such as limited vision and 14:14 motor skills, today Ricardo currently manages the Journeymen of 14:19 San Diego's website as a freelance web developer through the use of assistive 14:23 technology such as magnification, high contrast mode, and text to speech. 14:28 As a benefit of being born severely disabled, Ricardo possesses insights 14:33 on various disabilities, and works on using that experience to help instill 14:38 the importance of making products and services accessible to others. 14:44 And finally, Nina Tran, who I also met at Convey UX. 14:49 Nina says I'm from Seattle, Washington. 14:53 I'm a senior at the University of Washington, and will be graduating with 14:56 a bachelor's degree in disability studies and informatics next spring. 15:01 My passion is accessibility with disability justice. 15:05 I care about how to make everything inclusive, accessible, and 15:08 equitable in a holistic way because of my life experiences and 15:13 struggles navigating the world as a deaf person. 15:17 So I want to share one of my favorite quotes by Mia Mingus with you all. 15:20 I imagine a world where our organizing and activism is less segregated, 15:25 where our movements and communities are accessible, 15:29 and don't participate in the isolation of disabled communities. 15:33 I imagine a place where we fight for whole and connected people, 15:37 families, and communities. 15:41 All right, together, 15:44 these three reviewers challenged what I thought I knew about accessible design. 15:45 And that's what I'm here to speak of today. 15:51 I don't really have time to break down all of the WCAG recommendations, but 15:53 you should check them out. 15:58 I want to cover what I learned from these three kind reviewers, 15:59 starting with some definitions. 16:04 You've probably heard the terms accessible design, inclusive design, 16:07 universal design. 16:11 They've been talked about all week here at the Treehouse Festival. 16:12 When I started my script, both Ricardo and 16:17 Nina called me out because I wasn't using them that carefully. 16:20 I think I was confusing the definitions. 16:24 But there is a distinction, and they shouldn't be used interchangeably. 16:26 Accessible design means specifically considering the needs of users 16:31 with disabilities. 16:36 Have you tested whether your product can be used by disabled users? 16:38 If not, or if you don't know, you still have work to do. 16:42 Now, accessible design sometimes has, or I should say often has 16:47 universal benefits, and this is known as the curb cut effect. 16:52 Once upon a time, elevated sidewalks did not have cuts in them. 16:57 Users did not navigate sidewalks. 17:02 Now, this was done specifically with accessibility in mind. 17:05 However, it turns out they also make life easier for 17:10 pedestrians pushing strollers or bicycles, wheeling a lot of luggage, 17:14 using crutches, even distracted by a mobile device. 17:20 Inclusive design means including people who might otherwise be marginalized. 17:24 Inclusive design draws on the full range of human diversity. 17:30 This is something that we value at Treehouse. 17:33 Part of our mission is reflect the diversity of the USA. 17:36 I've mentioned that disabled people are a substantial minority. 17:41 But inclusive design also aims at anyone who is historically underserved, 17:46 which could mean women, ethnic minorities, lesbian, 17:52 gay, bisexual, trans, queer, plus, etc. 17:57 Universal design, described by Ron Mace, one of its founders, 18:01 as usable by all people to the greatest extent possible without the need for 18:06 adaptation or specialized design. 18:11 Sounds great, right? 18:14 If you've created a simple, intuitive product that works for all audiences, 18:15 children, the elderly, people of different body sizes, abilities, and needs. 18:20 Sounds amazing, that's universal design. 18:26 However, the participation of excluded communities and needs of 18:28 disabled users must be prioritized over a one size fits all approach. 18:33 Is your product truly universal, or 18:38 have you excluded perspectives different than your own? 18:41 All right, language, very important when we talk about disability. 18:50 I've encountered a few talks lately where discussing this come up, 18:55 identity-first language versus person-first language. 19:00 Person-first as it sounds puts person-first in the description, 19:04 person with disabilities, person with autism. 19:08 Whereas identity-first puts, again, as it sounds, 19:12 the description first, disabled person, autistic person. 19:16 Now, I've read the recommendation a lot to stick to person-first language. 19:21 But Jennifer brought up a really powerful question. 19:27 She said that people with invisible disabilities might favor 19:30 identity-first language. 19:35 She wanted it to be known that not every disability is obvious when you look at 19:37 a person. 19:41 And sometimes, she's encountered people who were resistant to believing 19:42 her that she had a disability. 19:47 And she favors identity-first language for that reason. 19:49 So when including disabled users in your research, 19:53 excuse me, don't make an assumption. 19:57 Ask them how they describe themselves and their abilities. 20:00 All right, I mentioned that I met Nina Tran at Convey UX after 20:06 a talk called Inclusive Research. 20:11 And I was particularly drawn to her by the questions and 20:14 statements that she made in the question and answer section after. 20:18 She described deafness as a language minority, and 20:23 I've never really heard this term. 20:25 Nina identifies as deaf, not disabled. 20:27 She considers herself a part of a language minority. 20:30 If I spoke ASL, or American Sign Language, we would have no trouble communicating. 20:33 She also noted in reviewing my script not to use the term hearing impaired, 20:40 it was not communicated, excuse me, it was not created by the deaf community. 20:45 It is not embraced by the deaf community, and 20:50 the term impaired suggests a lack or a negative. 20:54 So we will use deaf or hard of hearing, except as you can hopefully 20:57 see at the bottom of my slide, I have little d deaf, big D deaf. 21:02 I didn't know the difference between those either, but again I had Nina's help. 21:07 Big D deaf describes someone who is actively engaged within the deaf 21:12 community, and most likely communicates using sign language. 21:17 Little d deaf, this person might be able to communicate orally, 21:21 and doesn't have a strong connection with the deaf community. 21:25 And hard of hearing describes mild to moderate hearing loss. 21:30 The source of this information, which is linked in my slide, Genna Matheson. 21:33 She ends with if you're unsure about how someone identifies themselves, 21:38 just ask, and that's going to be a reoccurring theme today. 21:44 Interaction etiquette, 21:49 I mentioned this talk that I went to by Lauren Isaacson multiple times, and 21:50 I actually just borrowed one of her slides because it's so important. 21:55 When you involve a disabled person in your research, 21:59 you need to make some accommodations. 22:02 And I also highlight this slide because I got it wrong and I want to own up to it. 22:05 I had just seen the slide and bullet point number one says speak directly to 22:11 the person with the disability, not their interpreter or their companion. 22:16 Then I met Nina and what did I do, but instantly, my head was drawn to 22:22 the source of the sound, which was her sign language interpreter, 22:26 which means that I was not looking Nina in the eye when she first spoke. 22:31 All right, I messed up and I need to get better, and that's why this slide is so 22:35 important. 22:40 All right, plain language, I would say I've been an evangelist of plain 22:46 language ever since I read the chapter Design for Scanning, 22:51 Not Reading, in Steve Krug's Don't Make Me Think. 22:55 If you're studying design, check out that book for sure. 22:58 An excellent free resource is a federal government website called 23:03 plainlanguage.gov, and I have samples from that site right here. 23:08 And you can see that really any user would much rather read 23:13 the column on the right than the left. 23:17 In terms of tips for plain language and they're all over this website, 23:20 keep your reading level appropriate. 23:25 Don't speak at a higher reading level than you need to. 23:28 Use short paragraphs, 23:32 long paragraphs like the text on the left is visually intimidating. 23:34 Bulleted lists, I look at the text on the right and 23:40 the important stuff sticks out to me. 23:43 After a flood, I need to watch out for the air, damp building materials, great, 23:46 that's much more meaningful than me having to hunt through that text to find it. 23:51 Keep it conversational, at Treehouse, 23:57 we have to practice what we deliver out loud all the time. 24:00 Do the same with your writing. 24:04 If it sounds clunky, maybe it is, maybe it needs to be reworked. 24:05 Plain language has universal benefits, but 24:10 it's particularly important to those with cognitive disabilities and dementia. 24:13 All right interface design. 24:20 Now, the WC in WCAG is a little misleading, right? 24:23 Web Content Accessibility Guidelines, web content suggests websites and 24:29 apps, but, and Ricardo pointed this out to me, 24:34 all digital interfaces are required to be accessible. 24:38 Some of you have perhaps encountered a Redbox DVD rental 24:42 kiosk at a pharmacy or a grocery store. 24:47 In 2014, they agreed to a $1.2 million settlement 24:50 because they hadn't made these accessible to blind users. 24:55 I've heard rumors, the last, it's version 2.1, 25:00 the last update to the WCAG came in September, 2018. 25:04 I've heard rumors that, next time, they're gonna rename it to make this clearer, 25:08 but I don't know if that's true or not. 25:13 Interface elements, 25:16 this is another one that I'd say I've been a long time evangelist of. 25:17 Picture yourself using a mobile device, a touchscreen, and 25:22 we can all picture ourselves struggling to tap something on the screen 25:26 because the interface elements were either too small or too close together. 25:31 The WCAG says your minimum target size should be a minimum of 44 pixels square, 25:36 and that's a great recommendation. 25:42 However, Jennifer pointed out that I had simply misread the recommendations. 25:45 It doesn't actually say touch interfaces anywhere. 25:52 So while you should get your touch interfaces correct, 25:55 it also applies to mouse targets. 26:00 Most of you will recognize what I have on screen here, 26:03 that if you've ever opened an application window on a Mac, 26:07 there's a red close, a yellow minimize, and a green maximize. 26:12 But these are only 16 pixels in size, which means Jennifer can't use them. 26:17 Anyone who has trouble making precise movements with a mouse 26:23 is going to find that these are too small to click. 26:28 So that means, it's not only touch targets, and 26:32 it also means that Apple is not following its own recommendation in this case. 26:35 Now, I've built and designed a lot of websites, and 26:43 I've tested a lot of them for screen reader, 26:47 a device that reads content aloud to a blind user. 26:50 And you'll hear these recommendations all the time. 26:54 Provide alt descriptions for your image. 26:57 Here's a woman playing basketball, right? 27:02 Well, I will describe this woman playing basketball, 27:05 throwing the ball into the hoop. 27:08 Now someone who can't see the image will understand it. 27:10 However, I have not tested enough for screen magnifiers, and 27:14 I feel like this gets overlooked. 27:18 There's a graphic on the screen right now, indicating a site called 27:20 Bureau of Internet Accessibility and what it looks like zoomed in. 27:25 Many low vision users like Ricardo rely on screen 27:29 magnifiers used to enlarge web content. 27:33 Accessible design for screen magnifiers means your 27:37 user shouldn't have to scroll horizontally to read your text or 27:41 struggle to use your navigation, even when zoomed in at 200%. 27:45 I know I'm guilty of not testing this enough, but having met Ricardo and 27:50 observed him using his phone and having gone through these slides, 27:55 I don't intend to make this mistake in the future. 28:00 Keyboard navigation, not every user is capable of using a mouse or 28:09 a touchscreen, and 28:13 it's possible that they will be navigating your site purely with a keyboard. 28:14 If that's the case, focus indicators are incredibly important. 28:20 One of the more maddening experiences I've had as a college teacher is as 28:25 recently as 2018, I inherited another instructor's curriculum. 28:29 I want to say it was a JavaScript course, who recommended how to use 28:34 CSS to turn focus indicators off because they're distracting, absolutely not. 28:39 Picture yourself holding a mouse, 28:46 trying to select items on the screen, and you can't see the cursor. 28:49 How would you know what you were selecting, what you were doing? 28:54 This would be a similar situation if you were trying to navigate with the keyboard 28:57 and focus indicators, which show the currently selected element was hidden. 29:03 A light blue indicator is used by default, it's pretty thin. 29:09 I recommend making it more prominent. 29:14 Jennifer pointed out that you really need to combine principles to get this right. 29:18 I haven't really talked about color contrast anywhere, 29:23 it's actually one of the more famous WCAG principles. 29:26 Make sure that your foreground and background color have enough contrast. 29:29 Here's a case where hm, didn't really work out with the focus indicators. 29:36 Jennifer sent me two screenshots trying to navigate Apple's 29:40 accessibility options in light mode. 29:45 Look at that lovely focus indicator. 29:48 It's bold, and it's highlighted, Enable Sticky Keys, plenty of contrast. 29:51 Then I get into dark mode, I have no idea what's highlighted now. 29:56 Jennifer didn't know either, and therefore she can't use dark mode on her Mac. 30:01 I'm not picking on Apple, it may look like I am from these last couple of options. 30:06 Apple actually has a tremendous commitment to accessibility, but 30:12 like anyone, they always have more to learn. 30:17 Keyboard traps. 30:20 I knew about this, I just didn't know the term as developed. 30:23 Sure you test, and test the more your product using only a keyboard, 30:26 and make sure your cursor doesn't get stuck anywhere. 30:31 And if your application provides keyboard shortcuts, 30:35 that's tremendously helpful for your keyboard audience. 30:40 But make sure that you make the shortcuts easy to learn, and 30:44 the documentation easy to find. 30:49 And there you go, Apple has actually done this as well. 30:51 I'm looking at Mac accessibility shortcuts from their accessibility website. 30:53 Forms. 31:00 This is a place where lots goes wrong. 31:01 Reduced cognitive load. 31:04 I think this is your big test of, am I building a successful form? 31:07 Jamie Rene Williams spoke earlier this week in a talk called, 31:11 day in the life of the UX designer, and I noticed that phrase, 31:16 I need to work every day to reduce cognitive load. 31:20 So we have some bullet points on the screen, minimize questions per screen, 31:24 making sure the purpose of each part of the form is obvious, 31:29 clearly label form inputs. 31:33 Again, this tremendously benefits your audience with cognitive 31:35 disabilities or dementia. 31:40 And Ricardo wanted to stress that, it's much more important that you 31:42 be specific and accurate with your labels then they provide short text labels. 31:47 Designers love short text labels, they're easy to fit in mobile. 31:53 But it's much more important people can understand your form. 31:57 Avoid unnecessary questions. 32:03 This will shorten your form. 32:05 Great, we just said minimize questions per screen. 32:07 But also one potential source of frustration 32:10 out there is questions about gender. 32:14 If you have an extremely compelling reason to ask about gender, 32:17 maybe it's a demographics question, 32:24 then you're going to need to provide either plenty of response options, 32:28 or an input where a user can type of their own. 32:35 And you need to assure the user their information will be private, 32:40 anonymous, and safe. 32:43 Otherwise you run the risk of excluding non-binary users or 32:45 people who just don't feel comfortable answering that question. 32:49 Making the required fields obvious, as I said, 32:54 one key to making a successful form, is reducing cognitive load. 32:58 I would say the other is minimize errors, make sure that users know what is obvious. 33:03 And I built a food delivery form as my demo for accessibility for UX designers. 33:09 Careful with what you make required. 33:16 If you are a phone, excuse me, a food delivery service, 33:18 perfectly reasonable to ask for a phone number, but 33:23 if you require the phone number, you might be excluding deaf or nonverbal users. 33:26 So think about, can you accept an alternate contact? 33:32 Active versus inactive links. 33:36 So I had a great discussion with Hope Armstrong, one of my colleagues, 33:39 those of you who study UX at Treehouse, you know her well. 33:44 The WCAG doesn't actually enforce making your inactive links 33:48 the links to come that you can't click, yet have a high contrast. 33:53 But does that mean you shouldn't do it? 33:59 Don't your low vision users deserve to know what's coming on your form? 34:01 Placeholder text, the practice on the left is a terrible practice, 34:08 using placeholders to label your form input. 34:14 It seems like a space saver, but as soon as the user starts typing, 34:17 they disappear, and then you can't remember what it was filling out. 34:21 Placeholders are also a contrast challenge, make them to light, 34:26 low vision users can't see them, too dark and they look like pre-filled form field. 34:30 So, stay away from them wherever you can. 34:36 You might say, 34:39 couldn't I use placeholders to suggest before adding of a phone number? 34:40 You could, but then if the user starts typing, and 34:45 they get destructive, a phone call comes in. 34:49 Or again may have a cognitive disability or dementia, 34:53 how are they supposed to remember that format? 34:56 Developers they recommend input masks which just shapes the data 35:00 to the correct format as the user begins typing. 35:04 Okay, I believe this is my last category, but this is a dear one, 35:09 the Treehouse videos. 35:13 Avoid sounds that autoplay, the WCAG doesn't say this, the WCAG just says, 35:15 provide a mechanism for pausing the sound or lowering the volume. 35:21 And Jennifer, Nina, and Ricardo, all said, no, 35:26 just don't make them autoplay for three different reasons, actually. 35:30 Ricardo said, it's tough to use a screen reader while the video is autoplaying, 35:35 how can you listen to the screen reader? 35:39 Jennifer, who is sensitive to sound and motion says she sometimes 35:42 gets uncomfortable or even ill by an unexpected sound. 35:46 And Nina pointed out that often users will want to make adjustments 35:50 to the captions before hitting play. 35:55 So, I would say, go beyond the WCAG in this case, don't autoplay videos. 35:57 If you're curious how the browser will handle it by default, this is an odd one. 36:03 Firefox in their mission statement prizes user control. 36:09 Firefox will not autoplay videos, and 36:14 you actually as a user have to go change that setting, if you cared. 36:16 Chrome, not only autoplay videos, if you're on a site where you've 36:21 played videos before, they will continue the autoplay, but 36:26 you as a user don't have the option anymore to turn that off. 36:30 So, developers don't depend on the browser to handle this. 36:34 Captions, not just for deaf and hard of hearing audiences. 36:38 I'm sure a ton of you watch treehouses videos with the captions on, I always do. 36:44 They're helpful in a noisy environment, 36:50 they're helpful to understand difficult vocabulary, they're helpful for folks. 36:52 Jennifer pointed out that also the WCAG captions guideline doesn't 36:57 mention auditory processing disorder, I didn't know about this. 37:02 It's not about hearing but about how the brain understands speech. 37:06 Jennifer said in her bio, she can hear you just fine, but 37:11 distinguishing sounds sometimes they get scrambled on. 37:15 And this actually affects 5% of school aged children, so 37:19 not an insignificant augments. 37:23 When designing captions, 37:26 fortunately treehouse had a lot of good practices in place. 37:28 The white text on a black background provides great contrast, 37:32 no more than two lines of text at once. 37:37 And treehouse's captions are draggable, you can move them out of the way if 37:40 they're covering something critical on screen. 37:45 Two changes I did have to make when I got here, one was implementing an instructor 37:48 led caption review, because no service will ever provide 100% accuracy, 37:54 and key information sometimes gets mistranslated. 37:59 And also Nina pointed out I need to work hard to identify who is speaking. 38:03 Here's a screenshot from my video with three speakers. 38:09 Mark Sutton is demonstrating how to use a screen reader, 38:14 then the screen reader begins speaking. 38:17 And then I resumes speaking. 38:20 Our caption service here at treehouse, I believe it's called CLO 24, 38:24 does not identify speakers by default, and 38:29 Nina really struggled with how to use our videos. 38:33 Okay, I will leave you with a list of resources, there are plenty more, 38:36 but definitely should know the A11Y project deep, and WebAIM, 38:43 as well as some potential resources for further reading. 38:49 These get updated all the time. 38:54 And I think I'm ready for questions. 38:56 Do we need to know advance coding to make accessible digital products? 39:04 That's a really good question. 39:09 A lot of, hoops, just flip slack, okay, 39:11 a lot of accessibility actually comes when you're learning HTML basics. 39:14 So that's the best way to get accessibility, right? 39:19 If you read semantic HTML carefully, there's an article, 39:22 there's an author named Shayhmwe, how that I look at his articles a lot, 39:27 s-h-a-y-h-m-w-e, how to use semantic HTML meaningfully and why. 39:33 If you get the basics of HTML right, you are very well on your way. 39:39 The other key part is, once you do get into advanced JavaScript, you do have 39:44 to be cautious, or sometimes JavaScript will update more content on the screen. 39:49 And the browser isn't built to notify users of assistive technology, 39:55 but something changed on the screen using JavaScript. 40:00 So there are some advanced features as well, but I would say definitely. 40:04 Get to know semantic HTML inside out. 40:08 What web and UX design would you like to see more websites roll out? 40:13 What are the most common issues you see? 40:17 Hmm, that's an interesting question. 40:19 I think really what I want to see is more all members of 40:29 the team being equally passionate about accessibility. 40:34 I mentioned that I am attempting to audit Treehouse's product. 40:40 But I should mention, it's not just my job. 40:45 And if it were just my job, it would never go right. 40:48 I'm also here to educate my team members, and 40:52 I've had all sorts of team members since I've been here fix things on their own. 40:55 So I noticed the contrast on this animation I just built was off and 41:01 I fixed it. 41:05 So this is what I want to see is equal passion from every member of the team. 41:06 How do you promote accessibility in your workspace when they have no 41:14 accessibility background guidelines? 41:18 Well, you already heard a talk from Michelle Zelman this morning, 41:21 she's amazing. 41:26 And yeah, I think the types of conference talks we've had at the festival, 41:27 we're wanting to do similar things at Treehouse. 41:34 I think that inclusiveness and 41:39 diversity training is very important no matter where you work. 41:41 I think accessibility training is also important. 41:45 Where can we gain skills accreditation training for or accessibility? 41:52 Well in terms of learnings, I think the places 41:57 on the screen are a great place to start. 42:03 In terms of accreditation, I honestly don't know. 42:07 I think Nielsen Norman Group is potentially a good place to go for that. 42:10 I do have some folks, some former colleagues and former students of mine 42:14 who have actually gotten accreditation from Nielsen Norman Group. 42:19 And since they have a heavy emphasis on accessibility, 42:24 that's potentially a way to get accreditation. 42:28 I'll say it, I don't have any accreditation on it, I haven't gone 42:32 through the Nielsen Norman conference, but I've heard it's really cool. 42:38 What are some accessibility issues and trends in AR and VR? 42:45 If you find out the answer, I've asked you to connect with me on LinkedIn. 42:50 If you find out the answer, come back and I would love to take your course on it. 42:54 I admit, I don't know anything about AR or VR. 42:59 I would have to imagine there are plenty of accessibility issues. 43:04 I don't think the right now is really built to handle those things. 43:08 So yeah, it's an excellent question and I'm really glad you're asking that, 43:13 and if more people start asking it hopefully accessibility will emerge 43:19 faster with AR and VR than it did with web design and development. 43:25 But that's a good question, I don't know. 43:30 How is your approach to accessibility changed over time? 43:34 I honestly think a big catalyst was the launch of HTML5, 43:39 which was, I can't remember, the mid 2000s or something. 43:43 Before we had semantic HTML, I mentioned already using your HTML tags 43:48 descriptively to accurately describe what's going on in your page. 43:54 We didn't use to have this, and a lot of websites were built in Flash. 44:00 I was a Flash developer for a long time in the mid 2000s. 44:05 Those were not accessible in any way, shape, or form. 44:09 So once HTML5 came out and I said, really, I can actually make this usable for 44:13 broader audiences, that sparked by interest. 44:19 But as this talk hopefully indicates, I'm constantly trying to learn new things. 44:23 And my knowledge is nowhere near complete as the AR VR question just indicated. 44:30 What are some of the tools available to test the accessibility of a website or 44:38 web application? 44:43 Great question, Google Lighthouse, which you will, 44:45 I believe it's found built into your Google browser when you do inspect. 44:49 You have a bunch of options there. 44:55 Google Lighthouse will audit your product for accessibility and 44:57 also performance, how fast is this thing loading. 45:04 There's also a plugin called Axe, A-X-E, I believe it's made by the organization D. 45:09 Axe is great for websites or apps that use a lot of 45:15 JavaScript because Axe you can rerun it every time. 45:19 JavaScript runs and check the accessibility again. 45:24 So those are great tools, and I'm glad you asked that question. 45:27 I will close with accessibility audits. 45:31 They're awesome. 45:35 HTML5.validator.edu, that's the third one. 45:36 I use that a lot just to check the validity of my HTML itself. 45:41 Those only catch I think less than half of the potential issues you can have. 45:46 So do run those audits, they're amazing, but it's not a substitute for 45:52 user testing. 45:57 Question on the forums and avoiding unnecessary questions. 46:01 How do you draw the line for gathering gender and demographic information? 46:05 I think most of the time, if you sit and ask yourself this question, 46:10 and it really could apply to phone numbers, 46:16 email addresses, it could apply to any question. 46:20 Just sit and think to yourself or discuss with your organization, 46:24 do I really need this information? 46:29 My default is kind of no. 46:31 And then I have to convince myself, 46:33 here are really strong reasons that we need this. 46:36 Because I think every user objects in some way. 46:40 Phone numbers, why did they need this phone number? 46:43 I don't want whichever organization calling me, that's weird. 46:47 So we've all felt that way designing forms. 46:51 Gender, yeah, I think you would really know 46:56 that your organization depends on having this information. 46:59 And if that's not the case, then great, you've shortened your form and 47:04 you've also avoided making people feel uncomfortable. 47:09 There are plenty of cases where people look to the form and 47:12 they saw two radio buttons, male, female. 47:16 This doesn't apply to me, and they couldn't complete the form. 47:20 So we wanna still clear of that. 47:23 What are your suggestions for someone working on a portfolio project and 47:28 wants to showcase an accessibility case study? 47:32 What should you include? 47:35 That's an excellent question. 47:37 A couple of speakers have actually mentioned this week the idea of 47:39 an accomplishment journal, each week write down what you accomplished this week. 47:43 And then when you build your portfolio or resume, 47:48 you can highlight that information. 47:51 I think it would depend on the accessibility study itself. 47:53 One possibility could be you arrived somewhere and 47:57 took a website that didn't have very good accessibility and you fixed it up. 48:01 And that's probably a reasonably easy thing to document, 48:07 you could just kind of do a before and after, all right. 48:10 Before our videos lacked captions, after not only do our videos have captions, 48:14 but here's all the things I did to ensure that they were useful captions. 48:20 If you're starting a website from scratch and you just wanna make 48:26 sure that it's accessible, I would say include that in your case study. 48:31 A lot of portfolios say here's the finished products, 48:36 now let me back up and this was my planning, this was my sketching. 48:40 You could have a little section for accessibility and 48:45 what I learned on the project. 48:49 I actually didn't realize that screen magnifiers were important, but 48:51 I showed my site to Ricardo and he couldn't use it. 48:56 Here were the fixes I made. 48:59 Can you explain the A, AA, AAA ranking system? 49:02 Very good question. 49:06 For those of you who don't get the context of that question, 49:07 it's in my course that I made for Treehouse but it wasn't in any slides. 49:11 Sorry, plugging it. 49:15 So the tag recommendations are all A recommendations, 49:17 which means really simple to meet. 49:22 An example of a single A recommendation is sufficient color contrast or 49:26 alt descriptions for your image, 49:32 just like it should be no effort at all to get this right. 49:34 AA would be a little bit tougher to implement, but 49:39 you still definitely need to have these things. 49:44 I feel like most of what applies to video captions actually falls under AA. 49:48 And it might require an external service and it might require 49:56 spending a little bit of money, but it's absolutely essential. 50:01 I say if you are not at AA with your product, Your work is definitely not done. 50:07 Triple A, Microsoft famously is committed to making all of their products triple A. 50:12 Just like Apple, but it doesn't mean that they never get anything wrong. 50:21 I think all of us make mistakes and we hold up and try to fix them. 50:24 Triple A, an example actually is the captions that we 50:30 are providing for this talk, captioning for 50:35 a live presentation rather than pre-recorded video, 50:39 that's even tougher and it qualifies as triple A. 50:44 But with tag, it doesn't actually require a triple A, but go for 50:49 it whenever you can. 50:54 I mean, again, I think both Nina and Jennifer couldn't make use 50:55 of this presentation Tag tree has not met the triple A requirements. 51:00 So, whenever it is within your means to do so, 51:06 I say yes, go above and beyond, get that triple A mark. 51:10 Do you recommend using animation or staying away from it, 51:15 from an accessibility standpoint? 51:19 That's a really good question and it's led to some conversations 51:21 with our animator Michael Myers, who's awesome and 51:26 who has really embraced making his animations more accessible. 51:30 Definitely one of the things to consider is blinking. 51:35 If something is blinking more than three times per second, 51:41 you absolutely need to stay away from that. 51:44 And I already mentioned that Twitter got that wrong. 51:47 Slack has a great accessibility feature that I hope gets embraced in 51:50 a lot more places. 51:55 If you go into your Slack preferences, there's an accessibility toolbar. 51:56 And there's a checkbox that says disable animations and 52:01 GIFs or something like that. 52:06 But basically, a lot of users actually can't concentrate with animation going. 52:08 Or like Jennifer said, the motion might make her kinda dizzy. 52:14 So if you can provide that kind of feature in an app, reduce motion, 52:18 Jennifer mentioned Apple has that, that's amazing. 52:23 So it's a really good question. 52:27 I would just say, be cautious with animation and 52:30 interview some disabled users and get their info. 52:35 When is it appropriate to image-caption on a common 52:40 high traffic page like a landing page? 52:44 I'm not entirely sure I understand the question. 52:47 All descriptions which describe the images to users using screen readers, 52:52 they are required unless the image is totally decorative. 52:59 If you add an image of an orange is great in and it adds no meaning to the page, 53:04 then you can leave the whole description blank because somebody on the screen 53:08 reader doesn't need to know about that. 53:13 But that's pretty rare I would say, 53:16 a meaningful description is helpful 99% of the time. 53:19 It also has the side benefit of SEO, images that are described well, 53:23 do better in the search engines than images that don't. 53:28 In terms of using the figure elements like figure and fig caption in HTML. 53:33 Those are great tools, I'm not entirely sure how 53:40 fig caption in particular affects accessibility 53:45 other than it does communicate the role of what this 53:50 thing is which is always helpful to your assistive technology users, okay. 53:56 All right, thank you, Caitlin. 54:04 Thank you to everyone. 54:05 Yep, we're done here. 54:06 Thanks for joining me and definitely connect me with LinkedIn. 54:09 And stick around, I think we have another cool chat coming at 11. 54:13