How to find out if your website has accessibility issues
In a lot of places, including here in Ontario, websites must be accessible by law.
And yet – most of them aren’t.
There are companies that will do an accessibility compliance check, but those services often cost thousands of dollars – and for good reason. A thorough accessibility check is difficult, and requires hours of work by highly skilled and specialized staff.
In most cases, it’s cheaper to design a new website.
Here are some tools that you can use for free to see if your website has accessibility issues that need to be addressed.
Contrast Checker
We love this tool because it’s easy to use and easy to understand.
Web Content Accessibility Guidelines (WCAG) have minimum standards for the amount of contrast between visual elements of a website.
Basically, text is easier to read if the text colour and the background colour contrast more. The same is true for buttons, and anything else really. In the example below, we’ve got two buttons, one with high contrast, one with low contrast.
Obviously it’s easier for everyone to see the high contrast button, and that’s even more true for people with problems seeing.
That’s why we love WebAIM’s Contrast Checker.
Input the foreground and background colours, and the tool tells you the contrast ratio between them, and whether or not it meets the two most common accessibility standards (WCAG AA and WCAG AAA).
Eye Dropper Extension
Sometimes it can be difficult to find out exactly what colours you’re looking at, especially if you don’t know how to find and read a website’s source code.
That’s why this Eye Dropper extension can be super useful. Literally click anywhere on a webpage and find out exactly what colour is being used. This makes using the Contrast Checker incredibly easy.
Download the EXTENSION FOR CHROME & MICROSOFT EDGE
WAVE Web Accessibility Evaluation Tools
Brought to you by the same folks that created the Contrast Checker, WAVE is a suite of tools to help you evaluate your whole website.
The WAVE tool has two versions – a web-based version that allows you to input a website and review the results, and a browser extension which allows you to click the icon at any time to review the site you’re on.
The WAVE tool goes beyond contrast ratios and reviews all kinds of accessibility issues. It checks every image for alternative text, reviews the organization of your site through headings, and more.
It’s a fantastic tool. We recommend the browser extension if you’ve got a lot of pages to review, but both tools have the same functionality. You can check it out here.
Screen readers
Some browsers, like Microsoft Edge and Safari, have screen readers built into them. Using these allows you to understand what the people who rely on screen readers can ‘see’, and what they can’t.
To use Microsoft Edge’s built in screen reader, simply right-click anywhere on a web page and select ‘Read Aloud’ from the drop down.
On Safari you’ll select Edit > Speech > Start Speaking.
If you’re using other web browsers, they may have one built in or they may not – but if they don’t, you can likely install a browser extension to give it the same functionality.
Your Keyboard
An accessible website should be navigable by keyboard – so try it!
Load up your website and hit the tab button.
Do you see where you’ve selected? Good.
If you don’t see your selection, that’s a problem. It should be visibly selected so users know what happens if they hit enter.
Hit tab again. Did the selection move? Did it skip a section?
Some people struggle to use a mouse, so navigating by keyboard is their easiest option. Your site should work just as well for them just as well as it works for someone on a mouse.
Conclusion
That’s five tools we use to test sites and make sure they’re accessible:
- WebAIM’s Contrast Checker
- The Eyedrop browser extension
- WAVE
- Screen Readers
- Our Keyboards
Check them out! And if your site has accessibility issues and needs a redesign, make sure you hire a team that understands your needs!
