49 Browser Extensions to Perform Accessibility Testing
The following browser extensions will help evaluate various accessibility testing tasks. This list is continuously updating so please feel free to add more extensions in the comments or notify if any of the extensions are outdated.
Chrome Extensions
- DigitalA11Y Color Contrast Checker
A Chrome extension that checks different color combinations for contrast ratio as per WCAG guidelines and suggests appropriate color pallets that can be appealing too!
If you are a designer, developer, accessibility expert or an accessibility enthusiast, who want to review your site’s color contrast requirements or perform audits, we have the right tool for you! - DigitalA11Y Tublets
If you are a developer, accessibility expert, or any accessibility professional who want to quickly identify the accessibility defects in the underlying code semantics, we have your companion here! - A11y Quick Check
A11y Quick Check is a testing tool that exposes accessibility issues to provide a high level check to help meet the requirements of the WCAG guidelines and coding best practices. - Accessibility Toolkit by HalfAccessible
This powerful toolset empowers web developers, designers, and accessibility enthusiasts to create more inclusive and user-friendly websites. - Accessible Web Helper for Google Chrome
Accessible Web Helper for Google Chrome is a powerful (and free) Google Chrome extension built to help you test your website’s accessibility and color contrast ratios. From visually highlighting problematic elements on-page to viewing the exact failure details, Accessible Web Helper provides everything you need to begin tackling accessibility issues on your website. This free Chrome extension can be used to scan webpages against various levels of WCAG 2.0/2.1 A/AA rulesets and can be used behind login forms. - BrowserStack Accessibility Toolkit
It is a free Chrome extension that identifies accessibility issues in user workflows across websites or apps. It encompasses three methods for detecting issues:- Manual testing for identifying usability issues through the use of Screen readers
- Semi-automatic scanning for advanced issues using Assisted Test
- Automatic scanning for static issues using the Workflow Scanner
Further, their reporting dashboard is a centralized hub for monitoring all accessibility reports generated through the Workflow Scanner, Assisted Test, and Website Scanner. All reports contain issues grouped by violated WCAG guidelines, enabling easier VPAT report creation.
- NerdeRegion
NerdeRegion is a developer tools extension for debugging live regions on a Web Page. When activated, it lists all active Aria live regions, and keeps a record of all mutations that has happened on the region. - WAVE Chrome Extension
The WAVE Chrome extension allows you to evaluate web content for accessibility issues directly within Chrome. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The extension can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE Chrome extension evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated. - IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into the browser development tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes. - Includia Accessibility Checker
Includia Accessibility Checker seamlessly integrates into your development workflow, empowering you to create inclusive web experiences. It meticulously analyzes web pages to pinpoint potential accessibility violations based on the latest WCAG (Web Content Accessibility Guidelines) standards. - Visual ARIA
Displays ARIA used in web technologies, includes live region, and widget roles, proper nesting and focus management. Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development. - Total Validator
The range of validations includes: HTML and XHTML (28 different standards), CSS (1-3), Accessibility (WCAG 1, WCAG2, US-508), a broken links checker, and a multi-language spell checker. - Spectrum
Instantly test your web page with different types of color vision deficiency.
Color Vision Deficiency (CVD) affects people’s ability to distinguish certain colors. Estimates indicate that approximately 200 million people worldwide are affected by some kind of CVD. Individuals of Northern European ancestry, as many as 8 percent of men and 0.5 percent of women experience the common form of red-green color blindness. This extension helps you to test web pages for people with different types of CVD. It’s particularly useful for websites with data visualisations, because some colors may not be distinguishable from other colors in the charts. Flash enabled websites are also supported! - Siteimprove Accessibility Checker
The Siteimprove Accessibility Checker is your tool to evaluate any web page for accessibility issues at any given time. It provides intuitive, visual feedback about your content by highlighting detected issues right on the page and gives you:- an immediate overview of your page’s accessibility issues
- clear explanations of how they affect your users
- plus specific recommendations on how to fix them All analysis is done entirely within the Chrome browser, allowing secure evaluation of password-protected or non-public pages, multi-step forms, and dynamic content.
- Images ON/OFF
Use this extension to disable/enable images on the current site. - Funkify – Disability Simulator
Built and developed in collaboration with accessibility experts and disability organisations from around the world. - ChromeLens
Visual impairment simulation and auditing tools to develop for accessibility. ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development. - Color Enhancer
A customizable color filter applied to webpages to improve color perception, for people who are partially color-blind. - Accessibility monitor
Continuously monitor accessibility failures in a page as it’s being used, rather than a single audit on page load. View a log of all failures in the console and monitor new failures via a badge on the icon in the toolbar. - ACCESS Assistant Community
Test your web pages for accessibility with Access Assistant, Community Edition. With well over 100 fully automated accessibility tests, you can identify some of the most common, highest risk accessibility violations. Load any web page in the browser window and select the Quick Test option to test the page. View the details of any accessibility violation, which will be highlighted on the web page, along with remediation guidance. - Accessibility Insights for Web
Accessibility Insights for Web helps developers quickly find and fix accessibility issues. - ARC Toolkit
The ARC Toolkit is a set of accessibility tools which aids developers in identifying accessibility problems and features for WCAG 2.0, WCAG 2.1, WCAG 2.2, EN 301 549, and Section 508. The toolkit is designed to be integrated into automated and manual accessibility tests and works alongside the auditor or developer in order to simplify repetitive tasks and interactively explore accessibility features and problems. The ARC Toolkit is tightly integrated with Chrome’s Developer Tools and uses the ARC rule set, the same rules used by default in the ARC platform. This allows developers and quality assurance testers to take their ARC testing into their development environments and thoroughly investigate issues raised in ARC scans. - NerdeFocus
When activated, NerdeFocus displays the focus history with CSS selectors, and overlays an easy-to-follow focus indicator on the page. - Chrome DevTools
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. - Color Contrast Analyzer by accessibility.oit.ncsu.edu
Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.
New in version 1.1: Download the image analysis to a PNG file. This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page. Additionally, you can evaluate files on your computer that can be opened in Chrome, such as image files and PDF files. Note, with PDF files you will only be able to evaluate the visible portion of the page. To analyze local files you will need to go to your Extensions page and check “Allow access to file URLs” for this extension. You can select to evaluate for either AA or AAA conformance, along with specifying the size of the text you want to analyze. The output will show you a map of where the edges between colors are different enough to meet the specified contrast requirement. If there is an item on the underlying page that is not outlined in the output mask, then the item does not have enough color contrast according to the conformance level you selected. The resulting image analysis can be downloaded to your computer as a PNG file. In order to better handle gradients, you can also select the pixel radius that should be used to analyze adjacent pixels. The larger the pixel radius, the further out it will look for a border with high enough contrast. However, a larger pixel radius will add significant computation time. - HeadingsMap by Rumoroso
It builds a navigable map of the html document with html5 outline algorithm and with the headings structure
The headingsMap extension generates an index or map of any web document structured using headers and also shows the structure of sections of the document according to the HTML5 outline. Thus it is not only useful for browsing the document, but also very useful for developers, web consultants and auditors with enhanced features including:- Shows the structure of the main document headers.
- Indicates the level of each of the headers.
- Alert the cases where no headers in the document and those breaks incorrect header, keeping alert header to find a suitable level.
- Displays all the headers present in the document, including hidden by CSS techniques or those lacking content.
- Identify the sections according to the HTML 5 Outline
- ChromeVox
ChromeVox – Giving Voice to Chrome
The ChromeVox screen reader is an extension to Chrome that brings the speed, versatility, and security of Chrome to visually impaired users. Unlike most accessibility software, it is built using only web technologies like HTML5, CSS and Javascript. ChromeVox was designed from the start to enable unprecedented access to modern web apps, including those that utilize W3C ARIA (Access to Rich Internet Applications) to provide a rich, desktop-like experience. This enables visually impaired users to experience the power of web applications while also giving developers a way to verify the accessibility of their web applications. Its simple yet powerful navigation is easy to learn and quickly gets new users up to speed browsing web sites and web-based applications eyes-free. Check out the documentation at chromevox.com for the user guide, tutorial, keyboard shortcut and developer reference guides. Note: ChromeVox is still in development and currently doesn’t work in conjunction with desktop screen readers. In order to best use ChromeVox on your computer, you will need to disable your desktop screen reader when using ChromeVox. - ARIA validator (for chrome)
Scans page for WAI-ARIA implementation issues.
Adds a button to Chrome that you can click when you want to validate the ARIA implementation of the HTML page you are viewing. Also checks for duplicate IDs in your HTML. - Screen Reader by UserWay
UserWay’s powerful screen reader gives users the ability to have web pages read to them on-demand. Ideal for anyone from visually impaired users to front-end and QA engineers checking ADA compliance and everyone in between. - LERA
LERA is an automated Accessibility testing and reporting tool that provides you with an in-depth report of your website’s accessibility issues. It’s FREE for everyone to use (and requires no credit card information). LERA is the only fully automated online tool that provides both Accessibility Audits and Reporting for free. - aXe Chrome Extension by Deque Labs
Automated accessibility testing tools must return zero false positives, so that you know what problems you must fix. They must also be lightweight and fast without requiring external resources. The aXe Chrome extension provides this fast, lightweight accessibility testing tool that returns zero false positives. It is based on the aXe javascript library and is the third generation of accessibility rules for HTML-based user interfaces that differentiates itself from other approaches and rules repositories in the following ways:- It works on all modern browsers,
- It supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth
- It has zero false positives (bugs notwithstanding)
- It is open source
- It is actively supported by a major accessibility vendor
- It is designed to work with whatever tools, frameworks, libraries and environments you have today
- It is designed to be integrated into your existing functional/acceptance automated tests
- It automatically determines which rules to run based on the evaluation context
- It is highly configurable
Fire Fox
- ARC Toolkit by TPGi
The ARC Toolkit is a set of accessibility tools which aids developers in identifying accessibility problems and features for WCAG 2.0, WCAG 2.1, WCAG 2.2, EN 301 549, and Section 508. The toolkit is designed to be integrated into automated and manual accessibility tests and works alongside the auditor or developer in order to simplify repetitive tasks and interactively explore accessibility features and problems. The ARC Toolkit is tightly integrated with Chrome’s Developer Tools and uses the ARC rule set, the same rules used by default in the ARC platform. This allows developers and quality assurance testers to take their ARC testing into their development environments and thoroughly investigate issues raised in ARC scans. - IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into the browser development tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes. - WCAG Contrast checker by Rumoroso
Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2. - AInspector WCAG by Jon Gunderson
Inspects web pages for features and issues related to WCAG 2.0 level A and AA requirements. - Web Developer by chrispederick
The Web Developer extension adds various web developer tools to the browser. - Firebug
The most popular and powerful web development tool
Inspect HTML and modify style and layout in real-time
Use the most advanced JavaScript debugger available for any browser
Accurately analyze network usage and performance
Extend Firebug and add features to make Firebug even more powerful
Get the information you need to get it done with Firebug. - HeadingsMap by Rumoroso
It builds a navigable map of the html document with html5 outline algorithm and with the headings structure
The headingsMap extension generates an index or map of any web document structured using headers and also shows the structure of sections of the document according to the HTML5 outline. Thus it is not only useful for browsing the document, but also very useful for developers, web consultants and auditors with enhanced features including:- Shows the structure of the main document headers.
- Indicates the level of each of the headers.
- Alert the cases where no headers in the document and those breaks incorrect header, keeping alert header to find a suitable level.
- Displays all the headers present in the document, including hidden by CSS techniques or those lacking content.
- Identify the sections according to the HTML 5 Outline
- Firefox Developer Tools
The Toolbox provides a single home for most of the developer tools that are built into Firefox. - WAVE Accessibility Extension
Evaluate web accessibility within the Firefox browser. When activated, the WAVE extension injects icons and indicators into your page to give feedback about accessibility and to facilitate manual evaluation. - Html Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox, Mozilla. The number of errors of a HTML page is seen on the form of an icon - Visual ARIA
Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management. - axe DevTools – Web Accessibility Testing
Accessibility checker for developers, testers, and designers in Firefox. Find and fix more accessibility issues during website development with axe DevTools. The free axe DevTools® browser extension is a fast, lightweight, yet powerful testing tool driven by the world’s most trusted accessibility testing engine, axe-core, developed by Deque.
Accessibility Extensions For Safari
- Safari’s built-in developer tools (e.g. code inspector)
Apple has brought its expertise in macOS and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can even preview your webpages for various screen sizes, orientations, and resolutions. To access these tools, enable the Develop menu in Safari’s Advanced preferences. - A11YTools Extension for Safari
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in an Extension for Safari used for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error to developers and designers.a11yTools is a one-at-a-time testing tool where you pick the HTML Accessibility element or feature you’re testing once-per-page rather than running all tests together. Test and results can be stacked on top each other e.g. to show both Headings and Image Alt Text Properties.
Accessibility Extensions For Edge Browser
- Accessibility Insights for Web
Accessibility Insights for Web is a browser extension that helps developers find and fix accessibility issues in web apps and sites.The tool supports two primary scenarios:
FastPass is a lightweight, two-step process that helps developers identify common, high-impact accessibility issues in less than five minutes.
Automated checks – the tool automatically checks for compliance with approximately 50 accessibility requirements.
Tab stops – the tool provides clear instructions and a visual helper that makes it easy to identify critical accessibility issues related to keyboard access, such as missing tab stops, keyboard traps, and incorrect tab order.Assessment allows anyone with HTML skills to verify that a web app or web site is compliant with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
Automated checks – the tool automatically checks for compliance with approximately 50 accessibility requirements.
Manual tests – the tool provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests; many tests are “assisted”, which means that the tool identifies the test instances or provides a visual helper.
- Microsoft Edge Developer Tools
Microsoft Edge introduces great new improvements to F12 developer tools, including some of the most requested features from UserVoice. The new tools are built in TypeScript, and are always running, so no reloads are required. - axe – Web Accessibility Testing by Deque Systems, Inc.
Accessibility Checker for Developers in Edge
Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe Edge extension. Drop the axe on your accessibility defects! The axe accessibility checker for Edge is a fast, lightweight accessibility testing tool that returns zero false positives. It only tests for accessibility issues that can be accurately detected via automation, and it only tests for components that actually exist on the page or application you’re testing. The axe Edge extension utilizes the axe open source JavaScript library developed by Deque Systems – the third generation of accessibility rules for HTML-based user interfaces. The axe library differentiates itself from other approaches and rules repositories in the following ways:
1. It works on all modern browsers,
2. It supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth
3. It has zero false positives (bugs notwithstanding)
4. It is open source (the axe-core library, not the extension)
5. It is actively supported by a major accessibility vendor
6. It is designed to work with whatever tools, frameworks, libraries and environments you have today
7. It is designed to be integrated into your existing functional/acceptance automated tests
8. It automatically determines which rules to run based on the evaluation context
9. It is highly configurable (as a JavaScript API) Use of this extension is governed by this license agreement https://www.deque.com/terms-of-use/axe-ext/ and the privacy policy linked under the developer information
Chrome Extensions
- DigitalA11Y Color Contrast Checker
A Chrome extension that checks different color combinations for contrast ratio as per WCAG guidelines and suggests appropriate color pallets that can be appealing too!
If you are a designer, developer, accessibility expert or an accessibility enthusiast, who want to review your site’s color contrast requirements or perform audits, we have the right tool for you! - DigitalA11Y Tublets
If you are a developer, accessibility expert, or any accessibility professional who want to quickly identify the accessibility defects in the underlying code semantics, we have your companion here! - WAVE Chrome Extension
The WAVE Chrome extension allows you to evaluate web content for accessibility issues directly within Chrome. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The extension can check intranet, password-protected, dynamically generated, or sensitive web pages. Also, because the WAVE Chrome extension evaluates the rendered version of your page, locally displayed styles and dynamically-generated content from scripts or AJAX can be evaluated. - A11y Quick Check
A11y Quick Check is a testing tool that exposes accessibility issues to provide a high level check to help meet the requirements of the WCAG guidelines and coding best practices. - Accessibility Toolkit by HalfAccessible
This powerful toolset empowers web developers, designers, and accessibility enthusiasts to create more inclusive and user-friendly websites. - Accessible Web Helper for Google Chrome
Accessible Web Helper for Google Chrome is a powerful (and free) Google Chrome extension built to help you test your website’s accessibility and color contrast ratios. From visually highlighting problematic elements on-page to viewing the exact failure details, Accessible Web Helper provides everything you need to begin tackling accessibility issues on your website. This free Chrome extension can be used to scan webpages against various levels of WCAG 2.0/2.1 A/AA rulesets and can be used behind login forms. - BrowserStack Accessibility Toolkit
It is a free Chrome extension that identifies accessibility issues in user workflows across websites or apps. It encompasses three methods for detecting issues:- Manual testing for identifying usability issues through the use of Screen readers
- Semi-automatic scanning for advanced issues using Assisted Test
- Automatic scanning for static issues using the Workflow Scanner
Further, their reporting dashboard is a centralized hub for monitoring all accessibility reports generated through the Workflow Scanner, Assisted Test, and Website Scanner. All reports contain issues grouped by violated WCAG guidelines, enabling easier VPAT report creation.
- IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into the browser development tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes. - Includia Accessibility Checker
Includia Accessibility Checker seamlessly integrates into your development workflow, empowering you to create inclusive web experiences. It meticulously analyzes web pages to pinpoint potential accessibility violations based on the latest WCAG (Web Content Accessibility Guidelines) standards. - NerdeRegion
NerdeRegion is a developer tools extension for debugging live regions on a Web Page. When activated, it lists all active Aria live regions, and keeps a record of all mutations that has happened on the region. - Visual ARIA
Displays ARIA used in web technologies, includes live region, and widget roles, proper nesting and focus management. Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development. - Total Validator
The range of validations includes: HTML and XHTML (28 different standards), CSS (1-3), Accessibility (WCAG 1, WCAG2, US-508), a broken links checker, and a multi-language spell checker. - Spectrum
Instantly test your web page with different types of color vision deficiency.
Color Vision Deficiency (CVD) affects people’s ability to distinguish certain colors. Estimates indicate that approximately 200 million people worldwide are affected by some kind of CVD. Individuals of Northern European ancestry, as many as 8 percent of men and 0.5 percent of women experience the common form of red-green color blindness. This extension helps you to test web pages for people with different types of CVD. It’s particularly useful for websites with data visualisations, because some colors may not be distinguishable from other colors in the charts. Flash enabled websites are also supported! - Siteimprove Accessibility Checker
The Siteimprove Accessibility Checker is your tool to evaluate any web page for accessibility issues at any given time. It provides intuitive, visual feedback about your content by highlighting detected issues right on the page and gives you:- an immediate overview of your page’s accessibility issues
- clear explanations of how they affect your users
- plus specific recommendations on how to fix them
All analysis is done entirely within the Chrome browser, allowing secure evaluation of password-protected or non-public pages, multi-step forms, and dynamic content.
- Images ON/OFF
Use this extension to disable/enable images on the current site. - Funkify – Disability Simulator
Built and developed in collaboration with accessibility experts and disability organisations from around the world. - ChromeLens
Visual impairment simulation and auditing tools to develop for accessibility. ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development. - Color Enhancer
A customizable color filter applied to webpages to improve color perception, for people who are partially color-blind. - Accessibility monitor
Continuously monitor accessibility failures in a page as it’s being used, rather than a single audit on page load. View a log of all failures in the console and monitor new failures via a badge on the icon in the toolbar. - ACCESS Assistant Community
Test your web pages for accessibility with Access Assistant, Community Edition. With well over 100 fully automated accessibility tests, you can identify some of the most common, highest risk accessibility violations. Load any web page in the browser window and select the Quick Test option to test the page. View the details of any accessibility violation, which will be highlighted on the web page, along with remediation guidance. - Accessibility Insights for Web
Accessibility Insights for Web helps developers quickly find and fix accessibility issues. - ARC Toolkit by TPGi
The ARC Toolkit is a set of accessibility tools which aids developers in identifying accessibility problems and features for WCAG 2.0, WCAG 2.1, WCAG 2.2, EN 301 549, and Section 508. The toolkit is designed to be integrated into automated and manual accessibility tests and works alongside the auditor or developer in order to simplify repetitive tasks and interactively explore accessibility features and problems. The ARC Toolkit is tightly integrated with Chrome’s Developer Tools and uses the ARC rule set, the same rules used by default in the ARC platform. This allows developers and quality assurance testers to take their ARC testing into their development environments and thoroughly investigate issues raised in ARC scans. - NerdeFocus
When activated, NerdeFocus displays the focus history with CSS selectors, and overlays an easy-to-follow focus indicator on the page. - Chrome DevTools
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. - Color Contrast Analyzer by accessibility.oit.ncsu.edu
Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.
New in version 1.1: Download the image analysis to a PNG file.This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.
Additionally, you can evaluate files on your computer that can be opened in Chrome, such as image files and PDF files. Note, with PDF files you will only be able to evaluate the visible portion of the page. To analyze local files you will need to go to your Extensions page and check “Allow access to file URLs” for this extension. You can select to evaluate for either AA or AAA conformance, along with specifying the size of the text you want to analyze.
The output will show you a map of where the edges between colors are different enough to meet the specified contrast requirement. If there is an item on the underlying page that is not outlined in the output mask, then the item does not have enough color contrast according to the conformance level you selected. The resulting image analysis can be downloaded to your computer as a PNG file. In order to better handle gradients, you can also select the pixel radius that should be used to analyze adjacent pixels. The larger the pixel radius, the further out it will look for a border with high enough contrast. However, a larger pixel radius will add significant computation time. The tool bar evaluates and displays the contrast and the success criteria.
The toolbar menu offers choices for 10 challenged visions and some effects. A sample Text window lets you better see the look of your choices of color. It offers up to 3 choices for foreground colors with AAA compliant contrast.
- HeadingsMap by Rumoroso
It builds a navigable map of the html document with html5 outline algorithm and with the headings structure
The headingsMap extension generates an index or map of any web document structured using headers and also shows the structure of sections of the document according to the HTML5 outline. Thus it is not only useful for browsing the document, but also very useful for developers, web consultants and auditors with enhanced features including:- Shows the structure of the main document headers.
- Indicates the level of each of the headers.
- Alert the cases where no headers in the document and those breaks incorrect header, keeping alert header to find a suitable level.
- Displays all the headers present in the document, including hidden by CSS techniques or those lacking content.
- Identify the sections according to the HTML 5 Outline
- ChromeVox
ChromeVox – Giving Voice to Chrome
The ChromeVox screen reader is an extension to Chrome that brings the speed, versatility, and security of Chrome to visually impaired users.Unlike most accessibility software, it is built using only web technologies like HTML5, CSS and Javascript. ChromeVox was designed from the start to enable unprecedented access to modern web apps, including those that utilize W3C ARIA (Access to Rich Internet Applications) to provide a rich, desktop-like experience. This enables visually impaired users to experience the power of web applications while also giving developers a way to verify the accessibility of their web applications.
Its simple yet powerful navigation is easy to learn and quickly gets new users up to speed browsing web sites and web-based applications eyes-free. Check out the documentation at chromevox.com for the user guide, tutorial, keyboard shortcut and developer reference guides.
Note: ChromeVox is still in development and currently doesn’t work in conjunction with desktop screen readers. In order to best use ChromeVox on your computer, you will need to disable your desktop screen reader when using ChromeVox.
- ARIA validator (for chrome)
Scans page for WAI-ARIA implementation issues.
Adds a button to Chrome that you can click when you want to validate the ARIA implementation of the HTML page you are viewing. Also checks for duplicate IDs in your HTML. - Screen Reader by UserWay
UserWay’s powerful screen reader gives users the ability to have web pages read to them on-demand. Ideal for anyone from visually impaired users to front-end and QA engineers checking ADA compliance and everyone in between. - LERA
LERA is an automated Accessibility testing and reporting tool that provides you with an in-depth report of your website’s accessibility issues. It’s FREE for everyone to use (and requires no credit card information). LERA is the only fully automated online tool that provides both Accessibility Audits and Reporting for free. - aXe Chrome Extension by Deque Labs
Automated accessibility testing tools must return zero false positives, so that you know what problems you must fix. They must also be lightweight and fast without requiring external resources. The aXe Chrome extension provides this fast, lightweight accessibility testing tool that returns zero false positives. It is based on the aXe javascript library and is the third generation of accessibility rules for HTML-based user interfaces that differentiates itself from other approaches and rules repositories in the following ways:It works on all modern browsers,- It supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth
- It has zero false positives (bugs notwithstanding)
- It is open source
- It is actively supported by a major accessibility vendor
- It is designed to work with whatever tools, frameworks, libraries and environments you have today
- It is designed to be integrated into your existing functional/acceptance automated tests
- It automatically determines which rules to run based on the evaluation context
- It is highly configurable
Fire Fox
- ARC Toolkit by TPGi
The ARC Toolkit is a set of accessibility tools which aids developers in identifying accessibility problems and features for WCAG 2.0, WCAG 2.1, WCAG 2.2, EN 301 549, and Section 508. The toolkit is designed to be integrated into automated and manual accessibility tests and works alongside the auditor or developer in order to simplify repetitive tasks and interactively explore accessibility features and problems. The ARC Toolkit is tightly integrated with Chrome’s Developer Tools and uses the ARC rule set, the same rules used by default in the ARC platform. This allows developers and quality assurance testers to take their ARC testing into their development environments and thoroughly investigate issues raised in ARC scans. - IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into the browser development tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes. - WCAG Contrast checker by Rumoroso
Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2. - AInspector WCAG by Jon Gunderson
Inspects web pages for features and issues related to WCAG 2.0 level A and AA requirements. - Web Developer by chrispederick
The Web Developer extension adds various web developer tools to the browser. - Firebug
The most popular and powerful web development tool
Inspect HTML and modify style and layout in real-time
Use the most advanced JavaScript debugger available for any browser
Accurately analyze network usage and performance
Extend Firebug and add features to make Firebug even more powerful
Get the information you need to get it done with Firebug. - HeadingsMap by Rumoroso
It builds a navigable map of the html document with html5 outline algorithm and with the headings structure
The HeadingsMap extension generates an index or map of any web document structured using headers and also shows the structure of sections of the document according to the HTML5 outline. Thus it is not only useful for browsing the document, but also very useful for developers, web consultants and auditors with enhanced features including:- Shows the structure of the main document headers.
- Indicates the level of each of the headers.
- Alert the cases where no headers in the document and those breaks incorrect header, keeping alert header to find a suitable level.
- Displays all the headers present in the document, including hidden by CSS techniques or those lacking content.
- Identify the sections according to the HTML 5 Outline
- Firefox Developer Tools
The Toolbox provides a single home for most of the developer tools that are built into Firefox. - WAVE Accessibility Extension
Evaluate web accessibility within the Firefox browser. When activated, the WAVE extension injects icons and indicators into your page to give feedback about accessibility and to facilitate manual evaluation. - Html Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox, Mozilla. The number of errors of a HTML page is seen on the form of an icon - Visual ARIA
Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management. - axe DevTools – Web Accessibility Testing
Accessibility checker for developers, testers, and designers in Firefox. Find and fix more accessibility issues during website development with axe DevTools. The free axe DevTools® browser extension is a fast, lightweight, yet powerful testing tool driven by the world’s most trusted accessibility testing engine, axe-core, developed by Deque.
Accessibility Extensions For Safari
- Safari’s built-in developer tools (e.g. code inspector)
Apple has brought its expertise in macOS and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can even preview your webpages for various screen sizes, orientations, and resolutions. To access these tools, enable the Develop menu in Safari’s Advanced preferences. - A11YTools Extension for Safari
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in an Extension for Safari used for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error to developers and designers.a11yTools is a one-at-a-time testing tool where you pick the HTML Accessibility element or feature you’re testing once-per-page rather than running all tests together. Test and results can be stacked on top each other e.g. to show both Headings and Image Alt Text Properties.
Accessibility Extensions For Edge Browser
- Accessibility Insights for Web
Accessibility Insights for Web is a browser extension that helps developers find and fix accessibility issues in web apps and sites.The tool supports two primary scenarios:
FastPass is a lightweight, two-step process that helps developers identify common, high-impact accessibility issues in less than five minutes.Automated checks – the tool automatically checks for compliance with approximately 50 accessibility requirements.
Tab stops – the tool provides clear instructions and a visual helper that makes it easy to identify critical accessibility issues related to keyboard access, such as missing tab stops, keyboard traps, and incorrect tab order.Assessment allows anyone with HTML skills to verify that a web app or web site is compliant with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
Automated checks – the tool automatically checks for compliance with approximately 50 accessibility requirements.
Manual tests – the tool provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests; many tests are “assisted”, which means that the tool identifies the test instances or provides a visual helper. - Microsoft Edge Developer Tools
Microsoft Edge introduces great new improvements to F12 developer tools, including some of the most requested features from UserVoice. The new tools are built in TypeScript, and are always running, so no reloads are required. - axe – Web Accessibility Testing by Deque Systems, Inc.
Accessibility Checker for Developers in Edge
Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe Edge extension. Drop the axe on your accessibility defects! The axe accessibility checker for Edge is a fast, lightweight accessibility testing tool that returns zero false positives. It only tests for accessibility issues that can be accurately detected via automation, and it only tests for components that actually exist on the page or application you’re testing. The axe Edge extension utilizes the axe open source JavaScript library developed by Deque Systems – the third generation of accessibility rules for HTML-based user interfaces. The axe library differentiates itself from other approaches and rules repositories in the following ways:
1. It works on all modern browsers,
2. It supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth
3. It has zero false positives (bugs notwithstanding)
4. It is open source (the axe-core library, not the extension)
5. It is actively supported by a major accessibility vendor
6. It is designed to work with whatever tools, frameworks, libraries and environments you have today
7. It is designed to be integrated into your existing functional/acceptance automated tests
8. It automatically determines which rules to run based on the evaluation context
9. It is highly configurable (as a JavaScript API) Use of this extension is governed by this license agreement https://www.deque.com/terms-of-use/axe-ext/ and the privacy policy linked under the developer information
Related Accessibility Resources
Note: We provided a guide on how to run accessibility testing using some of the tools specified in this article. If you are thinking to do a basic accessibility audit to comply with WCAG guidelines then please do check out our guide.
Very useful information Raghava 🙂
Great list. You can consider to include some of the ones in this another list, filtering column TYPE=”Browser Plugin (Chrome, Firefox, etc..” There are 65 plugins.
https://docs.google.com/spreadsheets/d/10CTezA0iDdaWggaqxuHawj-5u8YXdZeWBJsIkuvJ364/edit?usp=sharing
Thank you for sharing!!!
After testing all of them, my favorite ones because of their visual report are:
– Accessibility Insights for Web
– WAVE
– WCAG Color Contrast
– No Coffee
ACCESS Assistant Community is available for Firefox and Edge too (https://www.webaccessibility.com/test). On there is also the Accessible Color Picker extension for Chrome. Not only does it tell you if your colors reach minimum ratios, but it will suggest close colors to try as alternatives.
I’d love to get our Accessible Web Helper extension for Google Chrome added to this page.
Accessible Web Helper for Google Chrome – https://chrome.google.com/webstore/detail/accessible-web-helper/gdnpkbipbholkoaggmlblpbmgemddbgb
Accessible Web Helper for Google Chrome is a powerful (and free) Google Chrome extension built to help you test your website’s accessibility and color contrast ratios. From visually highlighting problematic elements on-page to viewing the exact failure details, Accessible Web Helper provides everything you need to begin tackling accessibility issues on your website. This free Chrome extension can be used to scan webpages against various levels of WCAG 2.0/2.1 A/AA rulesets and can be used behind login forms.
Hi Gianna,
Added the extension to the list. Thanks for the contribution.
Hi!
We just got our tool listed on https://www.w3.org/WAI/ER/tools/ and were hoping we could list it in this article as well?
Here is the tool: https://www.alarmsystem.no/color-contrast/
This tool tests the contrast of a background color and foreground color for accessibility. The idea behind it comes from a friend actually. He is visually impaired and have problems reading certain texts on websites, many web developers don’t take into consideration that the color they use can be a mad “mix” for people that is visually impaired.
I hope we could list it here as well, thank you!
Hi Josef,
We have added this resource to our post “Tools to Evaluate your design for Color contrast Accessibility”
You can check it out at https://www.digitala11y.com/color-contrast-analyzers-checkers/