7 Must-Have Accessibility Extensions for Google Chrome

Accessibility testing is a subset of usability testing and a specific kind of software testing that requires software to comply with specific accessibility standards, like WCAG 2.1. To successfully perform accessibility testing, software testers need to have the right expertise and knowledge to ensure that the web content meets various criteria described in these guidelines.

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

To perform accessibility testing more efficiently, software testers use a variety of accessibility testing tools and browser extensions to cover various components and functionalities. Accessibility extensions can also be applied to multiple browsers and are all simple to use. In fact, using accessibility extensions is a fast and efficient way for testers to track accessibility issues and for developers to confirm the accuracy of their work. Accessibility testers need to evaluate the results obtained from these tools and extensions manually. To do this, they use keyboard navigation, screen readers, adaptive switches, and logical thinking to see whether guidelines are met or not.

In this blog post, we will analyze and compare 7 accessibility extensions for Google Chrome, helping software testers learn more about the extensions and help them choose the best ones for their accessibility testing needs. We will analyze the extensions’ overall functionality, explore what success criteria they cover, and highlight their benefits.

Axe DevTools

Axe DevTools is a browser extension for Chrome, Firefox and Edge. Though it is primarily used for web testing, it can also be used for testing iOS and Android mobile devices. Apart from testers, developers also usually use this tool during the development process to find and fix issues.

How does axe DevTools work?

This accessibility browser extension allows you to scan the area that you want to check. You can either scan the whole page or scan a specific part of it. When scanning is complete, the selected area is deeply analyzed, and the issues found are presented in a report.

What information does this accessibility extension provide us?

Axe DevTools shows the priority/severity level of every issue detected. Users can highlight the issues and see where they actually appear on the page. Additionally, they can inspect the issues or get more information about them, like how they can be fixed, what the underlying problem is, and which WCAG criteria they are related to. Axe DevTools allows users to save, share, or export the results. All issues found are real.

Furthermore, what is interesting about this accessibility extension is that it can do intelligent guided testing (IGT) using machine learning. Intelligent guided accessibility tests can be used for issues related to tables, keyboard navigation, modal dialogs, interactive elements, structure, images, and forms. When the user selects one of these functionalities to test, the intelligent guided testing feature analyzes the screen according to the chosen functionality and provides a set of simple questions about the content and an answer format for the user. The user answers the questions as instructed, and the issue reports are based on the user’s answers.

What about WCAG criteria?

Axe DevTools can detect up to 80% of digital accessibility issues and cover the following WCAG criteria:

• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.4.3 Contrast (Minimum)
• 1.4.5 Images of Text
• 1.4.11 Non-text Contrast
• 2.1.1 Keyboard
• 2.1.2 No Keyboard Trap
• 2.4.3 Focus Order
• 2.4.6 Headings and Labels
• 2.4.7 Focus Visible
• 4.1.2 Name, Role, Value

Accessibility Insights for Web

Accessibility Insights for Web is a Chrome accessibility extension that is used by software testers and developers to find and fix accessibility issues.

How does this extension work, and what information does it provide?

This accessibility extension supports two main scenarios—FastPass and assessment. FastPass is a lightweight, two-step process that uses automated checks to detect the most common accessibility issues. However, all issues must be checked manually. One of the good things about this accessibility testing tool is that for every failed instance, the extension provides useful information about the element. Specifically, you can highlight the issue, get detailed information about the issue and how it can be fixed, and find out which accessibility criterion was violated. FastPass also provides assisted testing for tab stops which allows testers to examine keyboard navigation, keyboard traps, focus indicator, the tab order, and input focus issues. The tester follows the instructions provided in the tab stops screen and uses various keyboard shortcuts, like TAB / Shift + TAB key, and arrows.

The second scenario, assessment, is a process that includes automated checks and 24 manual tests. The manual tests are usually assisted. The checking involves using keyboard navigation. One test can cover one or more requirements, but with this scenario, all success criteria from WCAG 2.1 AA are covered. Every test includes guidance that explains why the test matters, dos and don’ts design guidelines, links to relevant WCAG success criteria, sufficient techniques, and common failures. To learn more about the requirements, users can select the ‘Info and examples’ link, which contains various information.

What about WCAG criteria?

The Accessibility Insights for Web covers the following WCAG 2.1 AA success criteria:

• 1.1.1 Non-text Content
• 1.3.2 Meaningful Sequence
• 2.1.1 Keyboard
• 2.1.2 No Keyboard Trap
• 2.4.1 Bypass Blocks
• 2.4.3 Focus Order
• 2.4.4 Link Purpose (In Context)
• 3.1.1 Language of Page,
• 4.1.2 Name, Role, Value

Siteimprove Accessibility Checker

The Siteimprove Accessibility Checker is another a11y extension for Chrome that includes testing for various criteria. Though the extension provides instant analysis, the tester can filter the results by their conformance level, difficulty level, responsible person, and element type. Every issue can be reviewed so testers can get detailed information about the issue, for example, why it is an issue, which success criterion it is connected to, which type of disability it affects, and information about the occurrence of the issue with examples of how the issue can be fixed. The extension also allows users to view the content from the perspective of different types of color blindness.

The Siteimprove Accessibility Checker covers the three levels of WCAG, WAI-ARIA authoring practices and accessibility best practices. Testers can choose between specific standards or can apply all of them during the filtering process.

Google Lighthouse

Google Lighthouse is an open-source auditing tool that is used to measure and improve the quality of web pages. It can be run in Chrome Developer Tools. Apart from accessibility audits, Google Lighthouse also provides audits for performance progressive web apps, SEO, and more, so it is a good choice if you want to perform a combination of audits. Additionally, when a report is generated, it contains detailed information about the web page.

