Tools to Test Your Web Accessibility

We have given ourselves the objective this year of improving the accessibility of COCo’s online presence, as well as the accessibility of the websites we build for nonprofits. As part of this project, we’ve welcomed an intern who is doing a lot of heavy lifting. Hannah has been researching the different tools that exist to test your website and other communication platforms for accessibility, and we thought it might be very useful to share the results of her search! We have tried out all of the tools on this list, and they are also all available for free.

If you are interested in which of these tools work in French, click on the top right (FR) of this web page to see the French version.

Table of Contents

What do we mean by accessibility?

Wikipedia helps break this down in simple terms:

Accessibility is the design of products, devices, services, or environments for people with disabilities.^[1] The concept of accessible design and practice of accessible development ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology^[2] (for example, computer screen readers).

In the context of websites and other online content, common accessibility concerns include vision loss or colourblindness (making it hard or impossible to see the content) and reduced mobility (making it hard or impossible to use a mouse or a keyboard).

We will reference a few common assistive devices in this post, including screen readers.

Guidelines for Web Accessibility

The World Wide Web Consortium developed these guidelines as part of their Web Accessibility Initiative. The initiative aims to create a standard of accessible practices for web design. The guidelines are broken down into 4 accessibility principles: Perceivable, Operable, Understandable and Robust. These guidelines are recognized and used all around the world, so a lot of the tools below will help test your website for whether it meets these guidelines.

You can visit this site for The Web Accessibility Guidelines at a Glance
You can find the full web accessibility guidelines available here
This document does a cool job of laying these guidelines out in a more visual way

In addition to these guidelines, there is also a set of guidelines for ‘Section 508 compliance’. Section 508 is a set of standards and guidelines that American Federal Agencies are required to meet, but like WCAG 2.0 they are pretty widely used and referenced.

You can find the standards and guidelines for American Federal Agencies here.

Tools that Test your Website Accessibility

You can also test your website’s existing accessibility issues by using these tools.

Here is a great free browser extension called WAVE (for either Firefox or Chrome) that evaluates your entire webpage for common accessibility concerns. To use it, go to the webpage you want to test and click on the WAVE icon to the right of your browser address bar. You will get a sidebar that flags any errors found on your website, they will also be highlighted directly on the webpage for you to see. There is also a built in colour contrast tool, that will identify whether the contrast in colour on your website is readable to people with different visual impairments.
This is a tool called “Accessibility Insights“ that you can either download as a chrome extension or you can download for Windows. It has a few different helpful modes:
- FastPass, which can run two tests that find the most common accessibility errors. It will highlight on the page each error that needs to be addressed and it will give you a helpful explanation as to what the error is and how you can fix it. Helpfully, this tool will also tell you how critical each error is and what disabilities are affected.
- It also has a “Tab Stops” mode that will show you visually the way that someone would navigate your web content with their keyboard, which helps you see what interactive elements are not accessible. Many users use this feature, especially if they are have vision loss or have mobility issues that making mouse navigation difficult.
- There is also a great “Assessment” aspect of this extension. It walks you through some important WCAG 2.0 requirements, especially those that require a manual check. The assessment process includes approximately 20 tests. You can go through the entire checklist and it lays everything out in clear terms. This is the tool we have been most relying on to audit the COCo website, and we’ve been really impressed so far with how simple it is to use.

Testing Your Website For Specific Accessibility Issues

Is my website accessible for users with screen readers?

The best way to see if someone using a screen reader can navigate your website is it use one yourself! You can install this popular screen reader for free, and see if what you are working on is read properly or not. You should test with screen readers by using them to:

read every element and header
tab through every link
check every landmark, for example your footer and any navigation
check your use of Accessible Rich Internet Applications (ARIA)
check you can fill in any editable fields, for example writing and submitting a form

This is another popular free screen reader.

Is my website accessible for users with screen magnifiers?

Again, the best way to see how your website looks with a screen magnifier is to use one.

