Website Accessibility Introduction

Transcript from the "Introduction" Lesson

[00:00:00]
>> [MUSIC]

[00:00:39]
>> John Kuperman: Accessibility like Marcus saying is like really interesting where I think it's in the back of everybody's head whether you're a developer, designer, product person. And often when I talk to you about accessibility I get that like guilty I'd look, were it's like, yeah. Like we don't do that, we don't enough of that or whatever, so I think.

[00:00:56] Like the real goals of this workshop are I think accessibility is a moving target. So to try to help identify it and simplify it a little bit and then really simplify the technical aspect behind it. Because unlike some of these other classes, other workshops that are pretty technically challenging, like computer science concepts.

[00:01:18] Or electron react things like that, accessibility is a lot easier from a technical standpoint. I think just the education is lacking. So this doc is called The Web is for Everyone and that's kinda perspective that I'd really like to be going from. It's not as moving or this vague concept of accessibility as much as it is making your sites.

[00:01:40] And your apps able to be used by potential customers or potential users. For those that missed it, my name's Jon Kuperman. I'm @jkup on all the things like Twitter and GitHub and all that stuff. And I really enjoy talking about these things. So if you wanna mention me on any of those platforms, I'm always happy to check out an accessibility, commit on GitHub.

[00:02:01] Or just talk about it on Twitter or anything like that. For the last couple of years I was working at Twitter, working on web stuff on the home timeline. And now met a small start up called Brave browser. We're trying to make, hey one fan I love it.

[00:02:16] Try to make secure and fast browser. So yeah, so today we're gonna be covering quite a bit of things. We're gonna be talking about disabilities and the types of disabilities. And then the assistive technology that people with disabilities can use to browse the web. And then we're gonna get into some specifics and kinda highlighting the most common, your biggest wins, low hanging fruit, that kinda stuff.

[00:02:40] So we're gonna talk about keyboard navigation, focus control. We're gonna talk a lot about screen readers, semantic HTML. Then we're gonna get into the WAI ARIA spec so really working on some specifically accessibility stuff. And then we'll end with some, kind of higher level stuff about color and design, and how those play a role as well.

[00:03:01] So again I like saying accessibility is kind of a moving target. I think one of the problems is that the word itself kind of lends itself to a lot of different subfields in computer science. So I kind of wanted to dispel a little bit of that and really hone in on what we're gonna be focusing on.

[00:03:20] So webperformance is a really similar field when you're talking about potential users and you're talking about making your website accessible. There are really important things like taking into account people in developing nations, on slow connections, on old devices. Making sure that your website or app works great for them.

[00:03:37] But that's not what web accessibility is about, just a similar field. And then also internationalization. Again with this like making your website usable for everyone, making sure that your strings are translated. And can be read by people speaking a variety of languages, also really important But not what today's gonna be about.

[00:03:56] And then lastly, just kinda general design, content hierarchy and UIUX stuff, workflow, all that stuff. Again it's really closely related, cuz we're really coming from this spot of empathy and of understanding our users and their needs things like that. But really what we're gonna be focusing on is people with disabilities.

[00:04:17] Web accessibility is that helping people with disabilities use the web. And I think that depending on who you ask you can get some slightly different definitions, like does web accessibility encompass those other things. But for today's class we're really going to focus in on disabilities and helping people with them use the web.

[00:04:35] So I really liked this from part of the way. So it's like making it so that people with disabilities can use the Web is great. But I really liked these words. I don't know, it's a little hard to see the ones I've emboldened. But people with disabilities should be able to perceive, understand, navigate, and interact with the Web, I love that.

[00:04:54] But then I really like the one at the bottom which is also that they should be able to contribute to the Web. So it's kind of like this beautiful thing of people that work on the web that, there's a really low barrier to entry. You can really easily kinda carve out your own space.

[00:05:07] It's like a lot of freedom and a lot of power there. So I like the idea of not only making a website usable for people with disabilities. But making it great and making it welcoming enough so that they can contribute equally. So if you had a site like Wikipedia, it's not necessarily good enough that a user with visual problems be able to read Wikipedia.

[00:05:28] They really should be able to join the conversation and contribute, things like that. I think that applies across the board. So I wanna talk about numbers. It's regarding disability but kinda before I do that I was I was watching this talk by this guy, Rob Dodson and he's an accessibility lead at Google.

[00:05:46] He's giving an accessibility talk which was really good, but he kind of started it with this anecdote which I thought was really, really powerful. He's talking about doing his taxes cuz it had just been tax season. And he was talking about how you know, you know what you have to do, right?

[00:06:00] You have to like, give them your income and then you get either an amount of money or a bill back. That's like, that's the contract that's happening here, right? But instead of just being able to like, hit your ass on a button or whatever, you get this form, it's a really confusing.

[00:06:12] And there's no real clear order to how it goes. Since all these addendums and all the, you know, you never really sure what's going on. And so you kinda ask the entire audience to visualize that frustration that you have. You're trying to fill out a tax form and you're not sure about a certain step.