What information does this accessibility extension provide?

Google Lighthouse generates a detailed report about the issues found and the average number of different checks made during the checking process. It includes information on the number of checks that have failed, passed, and information about additional items that should be manually checked. Furthermore, the report explains why the issue occurs, how the HTML element is presented, how the issue can be fixed, and which success criteria it is associated with.

What about WCAG criteria?

Google Lighthouse evaluates web pages against the following WCAG success criteria:

• 1.1.1 Non-text Content
• 1.3.2 Meaningful Sequence
• 1.4.3 Contrast (Minimum)
• 1.4.11 Non-text Contrast
• 2.1.1 Keyboard
• 2.4.3 Focus Order
• 2.4.4 Link Purpose (In Context)
• 2.5.3 Label in Name
• 4.1.2 Name, Role, Value

Color Contrast Analyzer

The Color Contrast Analyzer is a Chrome accessibility extension that analyzes text color contrast based on WCAG 2.0 color contrast requirements—specifically 1.4.3 Contrast (Minimum), and 1.4.6 Contrast (Enhanced).on all conformance levels.

How does the Color Contrast Analyzer work?

Using the Color Contrast Analyzer you can analyze a portion of a web page, all of the visible contents of a tab, or an entire web page. Furthermore, from the option menu, you can choose the conformance level—either AA or AAA level—and select the pixel radius to analyze adjacent pixels. When the analysis is complete, the image is displayed with a mask which can also be hidden. The elements with low contrast, according to the selected conformance level, are shown on the underlying page and aren’t outlined in the output mask. All other elements with enough contrast are outlined in the output mask, providing you with all of the necessary information about the issues detected.

ARIA DevTools

Another great Chrome accessibility extension is ARIA DevTools, which is specifically designed for checking ARIA. ARIA—or Accessible Rich Internet Applications—refers to a set of roles and attributes that describe how to increase digital accessibility and make web content and web applications more accessible to people with disabilities.

How does ARIA DevTools work?

ARIA DevTools allows you to view your website as it is presented by screen readers. All page elements—headings, images, tables, forms—are displayed based on their ARIA roles. The page elements are presented in a list, providing users with detailed information about every single page element. The extension provides information on missing ARIA labels, misused ARIA roles, and incomplete keyboard support.

What about WCAG criteria?

The main success criteria that are covered by the ARIA DevTools accessibility extension are:

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.4.1 Bypass Blocks
• 2.4.4 Link Purpose (In Context)
• 2.4.6 Headings and Labels
• 2.5.3 Label in Name
• 3.3.1 Error Identification
• 3.3.2 Labels or Instructions
• 3.3.3 Error Suggestion
• 4.1.2 Name, Role, Value
• 4.1.3 Status Messages

EqualWeb Accessibility Checker

Another great accessibility tool that is primarily focused on following a11y standards and regulations is the EqualWeb Accessibility Checker. It is also a Chrome extension that is used for auditing and WCAG 2.1 validation. The extension is designed by EqualWeb, the only company that is recognized by the World Wide Web Consortium (W3C) to be fully compliant with WCAG 2.1, ADA, AODA, European Union EN 301 549 standards, and Section 508 guidelines.

The results from the analysis are shown in the form of a summary. The summary contains the found errors, notices, warnings, and there is also a separate section for contrast errors. Users can open every issue and get detailed information about the issue, the criteria that were violated, how to fix the issue, information about the element, and so on. In addition, the results can be scanned and compared using an extra widget, the remediation tool, which can also be implemented but is not obligatory.

This tool validates all success criteria from WCAG 2.1 on all three conformance levels: A, AA, and AAA.

Final thoughts and conclusion

In this blog post, we explored the key features of 7 must-have accessibility extensions for Google Chrome. Looking at each extension, we can conclude that there are extensions that cover all or multiple success criteria, while there are also some that are specifically designed for just one or a few specific success criteria. Nevertheless, most of the extensions cover criteria on A and AA conformance levels, as most accessibility assessments are based on WCAG 2.1 recommendations.

Here is a comparison of the 7 accessibility extensions and their capabilities:

From our analysis, most of the a11y extensions cover the following success criteria:

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 1.4.11 Non-text Contrast
• 2.1.1 Keyboard
• 2.4.6 Headings and Labels
• 4.1.2 Name, Role, Value

On the other hand, the least covered success criteria are related to time-based media and:

• 1.3.5 Identify Input Purpose
• 1.4.1 Use of Color
• 1.4.4 Resize Text
• 1.4.5 Images of Text
• 1.4.10 Reflow
• 1.4.12 Text Spacing
• 1.4.13 Content on Hover or Focus
• 2.1.4 Character Key Shortcuts
• 2.2.2 Pause, Stop, Hide
• 2.4.5 Multiple Ways
• 2.5.2 Pointer Cancellation
• 3.2.3 Consistent Navigation
• 3.2.4 Consistent Identification
• 3.3.4 Error Prevention (Legal, Financial, Data)

When it comes to choosing the right extension for your accessibility testing needs, it comes down to what regulations you want to meet as well as your users’ needs. Nonetheless, using any of these 7 accessibility extensions will prove valuable when performing accessibility testing and checking regulatory compliance.

The great thing about these extensions is that they immediately provide us with results, help us detect defects and problematic areas, and give us detailed information about the defects found. Therefore, we can get an overall view of the product regarding accessibility.

However, we highly recommend using more than one extension with a different functionality. Also, for the most accurate results, remember to combine automated and manual evaluation.

Do you want to check the accessibility of your software and make sure it complies with relevant standards and regulations? Learn more about our accessibility consultancy, testing, and auditing services or contact us for more details.