Quality AssuranceJuly 19, 2023

5 Most Commonly Used Tools for Web Accessibility Testing

Bojan CvetkovskiQA Engineer

QA engineer performing web accessibility testing

Why is accessibility testing important

Accessibility testing is important because it ensures that the software under test—be it a website or mobile app—is accessible to different types of users, including people with permanent, temporary or situational disabilities. However, even companies that are aware of the importance of accessibility testing do not always get the results they want or expect when testing the accessibility of their software.

In fact, according to data from TestDevLab’s State of Software Quality Assurance 2023 Report, 15% of companies say the accessibility of their software is at an unsatisfactory level. The reasons for this are usually lack of accessibility tool usage, inexperience in accessibility testing, or insufficient knowledge of accessibility regulations.

It’s also important to note that many countries have accessibility laws in place to prevent discrimination against users with different levels of ability. Failure to comply with accessibility laws and regulations can cause reputational damage and result in significant financial losses. In 2022, the number of accessibility lawsuits reached an all-time high with more than 4,061 accessibility lawsuits filed.

This brings us to another important question—what is the best approach to accessibility testing? Based on our experience, accessibility testing requires a hybrid approach—a combination of manual testing and automated testing. Also, as accessibility testing can be quite time consuming and complex, software testers need to be familiar with all the relevant regulations—like WCAG, ADA, and Section 508—and understand the different accessibility criteria and how to achieve them, such as color contrast, alternative texts, video transcripts, white space, and more. Additionally, manual testing should be assisted by using automated (or semi-automated) tools, which will ensure the testing process is even more efficient.

In this blog post, we will focus on web accessibility and look at the 5 most commonly used accessibility tools that can make the web accessibility testing process much easier and more effective.

Web accessibility testing tools

WAVE

WAVE is a free web accessibility evaluation tool that identifies ways to make a webpage more accessible to people with disabilities. The WAVE Chrome, Firefox, and Edge extensions allow you to evaluate web content for accessibility issues directly within your browser. However, WAVE cannot tell you exactly if your web content is accessible. Only a human can determine true accessibility. Nevertheless, WAVE can facilitate human evaluation, helping you, as a human, evaluate the accessibility of your web content.

WAVE supports optimal accessibility. It has numerous tests for accessibility, including many that check for compliance issues found in Section 508 and WCAG 2.1 guidelines. WAVE also checks for issues that extend beyond these guidelines that we know impact end users with disabilities. The documentation for each icon will indicate any relevant WCAG guidelines, such as:

While WAVE provides an excellent initial view into web accessibility, like all other automated accessibility testing tools, it cannot tell you if the web content is fully accessible. The WAVE web accessibility evaluation tool cannot check all accessibility issues and it has a limit in evaluating the accessibility of the web content. For example, these tools can verify if an <img> tag has an alternative attribute, but cannot verify if the alternative attribute correctly describes the image. This needs to be verified manually by an accessibility expert. So, relying completely and solely on this tool is probably not a great idea.

WCAG Color Contrast Checker

To check if the color contrast meets WCAG accessibility requirements, a great tool to use is the WCAG Color Contrast Checker extension. This tool is available as an extension for Chrome, Firefox and Edge and it can check the color contrast between the foreground and background of the elements that are on the page according to the WCAG 2 contrast and color requirements.

Additionally, this tool evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. In case these colors are defined with RGBA values, it also considers the opacity to deduce the real color that is finally shown.

The tool also includes two fields in which the colors can be introduced manually to be tested and allows you to pick the color directly from the documents.

Finally, it auto-refreshes when the DOM of the page changes (adding or removing elements), however, if the page has many changes, this behavior can be deactivated.

Although this extension is great for checking the color contrast, there are some downsides as well. For example, WCAG Color Contrast Checker is not able to evaluate all of the elements. There are many that this extension is unable to check, like the text in the background images, shadow root elements, etc. In these cases, a manual check by a trained accessibility specialist is a must.

You might be interested in: What Impact Does Color Have on Video Content?

HeadingsMap

HeadingsMap is another great extension that can show, browse and audit the headings structure. This extension is available for Chrome, Firefox and Edge and it generates a document map or index of any web document structured with headings as well as showing the HTML 5 outline.

It has various cool features:

A list of headings and information about their level.
A list of sections with header information and information about structural errors.
Information from the main document and from the documents inside frames.
Scrolls to and highlights the location of a header or section.
Detects changes in the DOM and updates content.
Can be refreshed manually.
Allows collapsing list of headers by levels.
Provides option for HTML 5 Outline test.
Enables identification of the header or section with the CSS outline feature.
It doesn't show headers or sections that are hidden for assistive technologies.