[00:06:30] And there's no guide there to read and see what's going on and you're just lost. And you're just lost come on, I just want to do this thing like let me give you my money. And kinda hold onto that negative frustration because when we neglect some of these things, we neglect some of these users, that's the experience.

[00:06:46] Like that's what's happening, they're like, man I'm just. You work in e-commerce and it's like, I just wanna buy this thing for my kid. And yet there's a CAPTCHA that they can't listen to and they can't see so they can't fill that out. Yeah, something's going on like that.

[00:06:58] So I think coming from the empathy side, I really love that anecdote of visualizing where you're like let me do this thing. I just want to get done with it. And then trying really hard to make sure that you don't cause that frustration with other people. So I just really liked that.

[00:07:14] So numbers wise, there's just a few interesting statistics that kind of give you a sense of the gravity. And the how common these abilities are in our country and in the world. So with people 45 years of age or older, one in six. So that's 16.5 million people have some sort of vision impairment even while wearing glasses or contact lenses.

[00:07:38] So as we're thinking about making designs and making websites for users with visual impairments. And just in America, we're talking about over 15 million people that might not be able to use your site if things aren't up to spec. 7.9 million people 6 and older have difficulty seeing words and letters in ordinary newspaper print.

[00:08:00] So again, as we're designing sites, we gotta make sure that our content is readable. Our content is legible and just kinda giving insight into the specific issues people have so that we can help work around them. And then just kind of generally worldwide, around one in five people have some form of disability.

[00:08:18] So whether that's physical, neurological, visual, anything like that. We're still talking about a large, large percentage of the population. If the empathy angle doesn't get you, I'm hoping the grid angle gets you with one in five potential customers. Potential users, people that wanna give you their money. [LAUGH] I hope the empathy angle gets you, but.

[00:08:41] And then a really important thing that I always like to start off with as well is that the web, by its very nature is already accessible. So us as developers we're kind of the problem here, right? So before you're like, I don't want to put in extra work to make it accessible.

[00:08:57] I think it's good to realize that you're the one that put in extra work. We're the ones that put in extra work, that made it inaccessible in the first place. So it's kinda my thought that this is the first website, it was on CERN's introduction to the World Wide Web.

[00:09:13] And it's just basically, yeah, it's the Hypermedia Information Retrieval Initiative, it's pretty awesome. But anyway, so this is one of the very first websites, it's still online today. And it is, it was built in 1991 and it's fully accessible. If you put on the a screen reader, you get access to all of the information all the links.

[00:09:32] It's also fully responsive, it's fully it can be used on any device, all of those things. And so I just kinda wanted to like go in with the perspective of like why we should care about accessibility. And one of the big reasons is it's like, it's our stuff.

[00:09:49] It's our JavaScript library, it's our cool CSS transitions. Or our desire to get things to look good visually, where we sacrifice content hierarchy things like that, that kind of bump it off track in the first place. I also really do think it's a huge human rights issue. Just the idea that somebody would not be able to use a cider application that I built really bums me out because I think that's a really big deal.

[00:10:13] And increasingly every year it's becoming more and more of a legal issue as well. The legal areas around accessibility are still pretty gray. Like there isn't a set-in-stone definition of what an accessible website is? But there are legal presidente for inaccessible websites. For websites people can't use and there have been law suits that have been succesful.

[00:10:35] So again if I can't get you with one angle, then go with the other one. Then the big one too, like reaching a bigger audience. We are talking about a not insignificant amount of people. That are consumers, that are you know what I mean, that are users, that are social, that are, that we might be shutting out.

[00:10:52] So with a lot of this stuff, like you know, I'm not such how many people are familiar with like the specs at the W3C. Like whether it's the accessibility spec, or HTML spec, or CSF. They're really worthy. Like their huge books. That people spend like, years and years and years arguing over the Burbage and just keeps longer and longer.

[00:11:11] And so, I don't really wanna go through the spec, cause there's so so much there. But there's this organization. zation called WebAIM, WebAIM.org. And they do a lot of really great stuff, provide a lot of great resources on accessibility. But perhaps one of their greatest resources they provide is this WebAIM checklist.

[00:11:31] And so, what this essentially is is that they've gone through the entirety of the spec and they've kind of pulled out the really important action items for us as developers or designers. And I think it's really conquerable to go through the webAIM checklist and, you talked about the different things that could go wrong and just, talk about what the site needs to have to be passing this checklist.

[00:11:54] So, they break it into this four categories, so, all website should be perceivable, operable, understandable, and robust and I think the robustness kind of leans towards that You know, that contribution angle, where it's like, what we kinda don't want is this really incredible experience, and then we try to read if they're using a screen reader and then we just provide like a simple paragraph and a title, or something like that, Like, really The tools are there to make that really really great experience useful for everyone.

[00:12:27]
>> Speaker 2: I just wanna give a comment, Jack N in the chat says today many developers deliver code that lacks semantic meanings which degrades the values semantics provide to assistive technology. Think div tags instead of meaningful HTML tags.
>> John Kuperman: Absolutely, yeah, and we've got, I think it's in the middle.

[00:12:46] We've got a whole section on semantic HTML. It's really important, and it's definitely one of the things we're going to highlight through this.