Web Accessibility: 4 Best Tools & Technologies

Here at Kanopi, we’re always paying attention to web accessibility testing. Ensuring that our clients’ websites adhere to accessibility standards is something for which we budget, because having compliant websites is important to guarantee that everyone has access to the web. As such, this is a list of our favorite web accessibility tools.

The World Wide Web Consortium (W3C) says, “The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.“

A11Y testing overview

A11Y is a numeronym for accessibility. “A” and “Y” being the first and last letters of the word accessibility with the “11” being the number of letters in between. Using specialized A11Y testing tools, we can run a website audit to determine how it can be improved for accessibility standards. These tools check for key elements on a webpage such as color contrast, heading levels, link focus and visibility, buttons, form inputs, alt text for images, and content.

Testing tools serve as a means of getting a good baseline on where your website rates in terms of accessibility standards. However, a person navigating through a site while tabbing with a keyboard or using specialized text to voice or screen reader software such as Voiceover for Mac or JAWS for Windows is considered invaluable.

We also evaluate the need for ARIA (Accessible Rich Internet Applications) as a means to provide extra information for assistive technologies. In this case, it might be an ARIA label added to some HTML markup. It’s important to note that ARIA can be overused, semantic HTML goes a long way on its own. The nice thing about testing tools is that it will indicate if ARIA is not being used properly or conversely if there needs to be something added to improve our code.

For example, a <button> element is usually fine on its own but there might be cases where you have a link <a> that needs to appear as a button, for example in the case of a call to action. In the case of a link, we might add something like this:

<a href="/register" role="button" aria-pressed="false">Register Now!</a>

What we’ve done here is indicate that the role of this link is to serve as a button.

In another example, one might have a <span> or <div> tag that needs keyboard focus while tabbing. In this case, we can add tabindex=”0″, indicating that the element should be in the natural flow of tabbing through the page.

Getting started: our favorite web accessibility tools

There are a variety of tools that can be employed for A11Y testing and many are available as browser extensions. The testing tools we’ll discuss include Axe, Lighthouse, Tota11y, and Siteimprove.

Lighthouse

Chrome’s built in audit tool, Lighthouse, is a general testing tool for webpage performance, SEO, best practices, and accessibility. The underpinnings of the accessibility piece in Lighthouse is based on Axe, an open source accessibility testing suite for websites and other HTML-based user interfaces. When a test is run, Lighthouse judges a webpage’s score up to 100 for each piece mentioned above.

Pictured above, Lighthouse Accessibility score from Chrome’s Lighthouse audit tool.

Lighthouse’s advantage is that it’s built right into Chrome and test results give you a great overview of potential A11Y issues on a given webpage. We are excited about implementing automated testing with the integration of Lighthouse into our Circle CI deploys.

Axe

Axe is available as a command line interface (CLI) tool or as a Chrome browser extension. Though Lighthouse uses Axe, the Axe tool on its own gives more specific and granular results and suggestions for accessibility fixes.

Screengrab of Axe CLI with links for information to fix a given problem, one of our favorite Web Accessibility Tools.

Pictured above is Axe CLI with links for information to fix a given problem

Siteimprove

Siteimprove is an extremely thorough and detailed A11Y testing tool, it is also available as a Chrome extension. Siteimprove gives an ultra-detailed report about accessibility best practices. The nice thing about this tool is, it goes into depth with a drill-down approach with several options for filtering by conformance level, severity, and responsibility.

Pictured above is Siteimprove’s test results screen

Conformance refers to the three ranks used to grade a site based on its level of accessibility. These levels,“A”,“AA”, and“AAA”, are set forth by the Web Content Accessibility Guidelines (WCAG) with “AAA” being the highest / most accessible level to strive for.The neat thing about Siteimprove is that you can expand a section to drill down to see more specific info about an issue with recommendations, a link to specific code in dev tools, as well as external documentation for a given issue.

Tota11y awesome

One other of our favorite web accessibility tools is Tota11y for its “screen reader wand” which simulates a screen reader as you navigate through a page. This really comes in handy. In addition, Tota11y has an annotation feature for things like missing alt tags, headings, contrast, and more.

Tota11y’s screen reader wand in action, on of our favorite Web Accessibility Tools.

Pictured above is Tota11y’s screen reader wand in action

Implementing fixes

What’s great about all these tools is that they give real actionable fixes to implement. So if you’re a developer working in your local environment, you can make some of the suggested code fixes and then see the new results in real time. The same holds for content editors as well.

It should be noted that in some cases, there might be false flags that require a manual review. A good example of this is, let’s say you have a website about books and reading showing book cover images on a grid. These will probably be flagged as having “Text within images.” In context, this is fine but it’s important to ensure that these images have appropriate alternative text tags that mirror each book’s image text. Let’s say we have the book, “Ender’s Game.” The image tag for it might look like this:

<img src="enders_game.jpg" alt="Book cover of Ender's Game by Orson Scott Card">

In this case, the alt text accurately describes the text pictured on the book cover image. There will be other cases where a manual review is required so judgment and best practices come into play as well.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Assistive technologies: tabbing and screen reader software

Of course, nothing replaces real world testing whether that is using your keyboard to tab through a page or using a screen reader such as Voiceover for Mac (VO) or JAWS for Windows. It might be that in these cases, you will find accessibility issues that were not evident with any of the standard testing tools.

When we test with these kinds of assistive technologies, we gain a lot of insight into how a page is ordered and if navigating either using tabbing or with software makes sense to the user. This is why tools like Siteimprove often say that a “manual review” is required for certain elements.For example, carousels present a difficult challenge as they are notoriously inaccessible. We strive to make carousels and other widgets like this accessible using keyboard listeners, tabbing detection, and custom ids and indexes to help with assistive technologies.

This carousel is a good example. We’ve added, custom roles, labels, data elements, and ids to help with being able to fully navigate it with a keyboard.

<div class="carousel-dots" role="tablist">
    <button role="tab" class="carousel-dot" data-target="#carousel-92" aria-label="1" data-slide-to="1" id="tab-0-1" aria-selected="true"></button>
    <button role="tab" class="carousel-dot" data-target="#carousel-92" aria-label="2" data-slide-to="2" id="tab-0-2" aria-selected="false"></button>
</div>

Summary

This is just the tip of the iceberg when it comes to A11Y testing, but in this day and age, it’s something that can no longer be ignored.

Accessibility teaches the most important skill a designer can have. That skill is empathy. Because what is design if it is not the practice of giving empathy a form? Design is putting ourselves in other people’s shoes and solving their problems.
John Brownlee