Have you ever tried interacting with a modal using only the keyboard? Oftentimes, you’ll find that it’s difficult or impossible to do so because of poor focus management. In this live-coding session, we’ll build an accessible modal component that covers how to contain focus, the necessary WAI-ARIA roles, states, and properties, and what to do when the modal closes.
Ashlee Boyer is a Disabled web developer, freelancer, and knitter that specializes in web accessibility. She writes about it on her blog and has a live-coding series about building accessible React components on Twitch. Her goal with teaching about accessibility is to show other developers it’s not as difficult as it’s made out to be and that just like any framework, technology, or algorithm we learn as developers, it takes time and practice.
-
This project is a small Next.js app and was generated using Ashlee's
nextjs-generator. -
It's deployed on Netlify and can be found at react-indy-20201028.netlify.app.
-
You can see in this commit what code was written during the live-coding session.
- The WAI-ARIA Authoring Practices Modal Dialog design pattern and examples
- The eslint-plugin-jsx-a11y package for checking accessibility rules on JSX elements
- The axe-core accessibility engine for automated Web UI testing
- The ChromeVox Classic Extension for screenreader testing
- Lighthouse for automated accessibility, PWA, and SEO testing
- But also: "Building the most inaccessible site possible with a perfect Lighthouse score"