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.
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
- 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.
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.
When you select one of the options, the tool will audit your site according to the WCAG 2.1 AA standard.
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.
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.
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.
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.
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.
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.
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.
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.