Accessibility QA: How to Automate Accessibility Tests with Cypress
1. Why is accessibility important?
Accessibility makes your website/application usable for everyone. So, it means there is no more discrimination. Accessibility provides the same level of access to your website/application for people with visual, hearing, mobility, or cognitive impairments. When done well, accessibility allows people with disabilities to be autonomous and participate in the digital world.
According to the Scope there are 14.6 million disabled people in the UK. It is about 20% of the population of the United Kingdom. Globally, the estimate given by the World Health Organization is about 15%, representing over 1 billion people with disabilities. These numbers do not consider people with temporary or situational impairments, like having a fractured arm or having sun glare on your mobile screen. So, you can see how important it is to provide accessibility in your website/application.
2. What is Test Automation and why is it important?
Test automation is a process of automated checks in your application. Test automation helps you to reduce the cost of testing and to provide your testing team more time to find non trivial bugs in your application.
With modern test automation tools such as Cypress, you can implement automated checks not only for UI/API or Backend, but also for Accessibility.
3. What is Cypress? What is the best practice in Automation Accessibility tests?
Cypress - is a modern end-to-end testing framework for web test automation. It enables front-end developers and test automation engineers to write automated tests.
Cypress has a lot of advantages in comparison with other test automation tools:
- Cypress is a complete framework.
- It is very fast because it runs inside a browser and uses JS.
- It has a debugging tool.
- Automatic waits. No sleep. No waits.
- Can test and mock APIs. Full control of network traffic.
- User sessions switch during the test case execution.
- Cypress does not really need test environments. Can be run in localhost.
Supports e2e, API, UI, component, visual and accessibility tests.
Cypress-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.
Cypress-Axe uses axe-core to accessibility. Axe-core is an industry testing standard.
Cypress-Axe is an easily configurable plugin that allows you to customize your accessibility testing.
You can customize Axe to any accessibility standard with the Axe API
User specifies the format of the JSON structure passed to the callback of axe.run
Using Cypress, we can reproduce a real user behavior on the page, so the Cypress-Axe library can validate the page in the same way as a real QA person doing it - from UI. It means that the UI page loads first and only once it is fully loaded, testing starts. This approach allows us to find the issues that cannot be found in Unit, Component and Integration testing stages.
Here is a short demo:
After test executions Cypress is configured to generate 2 types of reports:
- The short one. It is a console type of reporting that will be useful for Developers and Devops.
- The detailed one. This is a detailed report that can be stored in a JSON file and will provide detailed information about any accessibility issues/violations.
Accessibility test automation with Cypress is pretty easy. Such crucial website standards validations shouldn’t be ignored. With Cypress you can cover this with only few lines of code on each web page:
Remember, by ignoring accessibility testing on your website you ignore about 20% of your potential users.