Demystifying Web Accessibility

Hi, everybody. Thanks for joining my talk. My name is Josephine. My pronouns are she, her, and in the next couple of minutes, I will be talking about web accessibility and ways in which you can get started with it. So let's dive right in. What is web accessibility? Web accessibility means that the tools, technologies, and websites that we build are designed and implemented in a way so that people with disabilities can use them and participate equally on the web. It's also a basic human right as defined by United Nations. And now, if that's not enough for you and you're still wondering whether web accessibility is something for you or the people you want to use your website, there was a report by the World Health Organization and they found that over 15% of the entire global population are experiencing some form of disability over the course of their life. And of course, global data is hard to measure and the experience of disability as well. But even if it's just a ballpark, in my opinion, that's a super powerful one. And I'm really hoping that if you're coming at this maybe from a business perspective, that the sheer number of people that are affected is going to convince you that this is relevant also for you. Also, we're all growing older. And so this is going to even get larger in the long run, right? All right. So here on this slide, there are a couple of the different user groups that maybe benefit from web accessibility. And so we see here different kinds of disabilities or impairments like physical, auditory, cognitive, neurological, speech or visual disability. But we also see people without disabilities. So people may be using a smaller device like a mobile phone, or maybe you're using your remote control to put in your favorite show on the TV. We also have temporary disabilities like maybe a broken arm or situational ones, maybe a new parent holding a baby. Or if you have a slower internet connection, and maybe the images are not loading, you're going to rely on web accessibility and get some alternative text, for example. So a lot of situations in which web accessibility is super beneficial. And in practice, that can look like many different things, right? So it can mean having enough color contrast to be able that everything is actually visible on the page, being open to different input methods, not only the mouse and the trackpad, but maybe also a keyboard or assistive technology, using semantic HTML to provide enough context for assistive technology like screen readers, but also for your browser, for things like explaining unfamiliar terms, being open to the fact that not everybody has the same ground knowledge and that we have to adhere to these different standards or backgrounds, right? But what does that mean? Where can we start? Now that I have convinced you, hopefully, that this is important for all of us, how could you get started? And I'm actually going to switch over to the browser for this. This is Storyblock, the company I work for. We're a headless CMS. But that's not the point. The point is that we're currently doing an accessibility audit. And one of the things I did on our own homepage, for example, this is actually quite big, so I'm going to make it a bit smaller, was, for example, to run one of these general tools. There are, for example, the X DevTools. I'm just going to open this up, scan the entire page, and it's going to find a lot of issues. So now 30 seems like a lot. It doesn't mean that there's everything broken on this page, but it's going to walk us through what exactly is wrong here, right? So we have an element must have sufficient color contrast. I already mentioned color contrast, and in a minute, we're going to see how you could test for that. ID attribute values must be unique. And like this, step by step, it's going to walk you through all the things that can be improved and that you will need to have a look at in order to improve accessibility on your page, right? And this is a really good, so if I open this up, it'll provide you with more information. You can share it. You can identify it in the code. So this is really helpful for first overall look. Of course, it's not going to find all the issues. You will have to test them also manually, but it's a good starting point for sure. So I'm going to close this app, and I'm going to open up the next tool, which is the web disability simulator. So this enables you to experience what maybe different user groups experience your page as, right? And now I'm going to select here total color blindness, for example, and it's going to show me what people with color blindness maybe experience our website as. I can also learn more or reset and pick something else like red green color blindness, for example. That's going to look completely different, but everything kind of still looks visible, right? It's a good starting point. Now, if I switch here over to sunshine, you see we're going to need a lot more contrast to be able to read what it says, for example, on the button here. And it's really difficult to say, I think here is something written, but I can't really tell. So this already shows you there's lots of different use cases for web accessibility, right? And it's just very, I mean, this is really rough, but it's a good starting point for sure. And now if you want to get into a bit more detail on the color contrast, I have another tool for us. It's the color contrast checker. There are many different ones out there. This is just the one that I like best. And this is going to help you. You can pick a background color. I'm just going to pick maybe this turquoise and you can pick a foreground color and white. And we see here, we're actually failing different levels. So these are different levels of accessibility that you could choose to comply with. And AA is usually the most common one that people try to comply with. And we to comply with AA, we need a color contrast of 4.5 to 1, meaning that the background and the foreground are different enough to have a good ratio there. And with the turquoise against the white, we're failing that, right? So this is something to look into. And now if we were to check here, just for comparison, we see this really dark bluish color against the white writing gives us a really good score and we're passing all the different levels. So this is kind of where you want to aim at, right? Something that you can also read with maybe bright sunshine or people with visual impairments. Now, there are also things that I mentioned earlier, being open to different input methods. And semantic HTML really helps with that because it brings inherent functionality. And many things that we will need to interact, for example, with a keyboard, with our page. And now if I use the tab key to go through my page, I can go up here. Now I'm going backwards. You see, I have a focus style around my button and that's going to help me know where I am if I'm using the keyboard. And you see, it looks a bit different on the button. Something is happening, but it's not entirely visible. And if I didn't, like I wouldn't know where I was right now. If I tap to the next button again, it like really quickly flashes up, but it's kind of hard to tell. I think it's white and then same here. And now it's kind of cut off. So this is also something I would want to look into, right? What do the focus styles look like? Do they have enough contrast? Are they visible? Are they big enough? Do I know at all times where I am if I'm not navigating with the mouse? And one thing that I also want to take care of is that the tab order, so the way in which I go through the interactive elements on my page is correct. And if I say correct, I mean, in this case, the language of this page is English. So I would read from top left to bottom right, and this is how the user flow would go. And I want to make sure the tab order is the same. And I have another tool that we can quickly use to visualize the tab order. It's called Tab Ally. And it's going to help us show in what order the interactive elements can be reached. Just takes a second. And now we see here, we're going from the top across our navigation, then we jump down to the buttons, to the video. This looks good. And this is kind of what we want to achieve, right? We're going from top to bottom and from right to left. The only thing here to check would be, well, can I actually see the focus where I am, right? And that was already it. That was a really quick, deep dive into web accessibility. And I said deep dive, it wasn't deep. It was a quick dive into web accessibility. I hope you're curious to learn more. If you're interested in any of the tools, feel free to check out this QR code. You should find the tools and the links to the extensions there. Or if you want to discuss anything web accessibility related or really anything else, feel free to connect with me on the socials or via email. I'm looking forward to meeting you. Enjoy the rest of the conference.