Tools

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

• WCAG Accessibility Audit Developer UI
• 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.
• Tenon Check
  This extension adds a button to your browser. Click it, and the page you’re currently viewing will be tested for Accessibility against WCAG 2.0 using Tenon.io.
• 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.

• PACT Engine
  PACT Engine fetches the violations of WCAG 2.0 and Section 508. Pact Engine will also axelerate the best practices of the web development which will help developer to maintain code standards.
• 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 at https://www.paciellogroup.com/contact/.
• NerdeFocus
  When activated, NerdeFocus displays the focus history with CSS selectors, and overlays an easy-to-follow focus indicator on the page.
• 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:

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

• WCAG Luminosity Contrast Ratio Analyzer
  Pick colors from your Web, compute contrast, get suggestions. Preview with challenged visions. Versatile Color Dev Extension Tool
  The extension allows you to pick colors from a web site and test the contrast compliance with WCAG 2.0.

  A color picker with a magnifier glass facilitates the correct selection of the desired pixel, and even averages multiple pixels.

  Picked colors shows in the toolbar as background or foreground of text.

  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.

• Contrast Ratio Checker
  The simple contrast ratio checker on web pages.
  Click on any part of the website to see what Web Content Accessibility Guidelines(WCAG) 2.0 level the ratio between the foreground text color and the background color is in conformity with.
• No Coffee vision simulator (by Aaron Leventhal
  Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S. is expected to double by 2020, due to the aging of the baby boomer generation.

  NoCoffee can be helpful for understanding the problems faced by people with slight to extreme vision problems, such as:

  • Low Acuity: Some web pages use very small text or click targets. While it’s true that users use built-in browser zoom or screen magnifiers like ZoomText (http://www.aisquared.com/zoomtext/), many non-technical users do not know how.
  • Low Contrast Sensitivity: Many designers use text with very low contrast, e.g. light gray text on white. Incidentally, here are some great tools for analyzing contrast on the web, and my favorite is the Snook Colour Contrast Check at http://snook.ca/technical/colour_contrast/colour.html.
  • Colorblindness: Although color use in design is definitely a good thing, it’s important to remember the maxim “do not rely on color alone”, as 7-10% of males have some form of colorblindness. Chris Campbell has a great article describing color-related design problems and solutions. See http://www.particletree.com/features/interfaces-and-color-blindness/.
  • Visual snow, glare, ghosting and cataracts.
  • Nystagmus (rapid, involuntary, oscillatory movement of the eyes).
  • Obstructed visual field: floaters, obstruction to one side (retinal detachment or hemanopia), obstructed central vision (glaucoma), spotty vision (diabetic retinopathy) or obstructed peripheral vision (retinitis pigmentosa or macular degeneration). Note: the simulations of partial visual fields cannot follow your eye gaze as they would in the real world.
• 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 co

  ntent.

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

• 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

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

Fire Fox

• aXe Developer Tools 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 Firefox 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
• 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.

Internet Explorer

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

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.

Related Accessibility Resources

• Accessibility Bookmarklets
• Mobile Accessibility Tools
• Color Contrast Tools

Continue reading 41 Browser Extensions to Perform Accessibility Testing Effectively