43 Browser Extensions to Perform Accessibility Testing Effectively

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!
• 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.
• 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.
  

  Video Tutorial on How to Use WAVE Chrome Extension

  
  
• 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.
• 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.
• 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, 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. It has two components.
  • ARC Toolkit Panel
    This includes a set of tests that shows results both in the panel and in the page itself. Each test can be toggled on and off so types of issues can be isolated. Issues can be selected and viewed directly in the Elements panel.
  • ARC Toolkit Sidebar Pane
    This appears as a side panel of the Elements panel and includes tools that evaluate the color contrast of a given element, evaluates nodes of a document for code validation, and listens for and displays changes to individual nodes.
  • It runs completely local within Chrome and works within iframes, so it can evaluate any page you can browse to. If you would like to pages that are not live on a website but are in development, turn on the option to “Allow access to file URLs”.
  • Because this tool is actively used by the TPG and Interactive Accessibility team, there are frequent updates as we further develop and refine the rules and features. If you would like training on how to use the ARC Extension for testing, please Contact TPG
• 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.

• Accessibility Developer Tools (for Chrome)
  This extension will add an Accessibility audit, and an Accessibility sidebar pane in the Elements tab, to your Chrome Developer Tools.

  To use the audit: go to the Audits tab, select the Accessibility audit, and click Run. The audit results will appear as a list of rules which are violated by the page (if any), with one or more elements on the page shown as a result for each rule.

  To use the sidebar pane: inspect an element in the Elements tab, then expand the Accessibility sidebar pane (note that it may be offscreen if the Styles pane is open). If the inspected element has any properties relevant to accessibility, those properties will be displayed in the sidebar pane. You can also choose ‘Reveal in Elements Panel’ from the context menu on elements displayed in the audit results, to jump to the element in the Elements panel and use the sidebar pane to get more information about elements which cause audit violations.

• 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.
• 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
• 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.

Fire Fox

• 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.

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.

  Accessibility Insights for Web requires Microsoft Edge Insider version 75 or later.

• 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

Accessibility Extensions For Internet Explorer

Internet Explorer is not in active development & will be soon deprecated completely. Use the edge browser & the A11Y extensions provided for it.

• The Web Accessibility Toolbar by The Paciello Group
  The Web Accessibility Toolbar (WAT) has been developed to aid manual examination of web pages for a variety of aspects of accessibility.
  The toolbar provides easy access to functionality to:
  • identify components of a web page
  • provide access to alternate views of page content
  • facilitate the use of 3rd party online applications