August 19 2020

How to Use a Free Browser-Based Accessibility Testing Tool, and When Not To

As website accessibility continues to be a priority for responsible website managers, there is an increased demand for user-friendly and affordable accessibility testing tools. While there are free browser-based options available online, it is important to understand how they work – including their features, benefits, and drawbacks – as well as how they might be giving you a false sense of security.

About Browser-Based Web Accessibility Testing Tools

Free browser-based web accessibility testing tools (ATT) run directly through your browser to identify accessibility issues on a rendered webpage. Popular products include WAVE (Web Accessibility Evaluation Tool), Siteimprove Accessibility Checker (for Chrome and Firefox), axe (Accessibility Browser Extension), and Colour Contrast Analyser (CCA). These tools typically work in conjunction with the browser’s developer console, allowing users to directly look at the code itself. Each tool checks against the latest WCAG 2.1 standards, but only some allow you to filter based on A, AA or AAA levels.

  • Siteimprove Chrome Extension – This is a great option for those that are more knowledgeable in terms of website accessibility requirements and resolutions. It allows operators to tinker with the code in the developer console to come up with solutions, making it most rewarding for developers, testers and content managers that understand the fundamentals of Aria and HTML, two major components of website accessibility. While these features are valuable, this particular tool can be overwhelming to those with less experience and understanding, as it can show all errors, warnings and items that may not necessarily be violations. A trusted digital agency that has website ADA experience can help you separate the most important violations to address and those that are global elements that can also be quickly addressed.

  • WAVE – As more of an introductory tool for checking a page for accessibility, WAVE was originally created by the non-profit Center for Persons with Disabilities at Utah State University. It not only easily identifies on-page errors, but it also shows page structure, headings, contrast, and even the page with CSS disabled. WAVE was initially designed with positive intentions of helping improve web accessibility, however, the tool has been questionably used by law firms to run quick scans and develop a list of infractions to use against website creators. This has been particularly problematic as WAVE is known to produce false positives, which would only be identified by a more experienced user.

  • axe This tool was released by Deque Systems, a software company providing web and mobile accessibility solutions to help businesses meet compliance goals and support overall accessibility. axe works directly within the developer console, eliminating unnecessary screen elements and streamlining the testing experience. axe shows the location of violations in the code and on the page, as well as allows you to save the results for reference. While the tool provides valuable features, it does require a relatively large learning curve and specific knowledge in order to comfortably work inside the developer console.

  • Color Contrast Checker – This tool takes a snapshot of your page and inspects text against WCAG requirements, including 3 to 1 or 4.5 to 1 contrast levels. It renders the page in a way that clearly indicates what does and doesn’t pass, eliminating the need for interpretation. However, the tool will not evaluate both contrast levels concurrently, meaning you must determine if you’re assessing 3 to 1 (18 point font/14 point bold or higher) or 4.5 to 1 (12 point font) prior to running the test.

While each of these website conformance solutions offers unique features and benefits, many of them have the same advantages including:

  • They are free, supporting efforts toward website conformance and accessibility for all users.

  • They can detect common issues such as missing image ALT tags, headings and iframe titles, broken labels, color contrast violations, as well as generic links, input and select boxes with no accessible descriptions.

  • They work on the rendered HTML page, reducing false positives that can occur when looking at the raw HTML on a page that hasn’t been fully rendered.

  • They offer realistic preview features for troubleshooting, allowing users to scan the page at any zoom ratio, any browser size, and any configuration of the responsive design – from mobile to tablet – directly within your desktop browser.

  • Most show both where the violation occurs on the page, and where it exists in the code, allowing for easier identification and correction.

  • Most allow for modifications to the HTML in a safe local environment (desktop browser) in real time to determine if it fixes the issue.

These qualities are helpful to someone looking to improve the overall accessibility of their website while learning about how code affects usability for persons with disabilities. Even someone with very little HTML or accessibility experience can identify standard violations and figure out how to resolve them.

More Advanced Accessibility Testing

Even though browser-based web accessibility testing tools provide helpful information and insights, they do not guarantee that your site is conformant or accessible from either a legal or usability perspective. You could eliminate every reported issue and still have an unnavigable menu, buttons that make no sense to screen readers and information contained only in images, for example. They are simply tools that can be used as part of a complete accessibility toolbox and cannot replace the value of manual testing with assistive technologies, or knowledge and understanding of WCAG and HTML. These advanced systems are the foundation for establishing a truly conformant and usable site for those with disabilities, rather than one that simply checks the boxes.

The Verdict

There’s a lot to be gained by using browser-based accessibility tools. Users at any skill level can find and resolve valid issues that will help improve the accessibility of your site and improve your own knowledge. However, they are not the end-all-be-all of website accessibility and they cannot match more advanced methods of testing and resolution. If you want to learn more and start solving the small problems yourself (while learning why they’re a problem) these tools are a good option – but realize that it takes more to achieve complete website accessibility. To discuss website accessibility questions you may have, talk to one of our certified website accessibility professionals.

  • Website Compliance

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Infographic: What You Need to Know About Website ADA Conformance