Use These Accessibility Validators to Make Sure Your Site is Compliant Nov 22, 2016
Web accessibility guidelines are both critical to follow and annoyingly vague. This dichotomy can leave website owners confused and vulnerable to lawsuits. Exactly what it means to be compliant with Web Content Accessibility Guidelines (WCAG) isn’t expected to come out for several years (currently we are looking at clarification in 2018) and there isn’t even a certification process to allow you to prove your site follows the rules.
While you might not be able to tell with absolute certainty whether your site is WCAG 2.0 compliant, you certainly can do your best to make sure you do your best. Here are some helpful sites and plugins that will make it easier for you to determine what changes you need to make to help your website be more accessible:
1. The Paid Option - PowerMapper
Try not to hold your breath while this tool scans your website for compliance issues. I tested it out on my website and was shocked to see my score wouldn’t even earn me a passing grade in school.
The scan gives you an excellent and in-depth peek into just what is wrong with the first 10 pages of your site. Your scan report will give you not just what they found wrong with your site, but also how you can fix it. You’ll even get a contrast check on your text to make sure you're complying with the ratio recommendations.
Honestly, some of the report gets a bit technical, and you’ll need to wade through the report results to find what you have to change. You might want to work with your web developer to ensure you’re correcting things in the right way.
Also, while the first 10 pages are free, that’s it. If you want a more comprehensive report for a bigger site, you’ll need to sign up for the service. There are three plans that range in price from $49 - $299 and you’ll be charged month-to-month.
Bottom Line: The report interface could be a bit more user-friendly. Still if you know what you’re doing and you’re ok with putting a bit of money toward it then this is a great option.
2. The Free Option - WAVE Report
At first, I was a bit intimidated by the report this site generated. I typed in my web address, and suddenly an image of my site’s homepage popped up with colorful text bubbles everywhere. My first thought was, this scan seems like it could benefit from following compliance rules itself. But then I noticed three handy little buttons on the toolbar titled “Styles,” “No Styles,” and “Contrast.” Clicking on those will help you to determine how you want to review the compliance errors on your site.
After I overcame my initial hesitation, I started clicking around and found how helpful this report can be. First, it’s not a screenshot of your website that you are looking at like I first thought. Instead, it’s your real site so you can click around and see various pages without needing to click between the report and your live site. WAVE Report makes it 100% clear what the problems are with your site, as well as exactly where they are located. Since your report is interactive and overlaid on your site, you will know just what content the report it referring to when it notes errors are present.
You’ll also get a handy little summary report which will tell you how many errors the scan found and what category they fall into (errors, alerts, features, structural elements, etc.) as you can see in the image below. The difference between each of these error types is a little vague, but as you follow your site report it will become more clear I promise.
Bottom Line: This free report is chock-full of hidden gems (hidden at the bottom of your screen is a little code button that brings up your site’s code). If you’re willing to do some digging and commit some time to learning the format, this is an extremely helpful and comprehensive report.
3. The Developer’s Dream - AChecker
This site gives you three ways to input content you want to check. Like the others, you can type in your website’s url, but you can also upload an HTML file or paste HTML markup.
Perhaps the most straightforward report, this site generates a list of issues that don’t comply with WCAG guidelines. You’ll get a list of “Known Problems” that looks a bit like this:
You’ll also get a similar report of “Likely Problems” and “Potential Problems” to help you be even more thorough in your review.
This site takes things to a whole new level by not just telling you what’s wrong, but also giving you background on why. If you click on the check details, you’ll get a popup that explains which guidelines your site isn’t complying with and why. It also gives you examples of code that will pass the check and code that will fail.
Bottom Line: If you’re looking for a no-frills yet comprehensive report, then look no further! It’s pretty clear that this option would be helpful for web developers and programmers that want a direct route to making a site compliant.
Looking for more tools? W3C has a whole list of accessibility checkers you can use. They don’t endorse any of them, but the list is pretty comprehensive and offers you checkers you might not have thought of like email accessibility evaluators.
Which validators do you find the easiest to use? Is there anything about them that you would change? Tell us which compliance validators work for you in the comments below!