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
- 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:
- 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
- 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
- Identify the sections according to the HTML 5 Outline
ntent.
- ChromeShades
ChromeShades – find accessibility problems and experience the web without sight.
ChromeShades is an easy tool to help you make your site more accessible to blind users.
Simply install the Chrome extension and everything in your browser is reformatted as text-only, organized more like how a blind user would perceive the page with a screen reader. Your page should still be totally functional – you can still click on links, buttons, and other controls. Don’t just look at the page – test workflows just like you’d test the app normally. - 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. - aXe Developer Tools by Deque Labs
- WCAG Contrast checker by Rumoroso
- AInspector Sidebar by Jon Gunderson
- Web Developer by chrispederick
- Firebug
- Dom Inspector by SeaMonkey Council
- HeadingsMap by Rumoroso
- Firefox Developer Tools
- WAVE Accessibility Extension
- Microsoft Edge Developer Tools
- The Web Accessibility Toolbar by The Paciello Group
- Safari’s built-in developer tools (e.g. code inspector)
Fire Fox
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:
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
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 Sidebar evaluates the accessibility compliance of web pages based on WCAG 2.0 Level A and AA requirements using OpenAjax Alliance rulesets. It organizes the evaluation results by Rule Categories and WCAG Guidelines.
The Web Developer extension adds various web developer tools to the browser.
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.
DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM can be navigated using a two-paned window displaying a variety of different views on the document and all nodes within.
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
The Toolbox provides a single home for most of the developer tools that are built into Firefox.
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.
Internet Explorer
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 (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
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.
Please also check our collection of “Bookmarklets for Accessibility Testing”; these are some of the nifty tools that can be used on both desktop & mobile browsers.
Very useful information Raghava 🙂