Testing tools

Email testing

Five accessibility bookmarklets to test the HTML version of an email.

• Show image alt text
• Outline headings and levels
• Outline table usage
• Highlight keyboard tab stops
• Outline larger text

Show image alt text

Show Alt Text

All images show their accessible name, usually the alt text. When present, images are outlined in green, but when missing they're outlined in red. You will still need to consider the appropriateness of the alt text in the context of the page.

Helps to check 1.1.1 – Non-text content

Outline tables

Outline Tables

Mostly for testing HTML versions of email content. Outlines all tables present. When the role is valid for layout purposes the outline is green, otherwise it's outlined in red and then it must be a data, or comparision, table.

Helps to check 1.3.1 – Info and Relationships

Highlight all keyboard tab stops

Highlight Tab-stops

All tab-stops are outlined green then change to blue upon focus. With the Tab key, check for anything missed or inappropriate. Note: An iframe outline won't change colour upon focus.

Helps to check 2.1.1 – Keyboard and 2.4.3 – Focus Order.

Test text spacing:

Max Text Spacing

The user must be allowed to adjust text spacing: margins, line-heights, letter-spacing, and word spacing in order to meet 1.4.12 – Text Spacing. This bookmarklet increases those setting to the maximum requirement. Run on a page, and check it did not break the site / app layout, that content can be read and interacted with.

Outline all landmarks:

Highlight Landmarks

All landmarks are outlined and marked. Check for anything missed or inappropriate.

Helps to check 2.4.1 – Bypass Blocks and 1.3.1 – Info and Relationships.

Outline all headings:

Highlight Headings

All headings are outlined and marked. Check for anything missed or inappropriate.

Helps to check 2.4.1 – Bypass Blocks, 1.3.1 – Info and Relationships, and 2.4.6 – Headings and Labels.

Outline all lists:

Highlight Lists

All lists are outlined and marked. Check for anything missed or inappropriate.

Helps to check 2.4.1 – Bypass Blocks and 1.3.1 – Info and Relationships.

Edit webpage copy:

Edit text

Allow a web pages' text to be editable. Good for rephrasing content in situ. More for editors and design than accessibility checking.

Deque

Axe Devtools

Browser extension.

WebAim

Wave

Browser extension.

Lighthouse

Lighthouse

Chrome extension.

Ark Toolkit

Ark toolkit

Chrome extension.

A11y.css

A11y.css

Browser extension.

Tota11y

Tota11y

Browser extension.

Aria-devtools

Firefox aria-devtools

Chrome aria-devtools

Browser extension.

IBM Accessibility

Project tools

Project tools for accessibility, including browser extensions.

Headings map:

Headings map for Chrome

Headings map for Firefox

Generates a document-map or index of any web document structured with headings.

Helps check: 2.4.1 – Bypass Blocks, 1.3.1 – Info and Relationships, and 2.4.6 – Headings and Labels.

WebAim

Contrast checker

Online tool.

Colors

Colour contrast checker

Online tool.

Freedom Scientific

JAWS

Windows software.

NV Access

NVDA

Windows software.

Narrator

Guide to Narrator

Pre-installed on Windows

Voiceover

Voiceover guide

Pre-installed on MacOS.