This post is part of a series! Check out parts one and two:
This week we’ve been blogging about the topic of accessibility, since the recent GA launch of our commercial accessibility testing solution built into Cypress Cloud. This overall blog series is a chance to share what we’ve been working on and what we’ve learned with our customers, as well as a great chance to write more about accessibility as a topic.
Accessibility testing itself is nothing new in Cypress, and there are many different ways to account for accessibility in test automation which all complement each other. We’ve blogged in the past about considering accessibility in component tests, and recently added an accessibility testing guide to the Cypress App docs.
When drafting that guide I found I wanted to go a bit deeper into the community plugin side of accessibility and Cypress, as I realized that in 2024 alone, there have been multiple accessibility related plugins released, some directly related to testing, and others more geared towards customization of Cypress itself.
In this post we’ll take a look at three recently-released accessibility-related Cypress Plugins: Wick A11y, Cypress Runner Themes, and Cypress Voice Plugin, and hear from their creators.
Cypress Voice Plugin
This plugin was created by Dennis Bergiven, who told me “The voice plugin was inspired by your chat with Filip Hric, where you chatted over various ideas and topics using Cypress”. This was a really fun live stream Filip and I did back in 2023, and here’s the relevant clip called “How to make Cypress talk”. In it, I show how to use built-in browser Speech Synthesis to have Cypress verbally announce something at the end of a spec’s execution, especially where the spec might contain many tests or do something that takes some time and you have already moved your screen back to the next code change. (In addition to being a great testing educator, Filip is also the developer the popular Cypress API testing plugin.)
This was just a proof of concept, as we discussed various ways to hack different functionality into Cypress to customize it for specific testing needs. Dennis described later seeing a practical problem at work that this could help with, saying “The idea came back when some colleagues at work expressed they wanted a faster way to detect a test result when running in the UI.”
The end result is a highly configurable voice announcer:
Dennis added that “using native web speech API within the plugin fits right into the Cypress framework as it lives in the browser as well”, which made the implementation possible.
Links
Cypress Runner Themes
David Ingraham recognized two needs in the community and created a plugin to solve both. First he created a more color-blind friendly theme for the Cypress command in the Cypress App, to avoid using red and green to hint at the passing/failing status of tests. Then he rolled this up into a general Cypress theming package to combine and update some existing theming solutions like cypress-light-theme and cypress-dark.
David said, “I created `cypress-runner-themes` after a user on the discord mentioned they were having trouble reading Cypress results due to being colorblind and I noticed there wasn't any existing plugins out there. In combination with the old plugin `cypress-dark` being unsupported, I thought it would be a good idea to provide a newer theme plugin with accessibility support.”
Cypress does not have built-in theme support, but David has been able to leverage the fact that Cypress executes plugin code in the browser, and runs in the same environment, to make modifications to the Cypress interface. Plugins are a common way that the community can get out ahead and iterate on behavior that might be desirable in the Cypress App, without waiting for it to be implemented into the core Cypress library. Here’s an example of one of the themes:
“It was my first community plugin so I also wanted to learn something new while making a real impact on the community,” David told us. We look forward to seeing more in the future!
Plugin links
Wick-A11y
Created by Sebastian Clavijo Suero, and named for its John Wick-style ability to identify and remove accessibility issues with extreme prejudice, this summer blockbuster adds some visual, reporting, and voice-announcing dimensions to the cypress-axe plugin.
Before we hear from Sebastian, it’s worth backing up for a second to explain the connection between all these tools.
At the root is the open source Axe Core library by Deque Systems, which was released in 2015. Axe Core has over 1 billion downloads and is used in many accessibility testing systems such as Google’s Lighthouse, as well as in Cypress Accessibility. (Side note: we were delighted to welcome Dylan Barrell, the creator of Axe Core, to Cypress Conf 2023, where he shared his presentation about Agile Accessible Software Development.)
The cypress-axe plugin by Andy Van Slaars was first published in 2018, providing an easy integration in Cypress allowing testers to add Axe Core checks where they chose at different steps of the user journey in their tests. In our docs, we discuss more about these kinds of in-test accessibility scans work, so I won’t repeat that here.
While there are other accessibility checkers that also have Cypress integrations, cypress-axe has been the go-to for most Cypress users.
OK, now we’re up to date!
Much like the other plugin authors, Sebastian saw an opportunity for extending beyond the current behavior to solve a problem, and shared that solution with others. I send him over a few questions:
What inspired you to create wick-a11y?
I created Wick-a11y to significantly simplify accessibility testing, which is often neglected despite its crucial role in developing inclusive web applications. Although tools like cypress-axe are easy to set up, they provide raw data that requires additional processing for clear interpretation of the results. Wick-a11y seamlessly integrates with Cypress, delivering an easy-to-use solution to assess accessibility, interact with results directly in the Cypress runner, and effortlessly produce detailed HTML reports with screenshots.
What made Cypress a good platform for this?
Cypress is an excellent platform for wick-a11y due to its seamless integration capabilities with tools like axe-core for comprehensive accessibility testing. Cypress's interactive test runner and user-friendly interface allow for real-time interaction with accessibility results directly on the web page, enhancing the identification and resolution of issues. Additionally, Cypress supports detailed logging, providing testers with an efficient way to document and share accessibility findings.
Tell us about your recent addition of voice feedback
I added the voice feedback feature to wick-a11y, acknowledging that many individuals testing website accessibility are affected by disabilities themselves. By providing auditory cues alongside accessibility violations, this feature enhances the testing experience, empowering those committed to inclusivity to engage without barriers and continue championing a more accessible web for everyone.
Here’s an example of a test open in the Cypress App, showing some accessibility issues detected with cypress-axe and highlighted by wick-a11y
There is much more to see, so check out the links below to learn more about adding these kinds of accessibility assertions to your Cypress tests.
Plugin links
What comes next
The Cypress community has created a useful array of plugins to support accessibility testing and other customized extensions to the app. This is only a recent subset of plugins related to accessibility in Cypress - there are plugins for other accessibility testing packages beyond Axe Core, as well as accessibility-minded test locators from Cypress Testing Library, and more.
What I like about these three recently released plugins is that they represent extensions and iterations upon existing ideas to solve new needs. They leverage the hackability that’s inherent to the browser-based nature of Cypress to great effect, and they set the baseline for future iterations to continue building.
Do you have a plugin for Cypress? You can submit it to our documentation’s plugins list.
Next in this series we'll talk get into how accessibility automation fits into an overall approach to accessibility program. No automation solution detects and offers correct solutions for all possible accessibility problems - and yet Axe Core has over 1 billion downloads, so what's the deal!?
I'll share what we've learned working with our customers about how accessibility automation as well as traditional Cypress testing supports them reaching their goals and staying on track, and how it relates to manual testing, accessibility audits, compliance, and conformance reporting.