Demystifying Web Accessibility

Rate this content
Bookmark

Accessibility is a decisive tool to make the internet a more inclusive place, it is absolutely crucial and despite the popular belief that only a small user group is affected, it benefits every single one of us. After a brief introduction, we will dive into practical tools to create more accessible websites and test for the most common web accessibility issues. Let's make the web more inclusive, one page at a time!

11 min
18 Nov, 2022

Video Summary and Transcription

Web accessibility ensures that people with disabilities can use and participate equally on the web. Over 15% of the global population has some form of disability. Improving web accessibility can be done using tools like ex-DEV tools and the web disability simulator. Color contrast plays a crucial role in readability, and semantic HTML and tab order help with functionality and user flow. There are additional tools and extensions available for further exploration.

Available in Español

1. Introduction to Web Accessibility

Short description:

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. 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. Over 15% of the entire global population are experiencing some form of disability over the course of their life. Different user groups benefit from web accessibility, including people with disabilities and those without disabilities in various situations. To get started with improving web accessibility, you can use general tools like ex-DEV tools for an accessibility audit and the web disability simulator to experience your page from the perspective of different user groups.

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 the 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 maybe 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 texts, 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 track pad, 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, or 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 gonna switch over to the browser for this. This Storyblock, the company I work for, we're 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 gonna make it a bit smaller, was, for example, to run one of these general tools. There are, for example, the ex-DEV tools. I'm just gonna open this up, scan the entire page, and it's gonna 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 gonna 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 gonna 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 app, 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 gonna find all the issues, you will have to test them also manually, but it's a good starting point for sure. So I'm gonna close this app, and I'm gonna 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 gonna select here Total Colorblindness, for example, and it's gonna show me what people with colorblindness maybe experience our web site as. I can also learn more or reset and pick something else like red-green colorblindness for example, that's gonna look completely different, but everything kind of still looks visible, right? It's a good starting point.

2. Color Contrast and Accessibility Levels

Short description:

If you switch to a bright background like sunshine, you'll need more contrast to ensure readability. The color contrast checker tool can help you with this. It allows you to choose background and foreground colors and provides accessibility levels for compliance. Aim for a color contrast ratio of 4.5 to 1 to comply with AA standards. Darker colors against white tend to provide better visibility for people with visual impairments.

Now if I switch here over to sunshine, you see we're gonna 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? 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 gonna pick maybe this turquoise and you can pick a foreground color, white, and we see here we're actually failing different levels. So these are different levels of accessibility that you can choose to comply with. AA is usually the most common one that people try to comply with. And 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 one against the white, we are failing that. 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. Something that you can also read with maybe bright sunshine or people with visual impairments.

3. Semantic HTML and Tab Order

Short description:

Semantic HTML brings inherent functionality and helps with different input methods. It's important to have visible and contrasting focus styles to know where you are when using the keyboard. Ensuring the tab order follows the user flow and using tools like Tab Ally can help achieve this. This was a quick dive into web accessibility, but there's more to learn. Feel free to check out the QR code for tools and extensions or connect with me for further discussion.

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 gonna 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 flushes 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, right? And that 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. Now, we see here, we're going from the top across our navigation and 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.