Two Accessibility Tools to Add to Your Front-End Checklist

By now, most developers know how important accessibility is. You want to build sites that are functional and accessible, but many don’t know how or where to start. But getting started is not nearly as intimidating as you might think.

In this quick guide, we’ll share the tools we use to make websites accessible and how we use them. You’ll also find a few tips on things to watch out for while you’re coding.

Accessibility Tools to Use

Sites without interactive elements are generally accessible by default (aside from possible design issues, such as problems with color contrast), but once you start adding these elements, things can get…interesting (more on this later).

In order to properly check your site’s accessibility, you need the proper tools to do it.

There are two Chrome extensions we use to check accessibility: Accessibility Insights for Web (AIW) and WAVE. As a quick note: There is some overlap between the two, and we at Clique Studios primarily use AIW, but WAVE does have a few features we really like, too.

WAVE

Semantics

If you like to start with the easiest fixes, check semantics first. WAVE is great for this, as it gives you a clear overview of a site’s structure. To use, click on the WAVE extension, then click on the structure tab once the extension runs.

Structuring content correctly is just good practice, but it’s particularly important for people who use screen readers. Some things to keep in mind:

• A page should have one (and only one) h1 tag.
• All subheads should be in order; for example, h2 followed by h3, and so on.
• Each section should have at least an h2 tag. If it doesn’t make sense to have an h2 in a section, maybe it’s not actually a new section but part of the previous one.

WAVE’s structure

Color Contrast

WAVE is also a great tool for checking color contrast. (AIW, which we’ll discuss later, also includes excellent color contrast testing in its checks; ultimately, choose the tool you prefer.)

To use the color contrast tool, click on the WAVE extension, then check the summary on the left side of the page for contrast errors. If it indicates there are errors, click on the contrast tab to see more information. Clicking on a red box will scroll you to the location of the element with the contrast error. It’ll also give you the contrast ratio, so you’ll know how far off your color choice is.

If you find you need to fix contrast, Contrast Ratio is a great online tool for tweaking a color until it is accessible.

An example of WAVE’s color contrast test results; in this sample, the colors pass both AA and AAA requirements

Checking contrast isn’t fool-proof with either WAVE or AIW. For example, you may get false positives or negatives when text is against an image or a gradient background. Luckily, Colour Contrast Analyser was made for just these situations. It’s eyedropper tool lets you select two colors, then it checks the colors for accessibility.

Color contrast results in Colour Contrast Analyser

While WAVE is very useful, the following tool offers even more options for checking accessibility.

AIW

Fast Pass

AIW’s Fast Pass checks … well, a lot. The list is too long to include here ( we’ll cover keyboard accessibility separately), but it checks for things like missing alternative text, missing form labels, aria issues, duplicate IDs, and so on. If you’d like to see a more complete list of rules AIW checks, you can find them on this Github repo (AIW uses Deque Labs’ Axe Core accessibility API).

AIW’s accessibility checks opening tab

To run the checks, click on the AIW extension, then click on “Fast Pass.” A new browser window will open, and under “Automated Checks” you’ll find a list of any issues. For each error, you’ll also find a link to a page providing helpful information, including how to fix the problem and why fixing it matters, as well as a list of additional resources.

An example list of errors found by AIW’s Fast Pass check

Keyboard Accessibility

Finally, check keyboard accessibility. WebAIM offers a great summary of why this is important, but in short, not everyone wants to or is able to use a mouse, and we should support these users.

In order to check keyboard accessibility, click on the AIW extension, then click on “Fast Pass,” then—in the new window that opens—select “Tab Stops” . Toggle “Show Tab Stops On,” then go back to the page you’re testing and start clicking the tab key to move through the page. In addition to seeing the tab order, you can see if any tabs have been skipped. You can also see if any tabs that should be hidden are showing up.

Checking keyboard tabbing with AIW

This is where you are most likely to see some of those “interesting” issues with interactive elements. For example, if you have a closed hamburger menu, the links might still be part of the tab order. You’ll want to make sure that they can only be tabbed when the menu is open. You might also see tab issues in carousels with slides that are also links; make sure the slides that are off-screen can’t be tabbed.

We’ve covered some really great tools, but it’s important to remember these checks are just a start; they aren’t a replacement for doing a full check against WCAG rules.

At Clique, we’re extremely lucky to have an accessibility lead who does the more advanced accessibility work, but the front-end engineers use these checks to catch the more basic issues.

If you’re the only person responsible for accessibility on your projects, we highly recommend using AIW’s more in-depth Assessment tool. And if you’re interested in learning more about accessibility (and we hope you are!), start with The A11y Project’s accessibility checklist, which provides a friendly overview with links to more detailed information.