 We're going to be talking about accessibility. I'm here to discuss a little bit, surrounding it, or at least most things surrounding accessibility as we can optimize it for the web. You may have also heard it called Ally. This stands for the 11 missing characters in accessibility in the word Ally. So you may wonder what is accessibility? So we may not be fully sure what we're talking about here. Accessibility is being inclusive. It's creating accessible websites, and that means having it understood by all audiences regardless of adaptive technologies or browsers. It's usability, but usability is not to be confused with accessibility. Usability is the ability of average users with average technologies and the standard equipment and browsers, and that is their ability to navigate the site well. But accessibility is adding an additional layer. So you may wonder why? Why do we care about accessibility? Why should we care? As software developers, we build software for people. We empathize with people. We get frustrated when we can't use websites well. So what happens when we add an additional layer of tools onto this? We build complexity into this. So who are we talking about here? What types of people? Who should we think about? Everyone thinks of screen readers when they think of accessibility. We think of visually impaired. We think of people who are blind. But we really need to consider a lot of other things here. Cognitive and neurological disabilities or abilities. There are so many impairments that we need to consider. Who in here knows someone with one of these impairments or has a friend? Yeah, so maybe half of you guys. So think about how that friend uses the web or if they run into any issues. Another question we all may ask is how do people with disabilities or impairments use the web? What special tools do they use? So we call these assistive technologies. They can include a combination of these things or they can include one of these things. Like I said, most people think about screen readers but there are many, many more. This is a great quote by Tim Berger Lee. He's the creator of the World Wide Web. He wanted us all to think about accessibility. So what do you think? Are we doing a good job of upholding these values that he tried to instill in us early on? So let's think about that as we navigate through. So let me pause for a moment. Why, I get asked so often, why do I care about this subject? What is my investment in this? This is a picture of me and my mom. We're both developers. She started in the era of Fortran, Provol and Focus and something we don't have in common is a visual impairment. She's blind. She's been blind her whole life. So she uses many adaptive technologies and she's also the reason why I'm aware that there are so many more disabilities out there than just visual impairment, but let's kick it off with visual impairment. There are four categories that we generally think of. Two of the adaptive technologies include Braille displays. Braille displays are an extension of your keyboard. They provide a small mouse movement that you can navigate with your hands and they also allow you to use the keyboard at the same time while displaying all the text on the website in Braille for a blind user. Another technology is a screen reader. These come in a variety of shapes and sizes. Apple comes accessible out of the box. We may have all accidentally turned on our screen reader and gotten very frustrated or very confused. Windows comes with, actually doesn't come with any of these. You can install window eyes. It's free for people with Microsoft Office 10 and above or 2010 and above, excuse me. And Chrome is actually an operating service. Chromium OS powers Chromebooks and Chromium has Chromebooks on it. So you can also test in all of these environments if you have the ability to. Screen readers traverse the DOM or the document object model. We may be familiar with this. They look for focusable events. So this is our normal HTML layout and it's important to keep this structured. We want to keep the standard HTML flow so that screen readers can use it properly. We want the screen readers to be able to look for things like headers and footers and tell the user that there's a navigation bar coming up. Screen readers are not able to read by default divs and spans. So we want to try and avoid using those for very important elements of our HTML. Aria is an assistive, rich internet applications. They're a set of accessibility attributes which can be added to our HTML markup. Any markup, ideally for HTML, and they aid the screen reader. They add role attributes which define the general type of object, article, alert, or slider that might be coming up or that might be active. They can also delineate states and properties of values. So we can add a description to a block of text or a chunk of form to tell the screen reader what we're filling out, what section we're approaching. We can have it live update a progress bar, for instance. So let's take a look at the New York Times. Does the New York Times allow for accessibility well with the screen reader? I must think of, in terms of user stories, about user stories. I want to log in as a user. I want to search. I want to browse categories. I want to read more content. So up here in the corner, this is how our eye may travel. I want to search. Great, there's a search button. I want to log in. There's a login button. I want to know where I am in the New York Times. Cool. There's a nav bar. I want to navigate the site. I might want to skip to the main content. That's wonderful. These are all great things for visual users. How does the screen reader try this? Let's see. This may not, let's see how the audio works. Hopefully you guys can all hear it. But a screen reader will show us what is selected in bold here around the New York Times. And at the bottom, it will read to us what is being displayed. So I want to invite you all to close your eyes if you're interested, if you can hear this well enough. And let's see. As someone who's visually impaired, I want to log in again. I want to search. I want to browse categories and I want to possibly skip to the main content to read. Great, our search is done. We have search. That's one of our stories gone. That's great. We can skip around if we need. We can log in. That's another one of our stories that's done. This next one is a little bit longer. So feel free to keep your eyes closed. This is a little bit, it will sort of walk you through what a visually impaired user goes through every single time and visit a new page. The angle will now be two terminals on each side. Link, health, link, sports, link, arts, link, the song, link, food, link, travel, link, magazine. So that was a little bit painful, right? It's a little bit long, but if it is your first time in a site, you may want to hear all of the categories. There's our map art. That's wonderful. What's next? You can see up here in the audience, that's hidden, but it's a great cue for a screen reader. It will say, here, we're gonna, so a little depressing, but. You can see that The New York Times, oh, I'm sorry, The New York Times does it fairly well. Let's recap. We can skip to the navigation, skip to the content easily with those two hidden links up top. The top stories have a heading and it announced those things very well in a clear manner. Let's check out Home Depot. Does Home Depot do this well? I wanna log in again, I wanna search, I wanna browse categories, maybe I wanna find a store, and I wanna read the main content. As a visual user, these things are pretty good. We can search, we can log in. Let's try it out on a screen reader again. This one may be a little bit more painful for you. I don't wanna ruin anything, but. So this is pretty good, this top part, but something that we'll see that happens when we get a little bit further into the site is one of these. And it's a little bit slow, you can't skip around. On this demo, where are we? We can't see what's going on. Does anyone know where we are? We're stuck inside of this search all box. It's displaying everything again that we just went through. So we're gonna listen to these 17 items once again. And if we wanna find something that we don't know what category it's in, like wheels, who knows what wheels are in. We really wanna get to this search box over here, but it's been a little bit hard so far. This says button, what does button mean as a screen reader user? I'm not really sure. Do I click it, where do I go when I click it? Who knows what happens? So this is something we really wanna consider. The button should be, this is detrimental. Last screener demo, sorry, about this. This is really what a visually impaired person goes through every time they visit a site, like I said. We're trying to log in. Where are we? We're not in the signer. So these are small issues that we're running into as a screen reader user. Was this one successful? We can't skip to the main content. We have a lot of repetition, can't log in. The navigation's pushed down, search button gets lost. Let's move on to something like low contrast. This can be a very big issue for low vision users. I really wanna see links clearly as a low vision user. I want a less eye strain, because if we're looking at a white window, that's letting a lot of light into our eyes and that can cause me a lot of eye strain. We all darken our text editors. So this is one of the main reasons of eye strain. Let's visit hacker news, hacker news, lightens all of their visited links, and this can be not great when we turn up our contrast. Where did they go? If we switch into high contrast mode in Burman, they're also not great. So things we all need to consider and what contrast settings we have and trying them as a user like this. Apple has a great way to deal with this. They use high contrast. Let's continue with low contrast and something like color blindness. We don't really think about it a lot. We don't think of being color blind as a visually impaired person, but statistically, we have to have at least a few color blind people in this room. So let's try out this little demo here. This is the Barclays Premier League and these are red and green colors to denote losses and wins and that is the only delineation we have. This is what it looks like to a color blind user. They're essentially the same. If you are color blind, you probably won't see a difference between these two. So let's give a week of mobility improvement. What do people with mobility impairment use in order to navigate the web? They may use foot pedals. They may use something like a single hand and keyboard. Can you imagine using this and how your experience would change on the web? We've all thought about what if we break our hands as developers? What would happen? You could, if you lost your arm, you could probably use this after maybe months of painful adjustment. A voice control or a site control machine is often used for people with mobility impairments. What does voice control do? Voice control utilizes the DOM in a similar way to a screen reader but it doesn't read out what you're going to see. You're going to be able to speak. If I'm visiting the New York Times again, I want to say click world in order to visit the world page. And our background HTML elements need to match. Our background image HTML attributes need to match what the image actually says so that we are not confusing our readers. If world said home or something underneath in the HTML markup, we would not be able to click world. Let's take a look at cognitive impairment. Cognitive impairments affect people in such a way that they have greater difficulty with one or more types of mental tasks than the average person. So this can be very confusing as someone who's cognitively impaired to visit a cluttered website. We have to take a look at our content on the screen. We want to aim for about a sixth grade reading level but that really improves the content of our page for average users as well. And this also eases our memory. We want to take a look at forms and redesign and not use placeholders which we'll get into in a little bit. If we think about neurological impairment, it can be sometimes related to cognitive impairment or there can be crossovers in here. But we want to make sure we're not creating a bad experience for someone with vertigo, for instance. Everyone's very familiar with this new hot trend that is video in our websites and on our main page. But can you imagine what this experience is like for someone with vertigo? They're going to experience extreme pain and be confused and probably dizzy afterwards. And that is not a great user experience although it is very calming when you are expecting it and you are an average user likely. Let's take a look at hearing impairment. Often we will dig into closed captioning and videos on YouTube are very well closed captions now. But what is the experience for a website like this for someone who is hearing impaired? Are they expecting again for there to be sound or do they think they're missing something in this video? It turns out they're not. They're not missing an experience but you can imagine that they are keyed in to think that they're missing an experience on a video. So how can we improve this as developers? We wanna look for good things for screen readers like section descriptions. We want to denote our links and buttons correctly so that we aren't just saying image everywhere if we have images all over this New York Times site. We wanna fill in our alt tags, most people don't which is not necessarily a horrible thing because I think people with screen readers expect it but adding a short description can be hugely beneficial. For low vision users, we wanna make sure things scale well on our website. We want to make sure that things don't readjust when we're increasing the size of our screen. You can see New York Times does this well. You can zoom in very, very easily and still be able to see everything and scroll across the page. We want to make sure that there's good underlying code in our background images like I talked about for hearing impaired users. If this New York Times background image had a different link underneath that said hold for instance, we would not be able to navigate back to the New York Times if we said click New York Times. The voice over control or the voice control would not know what we're talking about. Let's take a look at Kickstarter. Hi guys. They did a wonderful, wonderful thing recently for closed captioning. Everyone's familiar with Kickstarter. You created a video. You try and raise money in order to promote your cause or sorry not promote your cause but for a creator. They just recently added a huge feature that allows you to go in and add your own closed captions and add your own descriptions which is a great, wonderful thing. They did not necessarily need to do it. They felt as though it was a necessary addition. Here's another way you can go in and add. You just click the little add track button here. Let's take a look at Netflix. They just recently added audio description. The visual impaired community has been asking about this for years and they have unfortunately not done it until now but I think this was a great launching point. Daredevil was just released which is about a blind superhero and they did not release it with audio description which frustrated many people but they recently did and you can just go into your options here and click audio description, sample it out. It will explain everything that's happening in the moving pictures and it's wonderful. I grew up watching all my movies this way, The Beauty and the Beast was all audio described and it's a lot of fun to listen to so try it out. Another thing we can look at is typography. Are we using clear readable type? Are we training ourselves to choose fonts that are well received and are readable on a screen specifically? We want to look at size of the browser average which is about 16 pixels. It seems a little big for people who are used to 12 point font on print but often your computer screen is farther away than a book would be. So we want to look at this size comparison and make sure that we're using no smaller than 16 which is about one E.M. if you're using relative. We want to make sure that readability is great. We want to make sure that things aren't jumbled. If we think back to the New York Times this probably isn't an ideal site for readability because it's so text oriented and it's a little clutter but it does mimic a newspaper very well and I think that's what we expect when we go to the New York Times but for your average developer site it may not be a great thing. Let's also consider layout. Do things make sense? Do they flow in a great way? We'll talk about fonts here. Here's a form I found that is a little bit, it doesn't have great flow let's say. So if we go here, create an account, we type in our email and we're scrolling over expecting maybe another side of the form but there isn't anything so we're creating a behavior that you can just continue on scrolling down. So here I fill out my first name. This is company but I start filling it out and I might get a call or I might have a memory issue and so I continue filling out my last name thinking that perhaps that's what I was filling out. And then we continue with this form and if you remember there was a different part of the form but we've just created a behavior for a little vision user for someone with memory loss, things like that that there is only one column here. So we'll continue filling this out and we don't see state so maybe state goes in the city, we're not really sure. Let's try it at, we also are expecting the next button to be right below since we created that behavior but it doesn't appear to be there so where is it? Once we find it, we hit next and nothing happens. There's no alert. We don't get a screen reader alert, we don't get an alert visually saying you haven't filled out certain sections. Turns out that like we saw at the beginning there were all these sections, that's where state was, that's where last name was so we filled out last name incorrectly. Here's the cleaned up version. Think about mobile users in this case. It's creating a bad experience for them, it's creating a bad experience for it like I said it's memory loss. Someone who has to increase their size on their screen. So let's think about all these things as a developer. Looking at click targets. We want to keep things larger and spread apart. Vitz's law tells us that speed accuracy trade-off characteristics, the speed accuracy trade-off characteristics of human movement are huge so we want to look at this and see that our click targets are small and pretty close and I get a little bit lost, I over click sometimes I need to readjust. If we look at this one, they're bigger and farther apart and we can see that my accuracy is much, much higher. I go straight to the element and I'm able to click. So think about these things when you're creating your buttons. Like I said, it makes a great experience for a mobile user as well or someone with a small screen. We want to make sure the size can be scaled well. We want to look at relative versus fixed. There are a lot of arguments either way as you all know but as long as you're doing it in such a way that things are still readable, things still maintain the same layout and they are still well presented. So how can we integrate all these things as developers in our very busy lives? Because often the business you will approach you and want a shipment, right? They want you to get a feature out of the door. So we can look at things like linters. If you're already using some, why not just integrate a few more into your process? Maybe one. Try out one at first for screen reader usability. We can look at checklists. There are plenty of checklists out there. There are many hundreds of checklists that involve usability and accessibility. We can look at our workflow integration and just really try to work it in. We can be advocates. When the business team comes to us and says we want this feature out of the door, we can say we would really like an extra day or an extra hour to consider usability and accessibility. So can we have that time? We really wanna advocate for this. We can try it out. We can put ourselves in someone else's shoes. We can use our screen reader. We can try out a voiceover. And another great thing is user trials. Try and find someone with a friend with a cognitive impairment or a friend who is visually impaired and see how they use their site. As we all know, we find a lot of unexpected behaviors with user testing.