This tool is useful not only to facilitate navigation, but also to help web developers, consultants and auditors. Although this extension shows the heading structure, it is still a tester’s responsibility to verify it manually by checking the headings within the DevTools and/or with assistive technologies.

Text Spacing

The Text Spacing tool is a simple bookmarklet that will help to check if there are any issues with the content or functionality of your website after increasing the line, paragraph, letter, and word spacing, according to the WCAG Text Spacing success criterion. In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

Line height (line spacing) to at least 1.5 times the font size.
Spacing following paragraphs to at least 2 times the font size.
Letter spacing (tracking) to at least 0.12 times the font size.
Word spacing to at least 0.16 times the font size.

After applying the text style properties, it is a common practice to check every bit of the web page where Text Spacing is applied.

Pass and fail descriptions based on Text Spacing criteria — *Image source:* *W3C Github*

HTML Validator

The HTML Validator is a Chrome and Firefox browser extension that adds HTML validation inside Developer Tools. The number of errors of a HTML page is displayed through an icon in the browser status bar and the error details can be viewed in the Developer Tools.

The extension is based on HTML Tidy, an algorithm originally developed by W3C. The algorithm is embedded inside the browser and makes the validation locally, without sending HTML to a third party server. With HTML Tidy, you can find and classify HTML errors in three categories:

Errors. HTML errors that Tidy cannot fix or understand.
Warnings. HTML errors that Tidy can fix automatically.
Accessibility warnings. HTML warnings for the 3 priority levels defined in W3 WAI.

This extension also offers an automatic "Clean up" button that will try to clean up your page, ensuring no errors.

False positives and false negatives in web accessibility testing

When testing the accessibility of your content, you need to be confident in the results. Unfortunately, while automated tests are very useful, they are not perfect as they only catch a fraction of the issues and accessibility tools often ignore accessibility issues that affect real users with disabilities.

When an error is missed by an accessibility tool, it is called a false negative. What this means is that there is an accessibility issue, however, the tool incorrectly reports that there isn’t one. Another potential problem to watch out for during accessibility testing is false positives. False positives occur when accessibility testing identifies obstacles that don't actually exist. When building an online accessibility plan, it's important to remember that false positives can cause just as many problems as false negatives.

All accessibility tools work by looking for patterns in a website’s code and markup. Most tools compare the code and markup to the WCAG Level A and AA success criteria, which are widely considered the international standard for digital accessibility.

You might be interested in: What to Expect from the WCAG 2.2 Release

Some WCAG success criteria have simple pass or fail rule sets. For example, WCAG requires alternative text for non-text content. If your image doesn't include alt text, it's clearly a "failure". However, other questions require a deeper understanding of the context. And because these tools have limited ability to understand context, they can result in false positives. For example, some images are purely decorative and according to WCAG Success Criterion 1.1.1 Non-text Content, purely decorative content should not contain alternate text, but should be implemented in a way that assistive technologies can ignore it. To do so, many accessibility testing markup includes the aria-hidden attribute in the content.

To avoid false positives and false negatives, the solution would be to not rely solely on automated accessibility tools. Though they are useful for identifying issues, you still need to manually review each issue to figure out whether the issue genuinely exists and determine the best way to fix it. We suggest using a hybrid testing approach that combines expert manual testing with automated testing.

You can get reliable benchmarking data from a hybrid accessibility audit, which also speeds up the remedial process. It's the finest method for achieving your objectives and proving that you comply with non-discrimination laws.

The benefits and limitations of accessibility testing tools

There are various benefits of using accessibility testing tools. For one, they can be a great starting point for understanding how well your product complies with different web accessibility guidelines. They can also be especially useful if you need to scan a large volume of pages and discover compliance issues quickly.

Nevertheless, though accessibility testing tools can be quite useful, they are not without limitation. Namely, you cannot completely rely on these tools because they do not guarantee 100% accuracy and compliance. So do not expect these accessibility testing tools to solve all of your accessibility issues.

Yes, they do catch a lot of issues but they still require an expert to verify the results. That’s where we come in. At TestDevLab, we have a team of accessibility testing professionals that are well-versed in the different accessibility standards and regulations, and have access to various assistive technologies and test devices. We can manually check your web or mobile solution against different criteria. Contact us to learn more about our wide range of accessibility testing services.