Accessibility testing tools

By: Steve Wilkinson
Posted:
Tagged with:

We are often asked about tools that can help with testing web pages for accessibility issues, and the majority of the tools below are extensions that are installed into web browser which either enable automatic testing of web pages, or help determine how pages can be navigated using headings or other elements.

The screen readers are required when testing web pages to determine how they interact when a user utilises assistive technology.

The quality of the following tools is not verified by MakeThingsAccessible and you use them at your own risk. Inclusion on this list does not constitute endorsement of any tools.

Browser extensions, plugins, and add-ons

Chrome

Edge

Microsoft store

Chrome store

Adding an extension from Chrome store (external website).

Opera

Opera Store

Chrome store

Adding Chrome extension to Opera (external website).

Firefox

Safari

a11yTools - Apple webstore - Web Accessibility (external website) - collection of HTML Web Accessibility Testing Tools

Code for Stylus

Create the following two styles. "Focus Style" adds a focus indicator so that things which don't have an indicator but should can be easily found, and "Testing WCAG 1.4.12 Text Spacing" can be used to make sure that the text spacing is not constrained by CSS.

Focus Style

a:focus, 
button:focus, 
[tabinex="0"]:focus, 
input:focus, 
select:focus { 
    outline: 3px dotted hotpink !important; 
}

Testing WCAG 1.4.12 Text Spacing

* { 
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}


p{ margin-bottom: 2em !important;}

Javascript bookmarklets (can be used by all browsers)

Bookmarklets are browser bookmarks that execute JavaScript instead of opening a webpage, and may also be referred to as favlets, bookmark applets, or JavaScript bookmarks.

Bookmarklets are available natively in all major browsers, including Mozilla Firefox and Chromium-based browsers such as Chrome, Edge, or Brave.

Bookmarklets are used by right-clicking the bookmarklet and choosing "Bookmark Link" or by dragging the link into the bookmark bar so that it can be accessed easily (useful if the bookmarklet is to be used a lot).

If you wish to write your own bookmarklet, freeCodeCamp (external website) has a guide on What are bookmarklets? How to use JavaScript to Make a Bookmarklet in Chromium and Firefox (external website).

Screen readers

NVDA

NVDA download (external website).

Potentially useful addons

JAWS

VoiceOver

TalkBack

Narrator

Complete guide to Narrator (external website).

Colour contrast checkers

Palette generation tools

Compliance checkers

Browser extensions

Applications

Suggest something

If you have any suggestions for other tools that you think we should use and should be added to this list, please contact us at info@makethingsaccessible.com

Share on:

Site preferences

Please feel free to display our site, your way by finding the preferences that work best for you. We do not track any data or preferences at all, should you select any options in the groups below, we store a small non-identifiable token to your browser's Local Storage, this is required for your preferencesto persist across pages accordion be present on repeat visits. You can remove those tokens if you wish, by simply selecting Unset, from each preference group.

Theming

Theme
Code block theme

Code theme help

Code block themes can be changed independent of the site theme.

  • Default: (Unset) Code blocks will have the same theme as the site theme.
  • Light 1: will be default for users viewing the light theme, this maintains the minimum 7:1 (WCAG Level AAA) contrast ratio we have used throughout the site, it can be quite difficult to identify the differences in colour between various syntax types, due to the similarities in colour at that contrast ratio
  • Light 2: drops the contrast for syntax highlighting down to WCAG Level AA standards (greater than 4.5:1)
  • Dark: Syntax highlighting has a minimum contrast of 7:1 and due to the dark background differences in colour may appear much more perceivable

Motion

Motion & animation

Motion & animation help

  • Default (Unset): Obeys device settings, if present. If no preference is set, there are subtle animations on this site which will be shown. If you have opted for reduce motion, smooth scrolling as well as expanding and collapsing animations will no longer be present, fading transtitions and micro animations will still be still present.
  • None: All animations and transitions are completely removed, including fade transitions.

Links

Underline all links

Underline all links help

  • Default (Unset): Most links are underlined, with a few exceptions such as: the top level links in the main navigation (on large screens), cards, tags and icon links.
  • Yes: Will add underlines to the exceptions outlined above, resulting in every link being underlined

Text and paragraphs

Font size (main content)

Font size help

This setting does not apply to the site's header or footer regions

  • Default (Unset): Font sizes are set to site defaults
  • Selecting Large or Largest will increase the font size of the main content, the size of the increase depends on various factors such as your display size and/or zoom level. The easiest way to determine which option suits you best would be to view this text after clicking either size's button
Letter spacing

Letter spacing help

  • Default (Unset): Default letter spacing applies
  • Increased: Multiplies the font size by 0.12 and adds the sum as spacing between each character
Line height

Line height help

  • Default (Unset): all text has a minimum line height of 1.5 times the size of the text
  • Increased: all text has a line height of twice the size of the text
Line width

Line width help

  • Default (Unset): all text has a maximum line width of 80 REM units (this averages around 110 characters per line)
  • Decreased: all text has a maximum line width of 55 CH units (this averages around 80 characters per line)
Paragraph spacing

Paragraph spacing help

  • Default (Unset): The space between paragraphs is equivalent to 1.5 times the height of the paragraph's text
  • Increased: The space between paragraphs is equivalent to 2.25 times the height of the paragraph's text
Word spacing preference

Word spacing help

  • Default (Unset): No modifications to word spacing are present
  • Increased: Spaces between words are equivalent to 0.16 times the font size