If you are using a Mac you can just press and hold the [control] key, then scroll the mousewheel up and down to zoom in and out.
With Windows press the Windows logo key‌ + Plus sign (+) on the keyboard to turn Magnifier on. Press Windows logo key + Esc to turn it off. Zoom in and out using the Windows logo key & either the + or – key OR using the mouse by pressing Ctrl + Alt and rotating the wheel on your mouse.

When using screen magnifiers, you should test up to at least 10 times magnification.

You should check:

the spacing between elements, for example the gap between a form label and field
the content is clear with different colour schemes, for example by reversing the colours
the cursor enhancement and focus indicator is visible on all active areas to indicate position on the page
The content is read in a logical order following the visual order

Is my website accessible for users with speech recognition software?

Speech Recognition Software allows you to navigate a website using voice commands. It is especially useful for people with disabilities who can’t use a mouse or keyboard.

If you are using Windows, there is a free program called Speech Recognition. Here is a walkthrough on how to enable the program.
For Mac users there is enhanced Dictation, which is best used in Safari. Click here for that walkthrough as well.

To test your service with speech recognition technology, you should use speech to:

navigate to each feature
activate every link, button, or interactive element, for example form controls or a media player
enter text into any forms if applicable to your service

Guidelines for Text Accessibility

Guidelines on Format and Style

Your formatting and writing style can have a significant impact on accessibility.

This tool gives guidelines for using bulleted lists. Bulleted lists are a great way to break up text and make it easier to read. However, they are often built incorrectly, which can make the information they are trying to convey completely inaccessible to certain users. The University of Minnesota put together this great guide to the best way to use bulleted lists and numbered lists.
This app is great for checking that your text is easy to read. This one specifically flags any passive voice found in the text. This makes information accessible to people with different intellectual disabilities, learning disabilities, educational backgrounds, people who don’t speak english as a first language. Avoiding the passive voice generally makes information clearer for everyone!
This is a blog post that goes into detail about which typographic symbols are accurately read (if read at all) on the three most popular Screen Readers.

In general, here are a few key guidelines for any text you are writing:

Avoid italics when as much as possible as the slanted lettering can be very difficult for some users to read.
Bolding text can be a helpful way to break up and place emphasis on certain words, this is a much better practice than using colour which not all readers can perceive.
Avoid typing in all caps, this is not only difficult for many readers to read but can come across as aggressive. In addition a screen reader may choose to read capitalized text as an acronym or might not be able to discern that any emphasis should be placed on said text at all.
Text size should be in the 12-14 point range
Text should always be left aligned and never center aligned, which makes reading text with a cognitive or learning disability incredibly difficult.
Whenever possible avoid having text on a pure white background which can strain the eyes
The ideal line length is often quoted to be between 45 and 75 characters

This is a great blog on adapting your text for people with dyslexia.

Guidelines About Alternative Text

Images are a recurring issue with text accessibility! For people with vision loss, or who have images disabled on their device, “alt text” provides a text based description of an image or other element on a web page. Images are a key way we communicate information online, and providing an “alternative text” allows everyone to have access to similar information. Here are a few tools specifically about alt text:

This tool that gives guidelines for alt text. This is a great tool to get started, but it doesn’t address some of the more political or value based elements of writing alternative text for images (for example, how to describe people’s race or gender in an image).
This is a clear and simple description of alt text guidelines.
The W3C alt decision tree is a tool that helps you make decisions on how and when to use alt text.

Accessible Fonts

It’s also important to think about your font choice! When choosing a font it is important to follow certain guidelines to ensure your text is as clear as possible.

Using more than one font can make your document confusing to read for everyone, but even more so for people with reading disorders, learning disabilities or attention deficit disorders.
Choose a sans-serif font, which is a plain font with no ornamentation. This makes the letters easier to distinguish and the overall sentences much easier to read.
Monospace Fonts (fonts where each letter takes up the same width and has the same amount of empty space between them) also make text a lot easier on the eyes.
The more distinguishable individual letters are in a given font, the more accessible that font is. For example, Vernanda makes the lowercase L and uppercase i appear different, while Arial does not.

When choosing a font, it’s not only important to pick a clear easy to read font but also a font that will be interpreted the same way (or as close to the same way as possible) in any browser. Some good cross-browser fonts for accessibility are:

