Accessibility Testing Tools

This blog post will get you started with some of my favorite Accessibility Testing Tools.

Important note: Automated testing can never replace manual testing (at least so far, in 2024). There are tools that can identify some or many A11y issues, but no tool can certify that a web app is fully accessible. Manual testing ensures that you test for a breadth of A11y concepts that include logical content order and feature parity.

However, automated testing is fast and - at least to me - some kind of entertaining work 🚀

Chromium Browser

First, please stop using the lame Firefox (slow open-source browser sponsored mainly by Google). I strongly recommend using a Chromium based browser! Safari is okay for people who love their golden Apple cage. Here are some browsers that I can recommend:

• Vivaldi (Privacy & Linux)
• Brave (Privacy & Ad blocker)
• Arc (for something completely different) and even
• Edge (for Windows machines without Admin privileges)

Personally, I prefer using a clean Google Chrome on my Macs and my Pixel. Just like I prefer a clean Google Android and have been happily sticking to Nexus (4, 5, 5) and later Pixel (3a, 6a, 9 Pro soon 😎 - review in German) for over a decade now. However, if you don't want to share your data with Google - those Chromium browsers listed above (except Edge) are the better choice for sure.

While the Spaces feature of Arc is pretty interesting, I just use different Chrome users for my different jobs. E.g., one of them for everything related to Angular Architects - like reading this post 🤓

Did you notice that Chromium DevTools have a built-in Accessibility Tree view?

Chromium Extensions

Before we talk about a selection of my favorite Accessibility Tools, please add the following extensions to your browser (at least temporarily):

• Angular Dev Tools (should be there already since you're here 😏)
• WAVE A11y Testing Tool, 500k users
• axe DevTools A11y Testing Tool, 300k users
• Accessibility Insights A11y Testing Tool, 100k users
• Read Aloud Screen Reader (OS-based Screen Readers listed at the end of the post are better, though)
• HeadingsMap (partially related to A11y, for heading structure)

You may need to restart your browser for the just-added extensions to work.

Please note, that three of them are used exclusively for A11y testing. Once you've found your favorite A11y weapon of choice, you might want to remove the other two. My personal preference will be mentioned below!

Automated Testing

Identify issues and how to know what to fix

The A11y Testing Tools allow you to quickly and easily check things like the presence of alt text on an image or the contrast ratio of a text color. You can think of these tools as linters; they can recognize that alt text is present, but you must manually check that the content is logical and provides value.

Some tools might find a lot of errors or warnings on your app or web property. Please don't feel overwhelmed in such a case and start improving your A11y step-by-step. Here is a customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2.2 requirements (success criteria) and techniques:

• https://www.w3.org/WAI/WCAG22/quickref/

You'll need to find a prioritization for your issues. The WCAG's levels (A, AA and AAA) will help you get started.

Now, finally, the selection of my favorite Accessibility Testing Tools 🥳

Angular ESLint (only for Angular apps)

You can use the Angular ESLint package to lint your code for automatable A11y attributes. In eslint.json, make sure to add the a11y ruleset plugin @angular-eslint/template/accessibility to your HTML templates:

{
  "overrides": [
    /* [...] */
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        /* add the following line */
        "plugin:@angular-eslint/template/accessibility"
      ],
      "rules": {
         /* [...] */
      }
    }
  ]
}

To add Angular ESLint to your own Angular app, simply run:

ng add @angular-eslint/schematics

Note: With the newest version, the plugin @angular-eslint/template/accessibility is included by default.

For more information, see the latest Angular ESLint rules on GitHub.

WAVE Chrome Extension

1. If you haven't done so already, install the WAVE Chrome extension.
2. Click on the Wave icon to run the WAVE Ally test on the current page.

WAVE Web Service

If you want to check a public web property, you can also try the WAVE Web Accessibility Evaluation Tool.

Axe Chrome Dev Tools

1. If you haven't done so already, install the axe DevTools extension.
2. Open your DevTools and select the axe DevTools tab.
3. Click Scan all of my page to run an axe Ally scan on the current page.

Lighthouse Dev Tools

1. Open your DevTools and select the Lighthouse tab.
2. The options Navigation and Mobile (or Desktop) are okay.
3. Select the Accessibility checkbox and deselect all other checkboxes.
4. Click Generate report to run a Lighthouse A11y audit.
5. Check the results of your audit.

PageSpeed Insights Web Service

Note: For public properties, you can also use Google's PageSpeed Insights to run the lighthouse A11y test.

Accessibility Insights Dev Tools

1. If you haven't done so already, install the Accessibility Insights extension.
2. Open it by clicking on the extension icon and selecting Accessibility Insights.
3. Click FastPass to run a quick first test of your page.

Run A11y Tests

If you haven't done so already, run some automated tests on your machine now 💻

Manual (Auditory) Testing

Besides other manual testing, you want to do auditory accessibility tests. You want to turn on your machine's built-in screen reader and navigate through your (Angular) app with keyboard navigation.

Screen Reader

You can use any one of these screen readers:

• NVDA (Windows, free & recommended for A11y testers)
• Jaws (Windows, expansive & favorite choice of people with handicapped sight)
• Narrator (Windows, built-in)
• Voice Over (Mac/iOS, built-in but great)
• Talkback (Android, built-in but great)
• Orca (Linux, free)
• Read Aloud Chrome Extension (not so great, IMHO)

Accessibility Workshop

In my A11y workshop, we test the issues manually, and we'll use the just-recommended automated tools to assist in checking specific features.

• Accessibility Workshop, next on Sep. 6th ♿

Conclusion

Tools are always a matter of personal preference and taste. So, I'd like to invite you to try out some of the recommended tools and choose your own favorite one. Nevertheless, my favorite of all is the WAVE extension and web service. Happy testing!

This blog post was written by Alexander Thalhammer. Follow me on GitHub, X or LinkedIn.