Exploring Open Source Accessibility Plugins in Cypress

Cypress has recently made strides in the realm of accessibility with the launch of its commercial accessibility testing solution integrated into Cypress Cloud. This blog series aims to share insights and developments in accessibility testing, a vital aspect of web development that ensures inclusivity for all users.

Accessibility testing in Cypress is not a new concept; there are numerous methods to incorporate accessibility checks into automated testing. Previous discussions have highlighted the importance of considering accessibility in component tests, and a new accessibility testing guide has been added to the Cypress App documentation.

As part of this exploration, we will delve into three notable open-source accessibility plugins released in 2024: Wick A11y, Cypress Runner Themes, and Cypress Voice Plugin. Each plugin offers unique features aimed at enhancing the user experience and addressing specific community needs.

Cypress Voice Plugin

The Cypress Voice Plugin, developed by Dennis Bergiven, emerged from a collaborative discussion with Filip Hric. During a live stream in 2023, they explored various ideas related to Cypress functionality. The plugin utilizes the built-in browser Speech Synthesis feature to audibly announce test results after executing a spec, which is particularly beneficial when running multiple tests or lengthy operations.

Dennis noted that the plugin was inspired by feedback from colleagues who sought a quicker way to ascertain test outcomes while using the UI. The result is a highly configurable voice announcer that allows users to adjust voice rate, pitch, and volume directly within the Cypress interface.

Cypress Runner Themes

Cypress Runner Themes, created by David Ingraham, addresses two significant community needs: providing a color-blind friendly theme and enhancing overall theming options for the Cypress App. This plugin was born out of a conversation on Discord where users expressed difficulties reading test results due to colorblindness. David recognized the absence of existing solutions and decided to develop a new theming package that incorporates accessibility features.

Although Cypress lacks built-in theme support, David cleverly leveraged the browser execution environment of Cypress plugins to modify the interface. His initiative not only enhances usability for colorblind users but also provides an opportunity for further community-driven enhancements.

Wick A11y

Developed by Sebastian Clavijo Suero, Wick A11y is designed to simplify accessibility testing significantly. Named for its effectiveness in identifying and resolving accessibility issues, Wick A11y adds visual reporting and voice feedback capabilities to the existing cypress-axe plugin.

The foundation of Wick A11y is rooted in the open-source Axe Core library by Deque Systems, which has been widely adopted across various accessibility testing frameworks. Wick A11y integrates seamlessly with Cypress, allowing testers to interact with results directly within the runner while generating detailed HTML reports complete with screenshots.

Sebastian emphasized that the voice feedback feature was introduced to cater to individuals who may have disabilities themselves, thereby enhancing their ability to engage with testing processes without barriers.

Future Directions

The emergence of these plugins reflects the vibrant innovation within the Cypress community concerning accessibility testing. They represent not just enhancements but also iterations on existing tools aimed at addressing new challenges faced by developers and testers alike.

As more plugins are developed, they will continue to build upon this foundation, fostering an inclusive web environment. If you have created a plugin for Cypress that enhances accessibility or offers unique functionalities, consider submitting it for inclusion in the documentation’s plugins list.

In upcoming discussions, we will explore how automation fits into broader accessibility programs and how it complements manual testing practices. While no automation tool can address every potential accessibility issue, tools like Axe Core demonstrate significant utility in achieving compliance and enhancing user experience across digital platforms.

Read more such articles from our Newsletter here.