Accessibility Testing Tools

Testing your website’s accessibility requires more than a checklist of best practices and standards. If you want to bring your site into line with the guidelines for web accessibility then you will need accessibility testing tools which can audit your website’s design, content, and code.

In this article, we are going to introduce you to the best accessibility testing tools for each of these important areas of your site. We’ll also give you a quick glance at how they work so you can jump in and test your website’s accessibility in a few minutes.

1. Funkify – simulates browsing with a disability

Before you take any steps to improve your site’s accessibility, we encourage you to have a look at your site through different disability lenses. Funkify is a Chrome extension which allows you to view your website through multiple disability simulations. If you are committed to providing an inclusive experience, then this tool will help you appreciate the challenges your users face.

With the extension, you will be able to experience your site as a user with:

  • A number of vision impairments
  • Trembling
  • Dyslexia
  • Hyperactivity
  • Keyboard only control

Funkify is a great tool for starting the process of making an accessible website; once you’ve walked a mile in your users’ shoes, you get a good sense of where you can make the most improvements. Simulating dyslexia is one of the disabilities simulated by Funkify

2. tota11y – a good all-in-one accessibility testing tool

If you are interested in a broad tool which covers all areas of accessibility, then tota11y is one of the best accessibility testing tools that you’ll find. It is a lightweight tool that you can install as a bookmarklet in your browser.

For a lightweight tool, tota11y packs a big punch. It will help you improve accessibility in your site design, content, and structure. You will have options for headings, color contrast, link text, labels, alt-text, and landmarks.The meny for evaluating accessibility with the tota11y testing tool

When you select one of the options, the tool will audit your site according to the WCAG 2.1 AA standard. tota11y results for link texts and how to improcve them for screen readers

This is one of tota11y’s great benefits. It shows the total number of errors which are also marked on the page for your convenience. tota11y also shows you the offending code and an explanation of the problem.

Finally, the tool will give you suggestions on how you can fix it.

tota11y is a motivating accessibility testing tool because it removes the guesswork and assumptions; you see what is wrong, where it’s wrong, and how to fix it.

3. Color Safe – discover accessible color palettes

Keeping a good color contrast ratio should be high on your list of fixes because an estimated 1.3 billion people live with vision impairments. Fortunately, a number of great accessibility testing tools address this issue.

If you have already built your site and you want to tweak it, then you might be better off using the contrast setting in tota11y. However, if you are ready to develop an entire color palette for your site, then you need something more dynamic. This is where Color Safe steps in.

Color Safe will help you find an accessible color palette based on WCAG standards. It will even allow you to play with a variety of font options like family, size, and weight. Color Safe could be a great time saver if you consult it early and design for accessibility from the outset. The Color Safe set up allows you to set you background, sample text, and various font options.

Once you set up your options, you can generate a color palette with a good range of colors based on the targeted ratio. You will be able to filter the colors according to a preferred color, and you get the HEX or RGB details.

The huge generated palette from Color Safe makes it the best accessibility testing tool for color and contrast

4. NoCoffee – tests if you rely too much on color

With the correct contrast, it is much easier to follow one of the most important tenants of accessibility design to ensure meaning and information is not handled by color alone. If color alone is what provides meaning or action to your visitors, then your site is no longer accessible.

The best accessibility testing method is to view your site in grayscale to get a sense of how you use color on your site. The NoCoffee vision simulator is a lightweight extension for Chrome which can help you gradually remove all color from your site.

Our site in gray scale when using an accessibility testing tool for vision problems

Once you start removing color from your site, you can see how important color is to the functionality of your site. The Themeisle homepage seems to meet the accessibility test for color with the “action areas” clearly distinguished by more than color.

5. Yoast – helps you create more readable content

When you are making your content accessible, you should aim for a well-structured text that a 12-year-old can read. You can test all of your content with one plugin: your WordPress site’s best friend, Yoast.

The key metric for readable text is the Flesch Reading Ease test. This will help you minimize the jargon and maintain shorter sentences. The magic number is 70 and following Yoast’s advice in all categories will help you bring the number up.

Accessibility testing tools like Yoast's readability analysis help improve your site

Accessible content will also be easy to navigate with descriptive subheadings. Breaking your text up into appropriately titled sections helps readers find their content and will also bring SEO value. Yoast will help you make well-titled sub-headings with sections less than 300 words. If you combine subheadings and short paragraphs, then your text is immediately more inclusive.

If you don’t want to use Yoast, the Hemingway App can also help you perform some of these tests without the need to install a plugin.

6. HeadingsMap – tests and visualizes your heading hierarchy

Headings are not only crucial for readability, and SEO, but they also play an important role for accessibility because they provide the structure that allows screen readers to understand the meaning of the content better. You can use HeadingsMap for Chrome or Firefox to confirm you are only using one H1 per page while also following the correct hierarchy.

Using HeadingMaps to test the heading structure of a blog post

On the left, you get an excellent overview of the heading hierarchy. The first benefit is an easy way to see if you skipped any levels. The second benefit is that you can skip to sections and confirm that the heading matches the content.

7. NVDA and VoiceOver – test how your site functions on screen readers

It’s fairly easy to add alt-text to your images, but if you miss any then your accessibility takes a hit. The easiest way to ensure screen readers can helpfully identify images is to use one. For the price of a small donation, you can use the screen reader NVDA for Windows. If you’re using a Mac, then VoiceOver is a great pre-installed tool.

Using screen readers as accessibility testing tools is a great way to understand how someone with an acute vision impairment experiences your website.

It’s also going to encourage you to write more descriptive link text. There’s only so many time you can hear ‘Click Here’ before you’ll commit to improving link context evermore.

8. Axe – accessibility testing for codebase analysis

Whether you’re a developer or a user, you will find Axe the king of accessibility testing tools for codebase analysis. You can add the extension to either Firefox or Chrome and access it via the browser’s developer tools menu. Axe will analyze the page and provide a list of accessibility issues and the rate at which they occur.

Axe highlights code problems and suggests improvements

When Axe finds an issue in the code, it gives you a description of the issue. You can also click on the link to get more information. The guilty code snippet is provided and guidelines for fixing the issue are also provided. The severity indicator gives you a good idea of the issues to prioritize for future reference.

Start using these accessibility testing tools today

Using these accessibility testing tools is a good first step in improving your site’s accessibility. With these tools, you can build an inclusive website from the outset.

If you need some help implementing these changes on your site, check out our guide to improve the accessibility of your WordPress site.

Do you have any questions about how to apply these tools to make your website more accessible? Ask away in the comments!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!