Cypress Accessibility Testing (with Best Practices)

Accessibility testing is used to test the web and mobile applications for usability for the maximum number of users possible. It tests whether the apps are accessible to those with disabilities such as vision impairments, hearing disabilities, and other physical or cognitive conditions. Usually, accessibility testing is done as part of the usability testing for the application. But it is a great addition if the particular application can have a complete test suite rather than partial accessibility tests inside the usability testing suite. 

By using these test suites an application can:

• Increase its user count, reaching a broader and unique customer/ audience base. 
• Provide more relevancy in conveying content and information by vetting and isolating the potential customers or audience.

Types of Accessibility Tests

The accessibility tests test adherence to the Web Content Accessibility Guidelines (WCAG) 2.0. These guidelines ensure that the basic contents are available for people with disabilities.  

For accessibility testing usually, Cypress AXE testing is preferred, but most of the time, these tools will catch around 30%-40% of errors on a particular page. So, for this reason, most of the testing teams tend to use manual methods with a checklist to do the accessibility tests. 

1. Automated Testing

Most of the time, the teams are using the AXE and WAVE tool to do the automated search of the accessibility issues, which will generate a report with all the violations or errors related to WCAG code specifications for specified levels (A, AA or AAA) of the WCAG conformance. 

2. Manual Testing

Teams with usability testing suites with accessibility tests tend to use the manual testing method to find the accordance with the WCAG guidelines. For this, a person with expertise in accessibility testing is selected and trained. The basic testing methods will include test planning, Execution, and report compilation. 

• For the first part, the tests are planned with a checklist that has all the necessary tests that need to be done to achieve the desired level of WCAG conformance. 
• As the second part, the checklist is being tested in the specified test flow to check whether the tests are being passed or failed, and the results are recorded within the checklist. 
• After analyzing the recorded results from the checklist, a comprehensive report is compiled by regenerating the test steps in the failed steps to get the vulnerabilities, their threat level, and the effect on the WCAG level conformance

3. Hybrid Testing

The hybrid accessibility testing approach is the automated and manual testing criteria. There are two main ways to carry out the tests in hybrid testing. 

• In the first method, the best and most accurate parts of the application are identified to carry out the automated test, which is assigned to be carried out by the automated testing tools. A checklist is created for the rest of the components, and manual testing is done. Later in the testing process, a detailed report is generated with all the test results from both testing methods. 
• In the second method, firstly, a report is generated with the automated tools, and after carefully vetting the test results, the accuracy is recorded safely. The rest of the inconsistent test results are being retested using either the raw manual testing checklist or the guided testing method of the automated test tools. 

Setting up Cypress for Accessibility Testing

Cypress is a testing tool used with web browser integration. 

• With the Cypress test automation, accessibility testing has been made easier, facilitating more convenient debugging criteria using the web browser and the UI-guided test runs.
• With the Cypress AXE accessibility testing tool incorporated in cypress-axe, the components tests can be created for the accessibility testing. 
• Using BrowserStack, one can instantly get started with Cypress testing across 30+ browser versions. Cypress automation with BrowserStack is a feature-rich proposition. 

Start Accessibility Testing with Cypress

How to Write and Run Cypress Accessibility Tests?

• The demo of the usage of accessibility test the BrowserStackDemo website is used. 
• First, a directory needs to be set up by installing Cypress. 
• After installing and setting up the Cypress, the cypress-axe tool should be imported as indicated by its installation to test accessibility with axe.

Following is the code segment for the test flow to demo Cypress axe accessibility testing:

/// <reference types="cypress" />


describe('Accessibility testing with AXE tool', () => {
beforeEach(() => {
//First the site that needs to be visited is called using the cy.visit() function.
cy.visit('https://bstackdemo.com/')


//After visiting the page, the cy.injectAxe() method is called to load the
//axe-core runtime into the loaded page.
cy.injectAxe();
})


it('Test for any accessibility issues on page load', () => {
//The axe modules starts to search for the accessibility issues on page
cy.checkA11y();
})


it('Test for any baccessibility issues on page with custom parameters.', () => {
//The axe modules starts to search for the accessibility issues on page but with the added parameters for the test.
cy.checkA11y('shelf-item', {
runOnly: {
type: 'tag',
values: ['wcag2a']
}
})
})


it('Test for any accessibility issues on page load', () => {


//Page is redirected to another page
cy.get('#signin').click();


//The axe modules starts to search for the accessibility issues on page
cy.checkA11y();
})






})

accessibility-test.cy.js

After the above code is pasted on a cy.js file, we can run it with the browser, and if the a11y function catches any exceptions hence any accessibility issues, it will throw an error along with an a11y error! 

The testers can click on this specific error and the error opens inside a console log, which then can be logged onto the report. A11Y Error and its content on console log 

The codebase associated with this example can be found here.

7 Best Practices for Cypress Accessibility Testing 

1. Use an accessibility plugin: Cypress has several plugins that make it easy to test for accessibility. The most popular plugins are cypress-axe and cypress-audit.
2. Set up accessibility testing early: It’s best to set up accessibility testing early in the development process, so you can catch accessibility issues early and avoid costly rework.
3. Use ARIA attributes correctly: If you use ARIA attributes, make sure you use them correctly and that they enhance accessibility rather than hinder it. 
4. Test with screen readers: Test your application with a screen reader to ensure that users who rely on assistive technology can access and use the content.
5. Test with different viewport sizes: Test your application with different viewport sizes to ensure that the content is accessible and usable on various devices.
6. Use automated and manual testing: Use both automated and manual testing to ensure you catch as many accessibility issues as possible.
7. Follow WCAG guidelines: Avoid accessibility violations and Follow the Web Content Accessibility Guidelines (WCAG) to ensure your application is accessible to people with disabilities.