Accessibility Matters: Creating a Better Web

Speaker 1: Okay, so next on stage here is Lindsay Dragoon. She's going to talk to us about accessi accessibility and why that matters and why we should care about making websites and things look not just beautiful but also in a way that People that may not be like many others are able to use our websites. Thank you. Give her a round of applause.

Speaker 2: Hi, welcome. As he said, I will be giving an accessibility talk. Accessibility matters, creating a better web. To give like a brief rundown of what this talk will include, I'll do an intro to myself and the topic. I'll do a brief accessibility explainer and give some examples of good and bad accessibility. And then I'll do a conclusion with ways that you can improve accessibility. What this talk won't have is a reliance on slides. So if you can't see them very well, you won't miss too much. It also won't have any animation. And it won't have any cat pictures. I'm a dog person.

Speaker 2: It's Remus. He's a cutie. After the talk, my slides will be up at dragon. tech slash DjangoCon EU. So that's D-R-A-G-U-N, like my last name. Uh could not manage to push them earlier. So uh after this I'll be trying to I will also be taking questions like in the hallway or somewhere afterwards. I don't like getting up and talking in front of a bunch of people when I'm not sure about my questions. So I don't want to like Make anyone feel uncomfortable here. A little about me. I'm currently a technology evangelist But I'm a former web developer and I did a lot of work with accessibility while I was working

Speaker 2: on a lot of front-end projects. I'm also a bootcamp graduate, so I Started off in like another field and I run disabled in tech Slack. So if you're disabled and work in tech or want to work in tech, it's a Slack community for you Uh so what I was doing beforehand was I was um working in peace and conflict and I have an MA in peace and con the International Peace and Conflict Resolution. And why this really helped me with accessibility is that one of the main focuses of that is understanding what causes people distress. even if it's a culture or something else that doesn't resemble one I'm familiar with.

Speaker 2: So when I came in and started doing web development, it was easy to transition that into doing something with accessibility, but you don't really need a background to understand why accessibility is important. What is web accessibility? I've mentioned it a few times now. Web accessibility means that people with disabilities can perceive, understand, navigate. and interact with the web and they can contribute to the web. That's the official World Wide Web Consortium or W3Cs. uh definition of what web accessibility is. They have a group called the Web Accessibility Initiative, and those are the people behind what you will

Speaker 2: hear come up a bit. The Web Content Accessibility Guidelines or WCAG. They also make this easier to remember by putting in an acronym. And that acronym is POR. And this is for the guiding principles behind WCAG 2. 0. And it's just that it's perceivable, operable, understandable, and robust. pretty easy to when you think about like how you want someone to be using your website. WCAG 2. 0 is the standard in many ways in multiple countries. Uh for example, European Union's sites are supposed to all use WCAG

Speaker 2: 2. 0 for their official government sites. And in 2016 they put in a directive that public sector sites should also adhere to it with only a few exceptions for things like uh live streaming and that sort of thing. And member states are actually supposed to add it in to their own legislation by later this year. So for the EU, it's pretty big deal right now. Who is the target for web accessibility? People with disabilities make up around 10 to 20 percent of the population, according to most studies. So this depends of course on like how the government defines

Speaker 2: disability or things like that. And it's a broad scope, but that's potentially a really huge amount of people. Even at ten percent, that's still a large portion of a population. These disabilities are generally broken down into five main categories by WCEG and other resources like that. So there's visual, and that's like blindness, glaucoma, but it can also be things like uh floaters. Which are these little like dots that float in people's vision that can make it hard for them to see little details on a website? There's auditory, and that can be deafness and hard-of-hearing folks, and it can also be things like tinnitus, where people have a ringing in their ears that can interfere with them hearing things on a website.

Speaker 2: There's motor and physical, so cerebral palsy, Parkinson's, anything that could cause someone's like hands to shake. or make it difficult to use the device or like touch something on a touch screen with like great accuracy. And there's cognitive and neurological. So that's like autism, dyslexia. A lot of people when they talk about web accessibility, they think about um like people that can get seizures from flashing things. And that's all in here. But also there's language and speech, which a lot of people don't think of, but is getting more and more important

