Web accessibility has come to the forefront of discussion in the past few years and has reached the C-suite. That means it is time to discuss the tools to assist frontend developers in achieving compliance goals. The sooner accessibility is achieved, the more users may have access to everything the company or product has to offer. The internet is fundamentally designed to work for all people, and all hardware, software, languages, locations, or abilities they have. It is part of a frontend developer’s goal to make it accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

The impact of disability has radically changed across the internet due in part to removing barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are poorly designed, they can create similar barriers that exclude people from using these tools.

Web accessibility means that websites, applications, and related technologies are designed and developed in a way for people with disabilities to use them. It is essential for developers and organizations that want to create high-quality websites and web tools so as not exclude people from using their products and services.

Over the course of the last year I have spent a majority of my time fine-tuning and upgrading an existing national financial institution’s website to make it 100% ADA compliant. You can read more about web accessibility for frontend developers in a previous blog for styling and structure advice. Below are some tools I recently discovered over my year-long compliance journey. They were very helpful in outlining and discovering the necessary solutions to some large corporate websites’ accessibility needs.

Contrast Ratio Tools

There are many tools out there to assist in finding the proper contrast ratio for foreground and background colors, but none as robust as Lea Verou’s Contrast-Ratio.com website. Simply add your values and it will instantaneously report the rating score based on WCAG AAA and AA compliance.

Google Lighthouse

A great starting point for overall compliance testing is using Google Lighthouse. It’s built into the Chrome browser, once a page is inspected one may navigate to Lighthouse and run either a desktop or mobile diagnosis of the page. Among many things tested in the tool, Accessibility is the rating to look for here. The page will score anywhere from 0 to 100 percent and give a list of all passed audits as well as failures and possible ways to correct them. Major keys here are to look for the ARIA usage and feedback for certain HTML structures like titles, buttons, and anchor tags.

Accessibility Checker

The accessibility checker website is provided by the International Association of Accessibility Professionals. It is well designed and itself is a great example of a compliant and efficiently coded website. All possible audits for vision, hearing, and motor skills are tested to the best ability the tool can offer before manual tests are required to confirm user performance. It confirms or denies site compliance with US law as well as an overall score from 0 to 100 percent with a breakdown of audit results.

WAVE

WAVE is a tool developed by WebAIM available online and as a Firefox extension. It provides a visual breakdown of the entire page audited with compliance checks and solutions to be made for the individual page.