The development of accessible software is crucial for a programming department — in the same way as the development of bug-free software.

Further, we’ll analyze tools that should be used for web testing so that people with disabilities will be able to use software easily.

Introduction to accessibility testing of web products

If you didn’t perform accessibility testing before or are working on a project that doesn’t take web accessibility into account, you can begin with the following steps to estimate the project’s accessibility and try to improve it:

1. If a project is built with React, install the React ESLint plugin and try to fix all possible web bugs;
2. Activate FastPass in the Accessibility Insights web browser’s extension to find two most popular accessibility bugs and fix them;
3. Surf a website using the TAB button to test navigation with the help of a keyboard and see how the focus works.

Of course, these steps will not make your website completely accessible but this is a really good practice.

Further, we’ll analyze each item in detail and try to find the most popular trends and recommendations regarding web accessibility testing in 2022.

The ESLint Plugin

This plugin can find numerous web accessibility bugs in various React projects — for example, absent alt text in images or an incorrect attribute and roles of ARIA.

But it’s bad that it has limited functionality:

• Static analysis of software code can find some bugs;
• It works only with web elements of HTML and nothing will help you while interacting with custom components.

Cypress AXE

If you don’t perform accessibility testing of a website after each update, you will meet regression, sooner or later.

Therefore, it’s important to execute web accessibility testing as a part of the project’s continuous integration (CI).

[highlight dark=”no”]We don’t recommend moving  software code into a database if it is tested for web accessibility.[/highlight]

As for Cypress AXE, we’d like to mention that it’s completely based on axe-core.

It helps users activate accessibility tests inside end-to-end Cypress tests.

Tests can be run multiple times, testing pages in different states – for example, together with an active modal window or with an opened section of web content.

Such tests can be really helpful for performing smoke accessibility testing that helps a tester understand if a website is broken or not.

But we’d like to admit that it’s not easy to use Cypress AXE to analyze pages that contain web accessibility issues.

The Axe extension

It’s the Google Chrome extension based on axe.core.

It’s launched on a real website or in an application and can find issues that are impossible to find while interacting with separate components – for example, to check if a header’s structure or its important parts are correct.

It should be used to analyze accessibility but you should keep in mind that you should launch software each time when software has some additions or changes.

[highlight dark=”no”]Note![/highlight] Sometimes software shows incorrect data – for example, if it is able to analyze a background color, it tells a user that text has an insufficient level of color contrast.

The Contrast tool and testing contrast in Chrome DevTools

Sometimes we need to test color contrast on an unfinished mockup or elsewhere — where it’s impossible/hard to open web browser’s extensions.

To test color contrast in a web browser, you should test contrast in Chrome DevTools or use the Contrast application where you can select a color pair with the help of an eyedropper.

Chrome Spectrum

The Chrome Spectrum tool offers the possibility to test the way future users who have color vision deficiency perceive a website or an application and check if various elements have enough contrast.

The TAB button

By surfing software with the help of tabulation functionality or, in other words, clicking on the TAB button to navigate between available interactive elements of a web page, we can test:

• Presence of the focus and a visible state of it in all current interactive elements;
• If a TAB order is correct and makes sense;
• The focus doesn’t jump from a modal window if it’s opened;
• If a skiplink is displayed when the TAB button is clicked for the first time.

Conclusion

We’ve analyzed above some examples of popular tools that can be used not only for testing websites but also for everyday interaction with certain websites.

You should remember that any web tool simply helps find some issues.

To keep the balance between quality and productivity of software, it’s needed to optimize the balance between manual and automated testing.