Speaker 2: as more devices are relying on you to use your voice to interact with them. So people who don't speak or don't speak often or stutter a lot can have issues using those. But there's also like more than that because disabled people can be limited to just those categories or they might only you might only think about what your country considers disability but there's a lot of people with accessibility needs that don't necessarily fall under those categories. And there's lots of ways to break that down But one of my favorite ways to do it, I originally heard from a Canadian expert named David Berman, and he does four different categories.

Speaker 2: He does permanent, and that's like being born blind. It's something you have, it's something you'll probably always have. Uh there's temporary and that's like being sick. Sometimes you get so sick you can't do the same things you're used to doing. There's acquired, and the most obvious one for this is aging. As you age, it gets harder to use certain devices. And there's societal. And that's things like left-handedness. You might hear jokes sometimes about like people getting hurt using right-handed scissors when they're left-handed. And the point of that is that like Our society has made it that way. We've designed things to be used by right-handed people

Speaker 2: because right-handed people are making them. People with accessibility needs, regardless of what they are, may also be using less common tools because of the difficulty they have in using the common ones. These are generally called alternative input or output tools, and there's basic ones that are like foot pedals instead of mice with your hands. Um there's also touch screens that you can fit over other screens or obviously just get a computer at a touch screen now. There's eye tracking so people can have like a little device that follows how their eyes move and uh braille displays that just print out braille that people can touch

Speaker 2: And all different ways that people translate the web into a way that they can digest the information. But also all of the categories for this can be deceptively simple because when you're thinking of users, it's not just that they fall into one area or that they maybe are only using one special input or output. It's that normally people have a few different issues when they have one. And also they can fall into multiple categories. Someone who has a mental illness is still going to get sick like everyone else, and everyone's going to age. And a lot of these issues also

Speaker 2: tend to come together. Like someone will have one issue that leads to another or is connected to another. So you have to think about more than just one thing every time you're designing. Also, one way to like keep up with that is that they're not edge cases when you're doing them, right? You're not thinking about them as like, oh, this might happen in a very rare occasion. Maybe I'll test for it. Maybe I'll look into it. But if you think of them as stress cases or like the moments that put our design and content choices to the test of real life. um a quote from the book Design for Real Life, which is very good.

Speaker 2: You end up thinking about them as like These are ways to test my code and test my site to make sure they'll stand up to nearly anything. Like they're not going to have an issue because I've tested everything and it's good. So some examples of accessibility issues. There's color and size. So if the text is very small or say light on a light background, it's harder for anyone to see. But if the text is big or has a lot of contrast between the background, it's a lot easier to see. Uh I go to the eye doctor a lot and there's an

Speaker 2: Like visual chart you have to read off and they always are like, read the smallest line that you can actually see And that's a lot like what the web is for some people. It's that you're trying to read like a really tiny bit of text that's like really hard to see. There's also the issue of like text not being very different. This is a major problem for say people with dyslexia, who often will see letters but maybe not in the way that we are. One of the major ways I test for this, uh, when choosing a font for something, is just I type out one like the number one, a small a lowercase L and then a capital I

Speaker 2: and in a lot of fonts They look very similar or the same. And that's not a good font to use if you can't tell the difference between those letters and numbers. You can also use alt text on photos. This gives people that can't see them a lot of information about a photo. It's uh also what you see when the photo breaks, so it can be very useful in multiple ways. And don't use words like image. Like people will be like image of a dog, and it's like they know it's an image. They've probably been told it's an image. They've just heard image image of a dog on their screen reader.

Speaker 2: You can also make changes noticeable. Like if you ever fill out a form with like your screen name and password And you get down and you click it and nothing happens. And you're like, was it wrong? Is it broken? What happens? It's it's hard for anyone to like understand what they should do then. But if it gives you some sort of feedback on it, so maybe it makes the word password read. And then you're like, oh, it's the wrong password. But like that's not very noticeable either. So some people put something else, like an X in a red password. And you can even go one further and put like an actual message. Be like, hey, your password's wrong.

Speaker 2: And that way people will actually be able to understand what happened without having to like search it out or just put in their password over and over again hoping that's what the issue is. There's also ways you can make these changes more noticeable. So there's like this thing called ARIA alerts, and it's code you put in your HTML. And it will alert someone if there's a change on the page. So when you do that message that their password's wrong it will actually tell people that can't see it at all that that's happened. It's a way to communicate with screen readers, which are what read out what's on a page to people that can't necessarily see it or see it well.

