Putting Your Site's Accessibility to the Test with Cypress and Axe

It’s no secret that we care deeply about accessibility at Sparkbox. This is a natural extension of our desire to create beautiful, enjoyable user experiences across the web and the wide variety of devices that consume it. Accessibility comes into the picture because, at its core, accessibility is usability.

Just like we build and test for responsiveness across mobile, tablet, and desktop screens, it’s important to build and test for accessibility with devices like screen readers that don’t include a visible screen. Just like we ensure that our sites are navigable via touch, trackpad, or mouse, it’s important to ensure that they’re navigable via keyboard or other assistive technologies. With careful consideration and testing, we’re able to meet our users on their own terms in the way that is best suited for them.

The Case for Automated Accessibility Tests

In general, automated tests of any type are not a replacement for manual tests. Rather, they add an additional layer of confidence that things are working as expected. By reducing the effort necessary to manually test for regressions, automated tests enable us to focus our extra time on things such as exploratory and usability testing.

This is also true with automated accessibility tests. By employing automated tools to help us identify basic accessibility issues, we free ourselves up to invest more effort into manually testing larger issues and ideas that help us craft an accessible experience for users.

In the following videos, we’ll take a look at a few tools that help us with accessibility and testing, and we’ll see how we can combine them to build a suite of automated accessibility tests for our site.

Testing Accessibility with Axe

In the first video, we learn about Axe, a wonderful tool for helping us identify accessibility issues on a webpage. Axe is available as a browser extension to run directly on a webpage or as an npm package to run programmatically.

Automated Testing with Cypress

In the second video, we give a quick intro to Cypress, a delightful end-to-end testing tool. Cypress is a powerful tool for testing websites from a user’s perspective.

Combining Cypress and Axe

In the third video, we’ll combine the power of Cypress and Axe with cypress-axe, a helpful Cypress extension that injects Axe into our Cypress tests.

Expanding on cypress-axe

In the fourth and final video, we’ll talk about extending our test output with additional information to help us more easily identify and fix accessibility issues. We’ll also use our accessibility test results to help us fix the issues that they’ve identified.

There’s a Catch Though, Right?

When it comes to automated testing, there’s no silver bullet. Tooling is one piece of the overall puzzle, but remember to treat automated tests as an enhancement to—not a replacement for—manual usability and accessibility testing.

While Axe is a great tool to help identify accessibility issues, it’s important to manually test sites for usability concerns. Here are a few simple ways to ensure a site is usable and accessible.

Navigate Through the Site Using Only a Keyboard

Many users interact with the web without a mouse, trackpad, or screen. By ensuring that sites are easily navigable with only a keyboard, you can make these users’ experiences easier and more enjoyable.

Use the Site with a Screen Reader like VoiceOver

If you’ve never done this before, testing your site with VoiceOver can be a very enlightening experience, and it encourages empathy for users who rely on these technologies.

Conduct Accessibility Tests with Real Users

There is simply no substitute for testing with real users. Observing how users interact with our sites using assistive technologies provides invaluable insight to help us build better, more accessible web experiences.

Try It Out!

If you’d like to try out the examples from the videos, you can find the repository, along with instructions to get started, on Github. Thanks!