Automating Accessibility Testing for Your Component Library

Rate this content
Bookmark

Are you a developer tired of manual accessibility testing and the long feedback loops it entails? Do you want to efficiently audit and test the accessibility of your components while saving time and effort? Look no further! In this talk, we’ll explore how Storybook, a widely-used open source tool to document your UI components, can be used to automate accessibility testing.

Praveen Kumar D
Praveen Kumar D
41 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk focused on automating accessibility testing for component libraries using Storybook. The importance of web accessibility was emphasized, along with the benefits of incorporating accessibility from the start. Storybook was highlighted as a valuable tool for component-driven development, testing, and identifying accessibility issues. The integration of the accessibility add-on in Storybook allows for component-level insights, efficient feedback loops, and automated accessibility testing. Manual testing and addressing complex issues with screen readers were also discussed.

1. Introduction to Web Accessibility

Short description:

Today we'll be speaking about automating accessibility testing for your component library. We'll cover web accessibility, how to measure it, when to consider it, the role of Storybook, how to include accessibility in your component library, and comparing accessibility add-on with Lighthouse and benchmarking. Web accessibility is about building websites that can be used by all. It's important to ensure readability, usability for assistive technologies, and keyboard navigation. Web accessibility is crucial for more customers, compliance with legislation, SEO benefits, and improved usability. Measuring accessibility involves perceivability, operability, and understandability.

Hello, today we'll be speaking about automating accessibility testing for your component library. So we look at the different things that we'll be covering today, web accessibility and its how to measure web accessibility, when to consider accessibility, Storybook and its role in web accessibility, how to include accessibility in your component library, and then we'll be comparing accessibility add-on with your Lighthouse and then benchmark and then see how each one is better over the other.

Okay, what is web accessibility? Building websites that can be used by all. That is a simple definition of it. So that means that if I am able to do, if I am able to use something on the web, the person sitting next to me should be able to do the same things that I can do on the web. So for this to happen, you should make sure that you have ensured readability and usability for assistive technologies like your screen readers, you have made sure that your web application can be navigated through keyboard controls. So these are one of the important things to make sure that your application is accessible.

Now why web accessibility? Usually people think accessibility as something that is a good to have but today I'm going to tell you why it's not just like a good to have thing but a much to have thing. Firstly, more customers. So this is like one of the most important things because about 15% of the global population has some kind of disability. So this gives you an opportunity to tap into the 15% that your competition is not looking into. But this sets a differentiation from a competition and definitely helps you target more customers. Secondly, compliance and legislation. So today as I told you, accessibility has become a much to have and a lot of countries have already declared accessibility as something that you should other to. If you are not accessible then you may end up paying huge fines. So to avoid penalties and huge fines, you should make sure that you are compliant based on whatever your region depends. Thirdly and the most important thing is SEO benefits. Usually people think SEO is something that is just to do with your content but with accessibility, right? Most of the search engine today are optimizing for accessible websites. So if your website is accessible, the probability of you ranking higher in the search results is really high. So you should make sure that if you are just looking for SEO, it just isn't your content that is present on a website but also accessible nature of a website that is very important for your SEO. And then finally, improved usability. Accessibility does not just help people with disabilities but also helps people without any disabilities. For example, a person living in a remote village or someone who's old who's not able to use the website will be able to take benefits based on the accessibility nature of the website. So how to measure accessibility? Perceivability. Ensuring that the information presented is easy to perceive and understand. And secondly, operability. This makes sure that you can navigate and interact easily. So no matter who comes to your website, right, they are able to navigate and interact through your website. Then, understandability. This is making sure that everything on your website is easy and clear to understand.

2. Considerations and Storybook

Short description:

To ensure compatibility and robustness, consider making your website accessible from the start. Start with incorporating accessibility in component development and addressing basics like ARIA rules, color contrast, and font sizes. Covering these basics will already make your application 60% accessible. Then, focus on enhancing the user experience on assistive devices and managing reading order. Storybook is an open-source tool that helps with component-driven development and isolated testing, making it a valuable tool for improving efficiency and cleanliness of projects.

And then, robustness. This is ensuring compatibility with various technologies, including assistive devices like your screen reader and others. And then, compatibility. This is making sure that the features that you have built for your website is compatible and works seamlessly across different assistive technologies.

When should you consider accessibility? Usually people think accessibility as something that you can do after you build your website, after you have everything ready. And then once you go live, right, people usually think that accessibility is something as an afterthought that you can think about. But I would beg to differ. Accessibility is something that should be considered from the start if you want to reap the benefits of accessibility.

So, how do you do it? Start with the components. So, today, everyone follows component-driven development. So, you should make sure that you incorporate accessibility and its consideration right from the start while you begin your component development. Secondly, address your basics. So, the basics like your ARIA rules, color contrast, font sizes, accessible design, and then a few other items attribute to about 60% of the accessibility requirements. This is massive. And today, in my talk, I'll also be trying to help you with strategies as to how we easily make our website accessible and how we cover all these 60% of the basic requirements that are very easy to cover if you have the right strategies and plan in place. And then finally, once you've covered your basics and you know that your application is already 60% accessible, now what you do is you just try to look at the complex cases, right? Like, for example, how do you enhance the user experience on these assistive devices? How do you manage the reading order? And you can tackle all the other complexities.

Now today, I'll be introducing you to a tool called Storybook, which a lot of you must already be familiar with. So Storybook is an open-source tool that helps you document, view and test components in isolation. Now why Storybook? Because Storybook helps you with component-driven development. Today, anyone who is doing component-driven development, right? Use Storybook. We'll firstly look, why Storybook, right? Isolated development. Today, you don't want to keep your components... the tests associated with the components and the various things that you want to do with your components in your application folder. So the easier way to do is with Storybook, you kind of isolate it. You take all your components to a different environment. And then you test your components there. You see if your components are compatible for mobile, tablet views and different things. You also test a lot of other things. So separating this right will definitely help you improve your efficiency and cleanliness of the project. So that is why Storybook is one of the mostly used tool today.

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

Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
a11y and TDD: A Perfect Match
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?
How to do Good Without Doing Anything
React Advanced Conference 2021React Advanced Conference 2021
32 min
How to do Good Without Doing Anything
There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced Conference 2023React Advanced Conference 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible. 
In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Creating Accessible React Native Apps
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
Scott Vinkle
Scott Vinkle
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!