EN
FR
DE
ES
NO
SV
FI
DA
LV
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: Top 5 Myths and Facts About Digital Accessibility
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.
1. 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
2. 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, the dos and don’ts of 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
3. 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.
4. 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:
5. 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.
6. 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:
7. 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.
Why should you use accessibility extensions?
Accessibility extensions provide developers and testers with valuable insights into a web page's performance. With the help of accessibility testing tools, these browser extensions highlight potential problems, such as color contrast errors or missing alt text. They’re perfect for manual or automated accessibility testing workflows.
6 accessibility testing strategies you should know
Ensuring web accessibility requires a mix of strategies to cover all bases. Here are some key approaches to make your accessibility testing more effective:
1. Evaluate keyboard navigation
Ensure all web applications and web pages are fully navigable using a keyboard. Test keyboard shortcuts, tab order, and focus indicators to avoid keyboard traps.
Example: Use Accessibility Insights to perform a two-step process for testing keyboard accessibility.
2. Check color contrast and visual feedback
Poor color contrast can make web content inaccessible to users with visual impairments. Use tools like Color Contrast Analyzer to test contrast ratio and ensure compliance with WCAG 2.1.
Example: Analyze adjacent pixels to identify contrast errors and improve readability.
3. Test dynamically generated content
Incorporate assistive technologies like screen readers and voice typing into your testing process. This helps ensure your web content is usable for people with disabilities.
Example: Use ARIA DevTools to check if page elements are properly labeled.
4. Involve users with disabilities
The best way to ensure web accessibility is to involve users with disabilities in your testing process. Their feedback can reveal accessibility issues that tools might miss.
Example: Conduct usability testing with screen reader users to identify navigation challenges.
5. Manual vs. automated accessibility testing
Combining manual tests with accessibility testing tools creates a robust testing process. Automated tools cover large-scale checks, while manual testing addresses sensitive web pages and user-specific concerns like keyboard traps.
Example: Use Accessibility Insights for automated checks, then manually test keyboard navigation and screen reader compatibility.
6. The importance of WCAG compliance
Adhering to WCAG guidelines is non-negotiable for creating accessible digital spaces. Using tools that evaluate dynamically generated content, such as google drive pages or local files, ensures inclusivity for all users.
Example: Run a wave report to identify contrast errors and ensure color combinations meet WCAG 2.1 AA standards.
Benefits of using accessibility extensions
- Automated accessibility testing tools save time and reduce false positives.
- Browser extensions like Siteimprove Accessibility Checker and Accessibility Insights provide visual feedback and detailed reports.
- They help fix accessibility issues and ensure compliance with WCAG guidelines.
Frequently asked questions
1. How do automated accessibility testing tools work?
Accessibility testing tools like Axe DevTools and Siteimprove Accessibility Checker scan web pages for accessibility issues such as contrast errors, missing alt text, and keyboard traps. They provide visual feedback and detailed reports to help developers fix accessibility issues.
2. What are WCAG guidelines, and why are they important?
Web Content Accessibility Guidelines (WCAG) are international standards for web accessibility. They ensure web content is accessible to people with disabilities. Tools like Accessibility Insights and Google Lighthouse help evaluate success criteria like 1.4.3 Contrast (Minimum) and 2.1.1 Keyboard.
3. Can I test password-protected or sensitive web pages for accessibility?
Yes, tools like Google Lighthouse and Axe DevTools can evaluate password-protected or sensitive web pages. Ensure you configure the tools correctly to access and test these pages.
4. What are false positives in accessibility testing?
False positives occur when automated accessibility testing tools flag issues that aren’t actual accessibility issues. Tools like Wave Extension and Accessibility Insights help reduce false positives by providing detailed wave reports and visual feedback.
5. How do screen readers work with accessibility extensions?
Screen readers interpret page elements and read them aloud for visually impaired users. Tools like ARIA DevTools ensure web content is compatible with screen readers by checking ARIA roles and labels.
6. What are the key standards for accessibility testing?
The primary standard is the Web Content Accessibility Guidelines (WCAG), which is divided into three levels:
- A: Basic accessibility
- AA: Standard level, required for most organizations
- AAA: Enhanced accessibility
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.
