Let's talk about wick-a11y…

#a11y #automation #testing #cypress

Recently, I conducted a proof of concept using wick-a11y, a new accessibility testing plugin for Cypress developed by Sebastian Clavijo Suero… And it’s amazing!

I can honestly say that wick-a11y is incredible! It’s a real game changer in my opinion, and delivers a range of powerful features and improvements over alternative plugins. Designed by a tester specifically for testers, it prioritises usability and efficiency, making it an exciting new option for those looking to enhance their accessibility testing workflow in Cypress.

User Experience

I’ve had the privilege of communicating directly with Sebastian, and he’s incredibly genuine and helpful. His dedication to building Cypress plugins shines through in the way he prioritises usability and simplicity. Sebastian has put a lot of thought into making installation and configuration as straightforward as possible, minimising the setup steps and allowing users to get started quickly. His plugins are designed with the end-user in mind, making it clear that he genuinely cares about improving the Cypress experience for everyone.

Feature Rich

Wick-a11y offers a comprehensive accessibility analysis for Cypress users, with features designed for smooth and customisable testing.

Users can easily run checks using the cy.checkAccessibility() command and tailor settings for specific impact levels, rules and guidelines.

Each test includes a summary of violations by severity level, displayed in both the Cypress log and console. Affected elements are visually highlighted on the page, with customisable styling based on severity.

Additionally, the interactive console feature allows users to hover over or click on violations in the Cypress log to see more details or hover over the highlighted elements directly on the page for instant feedback.

Reporting

Wick-a11y also excels in reporting, offering comprehensive HTML reports that make it easy to understand and address accessibility issues. These reports provide detailed descriptions of each violation, along with actionable guidance on how to fix them. To enhance clarity, the reports include a full-page screenshot that visually highlights problem areas, providing a clear view of where improvements are needed.

Best of all, this level of reporting comes ready to use out-of-the-box.

Accessible accessibility

One standout feature of wick-a11y is its innovative voice functionality, which brings a new level of accessibility to accessibility testing itself. This feature includes a play button that audibly reads out the test results, making it possible for users to understand accessibility issues without needing to rely on visual cues alone.

Provides audible information for accessibility issues at the suite level, test level, violation type level, and DOM element level, helping users identify issues through voice feedback.

This is especially useful for testers who may have visual impairments themselves or for those who simply prefer to listen to the results. By integrating this feature, wick-a11y embodies the true spirit of accessibility-ensuring that accessibility tools are usable by everyone. This thoughtful design detail not only enhances the usability of the plugin but also demonstrates a genuine commitment to inclusivity in testing.

Documentation

In addition to its powerful features, wick-a11y is complemented by exceptional documentation… Seriously, this is possibly the best documentation I have ever seen for a plugin!! and it truly enhances the user experience.

Sebastian has clearly invested significant effort into creating comprehensive and clear guides, making it easy for users of all skill levels to navigate the plugin’s capabilities. The documentation covers everything from installation and configuration to detailed explanations of each feature, ensuring that users can quickly understand how to utilise the tool effectively.

This commitment to thorough documentation reflects Sebastian’s dedication to supporting the end user, further solidifying wick-a11y as a 'must-have' accessibility plugin for Cypress.

Open-source

Wick-a11y is completely open-source making it accessible to a wide community of developers and testers. By keeping the project open-source, Sebastian invites contributions, collaboration, and ongoing improvement from users around the world. This also allows users the opportunity to modify the plugin to suit specific needs if the out-of-the-box solution doesn't quite meet their testing requirements.

Summary

wick-a11y is a powerful and innovative addition to the world of accessibility testing in Cypress, offering a uniquely user-centred approach that sets it apart from existing plugins. Sebastian’s thoughtful design choices, especially around usability, customisation, and inclusivity, make wick-a11y an incredible tool for accessibility testing and Cypress enthusiasts.

By combining technical excellence with an empathetic design, wick-a11y elevates the testing process and empowers testers of all abilities, ultimately promoting a more accessible web experience for everyone. This plugin is more than just a tool; it’s a testament to what can be achieved when accessibility is prioritised from the ground up.