End to end automated solution for accessibility checks
I talked about my experience with a11y in my previous blog. I hope that gave you enough context to understand why it is important to adhere accessible best practices and how to build your mindset and ways of working around it.
As I promised in that blog , Here are details on writing end to end automated solution for accessibility checks.
Context
To start with let me set up some context here.
In my assignment, our tech team agreed to implement cypress as front end automation testing solution.
We were using cypress to write
- unit component test
- Integration tests
- End to end user journey on deployed environments
While I was looking for a11y automation, my 1st choice was to look for some integration with existing cypress end to end automation solution, So that I can re-use the existing authentication, page navigation and component interaction for accessibility user testing journey.
Axe-core
From Axe-core readme
Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
My Cypress axe core journey
On my research I found this cypress-axe-core repository with good implementation documentation. I followed the readme and quickly I was able to integrate a11y checks on my existing cypress test.
There is just one change though!
Cypress-axe-core documentation is updated for cypress version < 10, however I was dealing with Cypress version 10 and it caused me some confusion for a while. After a little bit of digging I was able to find the correct solution.
Let me highlight the problem in cypress-axe-core documentation. It suggests us to enable result logging by writing a plugin in `cypress/plugins/index.js` path.
But If you look at the cypress latest documentation this way of writing plugin is deprecated from cypress version > v10
This can be solved by writing plugin in
cypress.config.ts or js
Here is the final a11y result logging plugin code.
Rest is pretty much similar to what the documentation is suggesting. I also created this checkAxeViolations cypress custom command to modify the axe-core configuration.
Complete cypress axe-core solution can be accessed from this github repository.
What about other front end automation solution ?
I was exploring project that use axe-core and interestingly I found almost all major front end automation tools support axe-core.
These are the few examples
axe-core/webdriverjs
axe-core/webdriverio
axe-core/playwright
axe-core/puppeteer
axe-core-selenium (Java)
axe-core-capybara (Ruby)
axe-core-cucumber (Ruby)
axe-core-rspec (Ruby)
axe-core-selenium (Ruby)
axe-core-watir (Ruby)
Just to understand axe-core integration with other solution, I tried it with Playwright as well.
Here is github repository with solution enough to be get started axe-core integration with playwrighte.
We can also suggest dev team to implement this axe Accessibility Linter to get some earlier feedback on accessible good coding practices.
Here is one more jest matcher for axe (jest-axe ) for testing accessibility for some early feedback.
Disclaimer
Accessibility is something that can not be completely tested and trusted by automated solutions. It’s good to get some feedbacks in this way, but I would always recommend you to do some manual testing to ensure product is usable and accessible as per human need.
I hope this helped you some way or other. Do let me know if you want to talk about something or have different opinion or experience.
Thanks for a read, will see you in another blog.
Until then Happy Testing
