Making sure your website is accessible for all people is a great goal, and it’s one everyone should shoot for.
But when you’re starting out, it can be a bit difficult to figure out if you and what accessibility errors you have on your website. That’s where testing comes into play.
The easiest tests you can do are automated tests. These aren’t the end all, be all for accessibility tests — they won’t catch every little thing and manual testing still needs to be a part of your plan — but it’s a great place to start.
So, here are three tools that can help you get started testing and fixing your website’s accessibility.
WebAIM Color Contrast Checker
One of the biggest things you can do to help out your website’s accessibility is to make sure that all of your colors have the right contrast. But figuring out what contrast works and what doesn’t can be a challenge.
The WCAG 2.0 AA guidelines, a pretty good goal to aim for, require a ratio of 4.5:1 for normal sized text (about 18px and below) and 3:1 for larger text (above 18px for bold text and above 24px for normal text). Except, how do you know how to hit those ratio marks?
The answer is that there’s a whole math formula to figure it out. But fortunately for you, the WebAIM Color Contrast Checker takes care of that for you. You can plug in the HEX color value for two colors and see if they have the right contrast. It’s that simple.
It’s free to use and pretty self explanatory. You really have no reason for your colors to not have the right contrast.
axe
One of the best tools for accessibility testing in the browser is axe by Deque. In addition to catching accessibility issues, it also shows you how to fix the problem right there and how it affects users.
But the best part that I’ve found with axe is the browser extensions they have for the major browsers. That makes it super easy to scan pages, find problems and then fix them.
Plus, Deque is a leader in accessibility on the web and with apps. Outside of the extension, they have a ton of resources that can help you make sure your website is accessible for all people.
It’s definitely worth checking out and using it to make sure your website is as accessible as possible.
HTML_CodeSniffer
Finally, a tool I love to use to quickly check accessibility on websites I’m creating is the HTML_CodeSniffer. It’s quick, easy to use and can point you in the right direction for fixing some of the biggest accessibility issues.
You can install it right from its website, and once you have it up, all you have to do is select it from your bookmarks bar to check the website you’re currently on. You can also filter results based off of the different guideline criteria, such as Section 508, WCAG 2.1 AA, etc.
Will it catch every accessibility issue out there? No. No automated accessibility tool is going to catch every single issue out there. That’s why it’s good to test your website manually as well.
But it catches a lot of things, and it catches the biggest issues. And considering I can check a page with just a couple of clicks, plus it’s free, makes it a must-have.
So if your goal is to make your website as accessible as it can be (which it should), these are the tools that will get you started to make that a reality. Like I said before, automated tests aren’t going to catch every little issue. So make sure to manually test out the website as well.
But these tools will give you the start you need to accomplish that goal.
