Skip to main content

My Favorite Tools for Web Accessibility Testing

Posted on

  • #accessibility
  • #bookmarklet
  • #browser
  • #screenreader
  • #testing
  • #tools
  • #web

Web accessibility has many facets: Operation with the keyboard and other input devices, alternative texts for images, descriptive headings and error texts, etc. The range of tools for testing the accessibility of websites is just as diverse.

First things first: there is no single power tool that automatically detects all barriers and ideally also removes them straight away. This also applies to AI-based accessibility tools. Yes, artificial intelligence has great potential, but current tools cannot replace a comprehensive accessibility test. Even if certain people claim otherwise in the frenzy of AI hype.

Various garden tools and plants on a table. Photo: © Thirdman / pexels.com

We need the right tools for the delicate little plant of accessibility to flourish. Here is my personal selection of free bookmarklets, browser extensions and accessibility testing tools.

Structure and Semantics

  • WAVE (Web Accessibility Evaluation Tools): An accessibility analysis tool from WebAIM. Available as a browser extension for Firefox, Chrome and Edge. I find the structure view particularly useful, where you can see at a glance whether meaningful landmarks (header, main, etc.) and heading levels have been defined.
  • Firefox Accessibility Inspector is a built-in component of the Firefox developer tools. Do you want to know what information an interactive element communicates to assistive technologies? Simply right-click on it and select “Inspect Accessibility Properties”. Firefox opens the “Accessibility” tab in the developer tools and jumps to the corresponding node in the accessibility tree. Debugging has never been so easy! 😍
  • Test with screen readers: No accessibility audit is complete without screen reader testing. In view of limited budgets in projects, it is not possible to test with all screen readers on all platforms. Based on current statistics, I have therefore defined the following test scenarios:
  • If you have never tested with the screen reader, then read my article “5 Tips for getting started with Accessibility Audits using a screen reader”.

Ideal for testing the WCAG criteria 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value.

Keyboard Operability

  • Test with keyboard: Use the tab key to access the interactive elements on the page (buttons, links, etc.). Does the focus order make sense? Can keyboard users reach and activate all interactive elements? Is the focused element visibly highlighted? On a smartphone or tablet, you can simply connect a Bluetooth keyboard for testing.
  • taba11y: This useful browser extension calculates the tab order of all elements and displays it visually, either by drawing a path or by highlighting the elements.

Ideal for testing the WCAG criteria 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.3 Focus Order, and 2.4.7 Focus Visible.

Responsive Content

  • Browser settings: Change the default font size of your browser to check whether the website automatically adjusts the text size. Most browsers, such as Edge, only allow you to choose from predefined options such as “Small”, “Medium” and “Large”. In Firefox, on the other hand, users can define a specific pixel value as the default font size.
  • Alternatively, you can use the browser's zoom function (CTRL and + key) to enlarge the entire page content in proportion to the font size.
  • Use the text spacing bookmarklet or a browser extension (e.g. Editor for Textlayout) to set the values for line height, spacing following paragraphs, letter spacing and word spacing to the maximum required values. No content should be cut off or overlap.

Ideal for testing the WCAG criteria 1.4.4 Resize Text, 1.4.10 Reflow, and 1.4.12 Text Spacing.

Target Size of Interactive Elements

  • Target Size Bookmarklet: It identifies interactive elements, calculates their center and draws a semi-transparent circle of 24 by 24 pixels around the center of the element: A green circle with a thick border means that the target size is sufficient. Elements with a blue circle should be examined manually.
  • This way, you can find buttons and links much more quickly where users with motor impairments may have problems clicking or tapping.

Ideal for testing the WCAG criterion 2.5.8 Target Size (Minimum).

Minimum Contrast

  • Chrome Lighthouse is part of the developer tools in Chrome. The Lighthouse accessibility check reliably finds the majority of elements with too low a contrast ratio.
  • PowerToys Color Picker: The Microsoft PowerToys are a collection of utilities for power users. With the key combination WIN+Shift+C you can activate the color picker at any time and extract the color value of a pixel on the screen.
  • WebAIM Contrast Checker: Simple tool to check the contrast ratio of a font color to the background color. A particularly useful feature is that you can share the selected color values and their evaluation as a permalink.

Ideal for testing the WCAG criteria 1.4.3 Contrast (Minimum) und 1.4.11 Non-text Contrast.

Additional Links

Posted on

HomepageTop