Speaker 2: And I'm like kind of just going over this very quickly and talking about like a few examples, but it's not necessarily like an easy fix. I like to think of it in a few different ways, but the way I've been using it recently is there were these books when I was a kid that were really popular called um The Wayside School Gets a Little Stranger was one of the books. It was like Wayside School is a really weird school with really weird kids. Yay. But one of the stories is about the school getting elevators and it's so exciting because like it's a really tall school and finally they have elevators and they get one they get two elevators and one goes up and one goes down

Speaker 2: But that's all they do? Because they hadn't thought about like, hey, wait, these have to reset so people can use them again. So only the first people to ride the elevators actually ever got to use the elevators. Uh at my last job this came up a lot, this sort of like thing came up a lot when we were going through web video like videos on our websites was a major part of what we did. And we had a lot of tests that we ran through, some of them manual, some of them not. But one of the most uh showing, I think, of the manual ones we did was just like this really basic one that was like still really important.

Speaker 2: We'd cover our eyes or close our eyes or whatever and we put on headphones and we turn on that screen reader that reads out the web page. And we perform a simple task. It was Go from the web page to a video, play the video, and then pause the video. So we do this to our own site, but then we'd also go to competitors' websites and we'd do it there. Some of them we couldn't get to a video at all, which, you know, whatever. But some of them we could get to a video. play it, but we could not pause it. Like one site for a long time had the video pop up as a modal But you were still behind that modal. Like you could not interact with the modal if you were using a screen reader.

Speaker 2: If you didn't have a mouse You were out of luck. You had to refresh the page or navigate away from the page in order to stop the video. And this is kind of like that elevator, right? Like people are like, oh, we're going to install something that goes up. And they didn't think past that. For the video thing, people were like, okay, we have to make sure people can play a video. But no one thought like people do more than just play videos. People interact with the controls of a video. So when you're thinking about like how do I move past that? How do I make better accessibility happen

Speaker 2: and not just do the basic steps? It's it's hard, but it's something that like nearly anyone can do to improve it, regardless of their role. You can do stuff like avoid gimmicks. Normally what's really popular on a website isn't necessarily good for accessibility reasons. So like There's infinite scrolling that was really popular for a while. But people do infinite scrolling, but then have a sidebar on the right that you had to get to. So people navigating through without a mouse would hit the infinite scroll section and then they just go through it and go through it and go through it and they'd never be able to hit that sidebar.

Speaker 2: If little things like that can cause a ton of frustration and just make people leave the website. You can also just think about how your users use your products. Things like WCAG and other standards are just that. They're standards, they're general. They're considering like an average use case. It's not necessarily what your users are dealing with or what they're doing on your site. You can avoid user hostile decisions. So if you've heard of like user-friendly, this is the opposite of that. It's something like having five different autoplays on your website or having loud noises

Speaker 2: that suddenly occur unexpectedly. These are really bad for people with anxiety and PTSD. It's really extracting for people with attention disorders. It can trigger seizures or migraines to have a lot of autoplay. And the list goes on and on. And a lot of browsers are disabling it now. Chrome, for example, had a huge issue with it because they were disabling autoplay and it broke a lot of video games. So if people hadn't made that huge issue the web games wouldn't have had this problem. You can also just push back on inaccessible decisions. Maybe the people creating them hadn't even realized

Speaker 2: that was inaccessible. You can explain why something might interfere with how people use the site and that you could miss out on other users. And also if you offer alternatives, people are generally likely to take them. Because if they hadn't thought of it, they're wanting some easy fix now that it's been mentioned. You can do opposition research. This is really big, I think, as a way to get people at your company to understand how important this could be. If your competitors are more accessible, then that means they might be getting people that you're not getting coming to them. That 10 to 20% of disabled people and the people on top of that that have other accessibility needs could be lost users for yourself.

