Tools

Tools are important for web developers to be able to have the means to maintain accessibility on a website or web application. Here are some resources to help address some common accessibility issues.

A11Y Compliance Platform

The A11Y Compliance Platform is offered through the Bureau of Internet Accessibility. The platform gives tools, reports and services to help companies and organizations maintain and defend the web site’s accessibility and integrity.

Link: https://www.boia.org/w3c-tools-services-a11y

Accessibility Insights

Accessibility Insights is available as a browser extension for Chrome or Edge, or as a Windows application to test web pages and applications for accessibility issues. Developed and maintained by Microsoft. Best of all, it's open source.

Link: https://accessibilityinsights.io/

Axe

Axe from Deque is the World’s most popular accessibility testing toolkit built on the World’s most popular accessibility rules library. Axe is ideal for development teams to test their Web, Android and iOS applications to help identify and resolve common accessibility issues. Built to scale with your needs, users have run Axe for everything from ad-hoc single page tests to testing hundreds of thousands of pages while integrated into existing CI/CD processes. It’s simple to use, doesn’t require advanced accessibility knowledge and won’t waste your time with false positives.

Link: https://www.deque.com/axe/

AATT

Automated Accessibility Testing Tool, or AATT, is a product offered by PayPal. This platform provides an accessibility API as well as other custom web applications for HTML CodeSniffer.

Link: https://github.com/paypal/AATT

Cauldron

Cauldron from deque is a fullyaccessible HTML, CSS, and Javascript front-end framework for creating web and mobile applications. Cauldron will not only help shortcut decisions and development time designing, creating and testing core components for your application but will be consistent with the branding, look and feel of all new Deque applications. Cauldron is designed to be as easy to use as it is elegant and modern. Cauldron is abstracted out into simple classes and tags, making it as flexible as HTML/CSS while still being behaviorally and aesthetically prescriptive. PUG tags are also supported and REACT is coming soon!

Link: https://pattern-library.dequelabs.com

Color.review

Color.review provide a new interactive way to explore, test & finds colors that are accessible. With unique visual guidelines, a user of the site can quickly identify and tweak their colors to be functional. The tool also interactively changes its colors so that the user in real-time simultaneously can test the visual and accessible aspect.

Link: https://color.review/

Color Contrast Checker

The Contrast Checker tool provided by WebAIM is a simple tool to check for contrast ratios for text with respect to backgrounds of different colors.

Link: https://webaim.org/resources/contrastchecker/

Colour Contrast Analyser

Colour Contrast Analyser(CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

Link: https://developer.paciellogroup.com/resources/contrastanalyser/

Coolors Color Palette Generator

Coolors is the super fast color schemes generator. Users can create, save, and share perfect palettes in seconds. With the press of a spacebar, a color scheme is generated from which users can adjust and refine to their desires, share to others, create a collection, and save on the cloud. Coolors is recommended by major companies all over the world.

Link: https://coolors.co/

Contrast

Contrast is a macOS app for designers and developers that provides quick access to WCAG color contrast ratios. Contrast scores are given immediately after colors are chosen, reducing time needed to check designs.

Link: https://usecontrast.com/

DYNO Mapper

DYNO Mapper is a sitemap generator that checks the web accessibility of websites and online applications. DYNO Mapper includes content inventory and audit, as well as daily keyword tracking. Results are displayed within visual sitemaps to allow for easy and efficient project discovery and planning.

Link: https://dynomapper.com/

HTMLDog

This is a tutorial website covering HTML, CSS, and Javascript in varying levels of difficulty. Not only does it showcase easy-to-understand tutorials, but also has a techniques and examples section, making it a great resource for either learning how to code in one of these languages or simply refreshing core concepts and syntax.

Link: https://www.htmldog.com/

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Link: https://developers.google.com/web/tools/lighthouse/

Pa11y Dashboard

Pa11y Dashboard is a web interface which helps you monitor the accessibility of your websites. With Pa11y you set up an accessibility dashboard for your site that displays all of the problems per page, helps you debug accessibility issues, and charts to show you progress or regressions. Great tool for visually sharing accessibility problems with your team and a perfect addition to shared monitors.

Link: https://github.com/pa11y/pa11y-dashboard

WAVE

The Web Accessibility Evaluation Tool, or WAVE, evaluates web content for accessibility issues for Chrome and Firefox browsers. The extension runs in the Chrome and Firefox browsers, ensuring private and secure accessibility reporting.

Link: https://wave.webaim.org/extension/

W3 Schools Color Pikcer

This is a very simple and convenient color picker for web development, with support for hex, RGB, and Hsl values.

Link: https://www.w3schools.com/colors/colors_picker.asp

W3 Schools HTML Element Reference

This is a very convenient tag reference for HTML, with tags sorted aphabetically. It provides a description of what each tag does, which browsers support it, and possible differences between different HTML versions.

Link: https://www.w3schools.com/tags/