Skip to content
A11y Coffee ☕️

Start Testing for Web Accessibility

Summary

A light introduction to a variety of accessibility testing tools. Run some audits over a mug of coffee (or whatever)! You will learn a ton by running audits and addressing the resulting warnings and errors.

You may find it useful to run audits with each tool as you read, to experiment with them. A great page to run tests on is "Accessible University", a fictional university homepage intentionally designed to show accessibility errors.

Table of contents

Lighthouse

Lesson hosted on egghead.io

Google's Lighthouse tool is an open-source, automated tool for measuring web pages.

Testing with Lighthouse

You can run Lighthouse in any browser without installing anything, in Chrome using the Chrome dev tools, or from the command line.

There are other ways to run Lighthouse, like incorporating it into your continuous integration workflow, but these options are the most straightforward to get started with. Check out Google's landing page for the Lighthouse tool for more.

Interpreting Lighthouse results

Depending on how you run Lighthouse, there are several audit categories you may see. If you run from web.dev, you'll see results for performance, accessibility, best practices, and SEO. If you run it from dev tools or the command line, you have more flexibility, and can choose which audits to run.

These scores are useful benchmarks, but can give a false impression. A score of 100 for accessibility means that automated testing found no errors. But we know that automated testing doesn't catch everything. Still though, it's a great place to start!

The audit will also return a listing of flagged violations and warnings, sortable by "impact" ("high", "medium", "low"). You'll find the accessibility warnings under the "Accessibility" category.

Each flagged item links to a resource where you can learn how to address it. Going one-by-one through these items is a great way to learn.

WAVE

Lesson hosted on egghead.io

The WAVE Web Accessibility Evaluation Tool is developed and made available as a free community service by WebAIM. With the WAVE tool, you can test for accessibility directly in the context of the page.

Testing with WAVE

You have several options for running WAVE. The easiest options are to run it in the browser (no need to install anything), or to run it via a browser extension.

Interpreting WAVE results

WAVE will overlay the page with icons and indicators that present in-context feedback about the accessibility of elements on the page. WAVE also presents a sidebar with a report section with tab views:1

  • Summary: A summary of errors, alerts, features, structural elements and HTML5 elements and ARIA attributes detected.
  • Detail: A listing of all the WAVE icons in your page. Clicking an item will change your focus from the sidebar directly to the element in question in the audited page.
  • Documentation: Explanation of the WAVE icons and how you can make your page more accessible.
  • Outline: The heading structure of the page.

WAVE "Views"

WAVE displays accessibility information in three views:

  • Styles: Presents the styled page with embedded accessibility icons and indicators.
  • No Styles: Presents the page with styles disabled with embedded accessibility icons and indicators. This view is great for reviewing the underlying reading and navigation order of the page.
  • Contrast: Shows only the contrast issues found on your page.

Axe

Lesson hosted on egghead.io

Axe is an accessibility testing engine for websites and other HTML-based user interfaces.2 It's an open-source product of Deque, a digital accessibility company.

Testing with Axe

There are a variety of ways to test with the Axe library. The easiest way to test a web page in the browser is with the Axe browser extension (available for Chrome and Firefox).

There are just a few steps to testing with the Axe extension:

  1. Download the axe extension for Chrome or the axe extension for Firefox.
  2. Go to the page you want to test.
  3. Open up your browser’s developer tools menu.
    • In Chrome, right-click and select "Inspect".
    • In Firefox, right-click and select "Inspect Element".
    • In either browser, use the keyboard shortcut Ctrl + Shift + C on Windows, or Cmd + Shift + C on Mac.
  4. Select the axe tab in the developer tools menu.
  5. Hit the big “Analyze” button.

Interpreting Axe results

After analysis is complete, the Axe pane shows a list of accessibility issues it identified, as well as how many times the issue was found to occur on the page. Interacting with an issue shows more detail, including:

  • A description of the issue
  • A link to additional info on how to evaluate or address the issue
  • A snippet of the code that has caused the issue
  • The issue's impact level

You can select "Inspect node" to inspect (in the "Elements" tab of your dev tools) the code related the issue. You can turn on "Highlight", which will visually outline the UI generated by the code related to the issue.

Accessibility Insights

Accessibility Insights is a set of free testing tools from Microsoft. It uses axe-core under the hood. The suite of testing tools currently includes browser extensions for Chrome and Edge Insider, as well as an application for testing Windows applications. We'll continue to focus on browser testing here, and talk about Accessibility Insights for Web (the browser extensions).

Testing with Accessibility Insights

Accessibility Insights for Web supports three primary workflows: FastPass, Assessment, and Ad hoc tools.

Accessibility Insights "FastPass"

The "FastPass" workflow is a two-step process that helps quickly identify common, high-impact accessibility issues.

  1. Automated checks: It automatically scans for compliance with approximately 50 accessibility requirements.
  2. Tab stops: It provides clear instructions and a visual helper to assist in identifying critical accessibility issues related to keyboard access, such as missing tab stops, keyboard traps, and incorrect tab order.

Accessibility Insights "Assessment"

The "Assessment" workflow assists in verifying that a web app or web site is compliant with WCAG 2.0 Level AA, through a combination of automated and manual tests (many of which are guided).

  1. Automated checks: It automatically checks for compliance with approximately 50 accessibility requirements.
  2. Manual tests: It provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests, such as keyboard, focus, semantics, pointer / motion, and more. Many tests are "assisted", which means that the tool identifies the test instances or provides a visual helper.

Accessibility Insights "Ad hoc tools"

The "Ad hoc tools" workflow includes the two steps of the "Fast Pass" workflow -- automated checks and tab stops -- and adds three more:

  1. Color: The "Color" visualization shows the target page in grayscale, which assists in manually identifying instances where color is the only visible means of conveying meaning.
  2. Headings: The "Headings" visualization visually identifies the heading levels of programmatically-identified headings on a page. Because headings can be restyled, and the actual heading element level isn't identified visually, heading order can easily become disordered.
  3. Landmarks: The "Landmarks" visualization highlights landmarks on the page, empowering you to visually confirm the appropriate use of landmarks on the page.

All of these tools are part of the "Assessment", but they can be really helpful tools to reach for outside of the context of a full assessment.

Each of these ad hoc tools have supporting pages with more information and "dos and don'ts". You don't need to know what you're looking for -- the tool will teach you what to look for!

Read on

Read on and find out how you can keep digging deeper.

  1. WAVE help page.↩
  2. axe-core README.↩