Speaker 2: If they're less accessible than you, or you can make yourself more accessible. That's a niche that you can have that they're probably not even considering. And if you embrace that, you can get way ahead of others And the disabled community tends to talk to each other. They'll be like, hey, this one website, it's really great to use. And suddenly you might get more and more users coming to you. You can also reach out to your designers. A lot of them think about accessibility, but maybe aren't putting it into the product because no one's talking about it. There's a type of design called universal design, which is basically a way of designing the world around us to work for everyone from the start.

Speaker 2: Whereas generally accessible design, especially in the real world, is kind of just like put on like a wheelchair ramp on the side of the building that's really hard to get to and no one can see. and that sort of thing, whereas universal design you're supposed to be planning it from the start. Um for example outside in the green, there's like steps surrounding the area, but there's also ramps along with the steps, and it makes it so everyone can get in and out of that area. like grassy play area I guess. And this is an example of universal design. When they were putting in the steps, they thought, hey, people with ram like people who need ramps also need to access this space.

Speaker 2: And then they design them together and it looks decent and it works well. And this is the goal of accessibility for websites as well. You don't just want like a button somewhere weird on your sidebar that says like click this to get high contrast color. You want the color to already have contrast. You want it to already be easy to see so everyone can enjoy it Um and even if you can't get any major changes to happen, you could at least get the bare minimum. So a lot of places we'll just remove stuff not thinking about why it's important.

Speaker 2: Things like focus date, link decoration, form labels, these are all helpful to many, many people. For example, focus date is this little box around uh border around whatever you're usually interacting with on the web. might be like a button and if you click that button you'll see that an outline appears. And if for people that aren't using mice, this helps them know what they're interacting with on the page. Link decorations are classically like an underline on the link and that helps people know, hey, this is a link. So even if you can't get them to put more accessibility in, you could try not to let them remove accessibility

Speaker 2: You can also remember that words are important. Your written content matters just as much as your visual content. For example, like I was going to a keyboard website to buy like an ergonomic keyboard, which you think like people with accessibility needs. might need an ergonomic keyboard. And I was reading through the descriptions at one point, uh they used a word, uh well they used the phrase, no sane application would do this thing. We all know what they meant. You know, they they meant well made, they meant logical, but what they used was a medical term that is used to refer to human beings

Speaker 2: And basically they're saying like no logical sane person. And it it gets really uh really annoying, I think, to a lot of people. If you've heard the term microaggression, people hear hear and read these things all the time. They see words that are used to describe themselves or not, and it's a reflection of how the world might associate that word with other meanings. And it's can hurt people and it can lose you customers as well because the people who don't care about those words won't even notice them

Speaker 2: but the people who do will notice Uh you can also just try like really basic tasks like try keyboard navigating your site. Just like Find out how to turn that on in your browser, learn a few very basic commands for your keyboard, and go through it and see how hard that is. You can also get real input from users. For example, like UX researchers tend to go out and sit in cafes and give people gift cards for going through their designs. you can do that for accessibility as well. And if things are slow or if it's hard to prioritize accessibility, you can have an accessible way for people to report issues with your site.

Speaker 2: That way you're having a lot of people possibly giving feedback on what seems like bugs, but maybe that's how you designed it. And people might actually listen, like the product owners might actually pay attention. There are also benefits to having accessibility beyond just the happier user base. Good accessibility is good code. WCAG handles both standards. So you know the HTML you're using and the CSS you're using is good. It's less work for future devs because it's good code, because the headers are all in order, so it's not like an H1 on one page. Followed by each three, each one again, because you're using those for sizing.

Speaker 2: Crawling and indexing tend to interact with a site the way a screen reader does. They're just seeing your HTML in it. And so you're putting all these SEO tags on your site, but you also might be missing out on other means. It could of course be the law. We talked about that a little bit. There's certain legal obligations, and especially if your site is, if your company is international, this can come up. So there's lots of reasons for accessibility. It will make your users happy. It will make your company customers. It will make your lawyers happy. And it also just makes for a better, easier product to work with. So finishing up, once again, you can find my slides after this

Speaker 2: at dragon. tech slash DjangoConiu Uh you can also I'll have a link on there to download free trial of Jaws, which is like the major uh major screen reader that people use right now. And there's also lots of browser extensions I'll link to that will also allow you to s like do different accessibility tests. You can also contact me. My email is lmhazinmishelle dragon at gmail. com and my site of course is dragonwitheu. tach. Thank you.