Helvetica
Courier
Arial
Verdana
CMU

Here is a tool that goes through best practices in font accessibility.

Choosing Accessible Colours

One important aspect of accessibility online or in print is colour contrast. Colour contrast refers to the difference in gradient between two side-to-side colours. If there isn’t enough colour contrast, certain users will not be able to tell the difference between colours. In testing our website, for example, we realized our own logo does not meet colour contrast standards! When thinking about colours and accessibility there are 2 important rules of thumb:

Never use colour as the only means of conveying information
Make sure that the contrast between the colour you use and the background it appears against is high enough. WCAG 2.0 actually provides the appropriate ratios for this.

Here are some other tools to help you test colour contrast:

This WebAim Colour Contrast Checker is a great tool to check the colours in your pdf’s, powerpoints, graphs etc. It tests the colours you are using with WCAG 2.0 standards to ensure that any information you are trying to convey is accessible to all users (including users with visual disabilities) and is very intuitive to use!
WhatColour is a tool that works similarly to the WebAim colour contrast checker in that you can select a single pixel and have it’s RGB values displayed. However this one also gives you the colour name, which is valuable to someone who can not identify a colour on their own.
Color Oracle is a free tool that simulates different forms of colour blindness. It transforms your entire screen allowing you to get an idea of what information might be getting lost due to poor colour contrast or due to important information ONLY being conveyed with colour. It can be used with Windows, Linux, or Macintosh.
Here is a cool software that can help colourblind people identify certain colours. It can also execute three types of colour transformation, filtering, and hatching, to help identify and correct images you might have concerns about:
- Red-Green transform -transforms redder colours to brighter, and greener colours to darker
- Blue-Yellow transform – transforms bluer colours to brighter, and yellower colours to darker
- Saturation increase -increases the saturation of all colours,
- Filtering – darkens all colours other than the specified colour,
- Hatching – draws different hatch patterns depending on colour

This software can be downloaded for free for Windows or Mac OS X from this link or this link (Mac).

Making your PDFs Accessible

Don’t forget that a huge part of the information on many websites is the attached PDFs! PDFs are key to website accessibility. This has been a challenge for us, as we have a PDF heavy website. Here are some ways to ensure everyone can access your PDFs.

Tagging Your PDF

Tagging a PDF is very important when making it accessible. A tag provides a representation of the structure and flow of your document. A screen reader uses these tags to navigate and decide what content is read aloud and in what order. If you do not tag your content, there is no way for someone relying on a screen reader to hear it. All elements of a PDF should have a tag similar to a web page.

Headers – Are your headers tagged with the appropriate header tag? H1 being the primary header while others are H2, H3, H4 and so on for less important headers.
Text – tagged with P (paragraph)
Lists – a combination of a L (the entire list), LI (each list item – for example, each bullet point), Label (the bullet in the LI) and LBody (list body in the LI)
Images – tagged with Figure
Tables – both the tables and their header cells. Tagged with Table (the entire table), TR (row), TH (header cells) and TD (column).
Forms – All form fields need to be tagged with Form.
Media – Any multimedia needs to be tagged or marked as an Artifact.
Form fields should have Descriptions for those that use text readers.

Does the document contain multiple pages?

If so, the document will need to be set so it can be read using the “Document Structure”.
If the document has multiple pages, it should have bookmarks that parallel the document structure. This allows those that use assistive technology an easier way to navigate a document.
You can consider creating a Table of Contents to make it easier to use

When they are properly constructed, tags are essential for an accessible PDF. However, on their own tags are not sufficient. Careful tagging must be used in combination with other aspects of document accessibility such as properly defined document language, meta data, font size, font embedding, colour contrast, and bookmarks to achieve a truly accessible PDF.

Other Great Resources About Web Accessibility

WebAim is an amazing ressource, they also have a monthly newsletter with new tools and guides.
This blog, called A List Apart, has a great section on user experience.
This blog has great resources on many different aspects of web accessibility.

If you don’t know about it already, we also put out a guide to event accessibility alongside Accessibilize Montreal. You can find it here.