Tuesday Tip: Test your site for accessibility issues with this free tool

By Chloe Mark | March 2017

We know it can be frustrating to hear that your site might not fit accessibility standards or that it could put your company at risk of getting sued. You spent a lot of time and money on your site and you're not eager to completely redesign it. If you'd like to see just how many errors your site has, and better understand where you need to start, there's a Chrome extension for that. I've tried it for our own site and wanted to point it out to you for this week's Tuesday Tip: Test your site with Siteimprove's free tool. 

site-accessibility-checker-tool-review

First, if you don't yet understand web accessibility, take a quick peek at our other content. We cover:

As you review this tool, note that you will still want to get a more thorough assessment done by a professional in order to avoid legal issues. Think of this Chrome plugin as a good place to start to understand where your errors are. 

How Siteimprove's Chrome Extension works:

Once you've installed the plugin in the Chrome store, all you need to do is go to the site you want to test and click on the icon in your toolbar.

From there, a sidebar will appear to point out areas for improvement. 

site-improve-chrome-extension-review

Conformance levels

The tool breaks down its rating based on conformance levels, which follow the Web Content Accessibility Guidelines. Each issue found by the tool is given a level: there is level A, AA and AAA. As you work to improve your site, you'll want to start with level A (the minimum requirements) and then go up from there, depending on if you have the time and budget. 

Severity of issue

Each issue is also labeled by its level of severity. There is "error" or an aspect that the tool knows for certain violates WCAG. Next is "warning" which indicates those that violate best practices. "Warning" means the tool is weary of that trait of your site, but isn't able to check it – with these areas, you'll have to do some manual inspecting.

Responsibility indicator

The tool even specifies which person on your team may be best suited to process the issues. The roles include "editor," "webmaster" and "developer. The "editor" category represents the changes that could be made in the CMS of your site. Those denoted as "webmaster" include corrections for someone who knows how to code and could get into a specific subset of pages. An issue is labeled as "developer" if it requires edits to your templates or CSS.  

Note that you can specify which issues you'd like to see. So if you don't have time to get to AAA conformance or you only want to see the errors you (as an editor for example) can handle, you can filter the assessment to that view.

siteimprove-chrome-plugin-for-web-accessibility-testing

Some notes on what it's like to go through a site

You'll want to start with your homepage and go from there. Each time you enter a new page, click on the chrome icon again to have it assess the page.

The tool does a wonderful job of getting quite specific. So you can click into a correction and get more information on what exactly needs to be fixed.

Here's an example: one of our CTA's is not a high enough color contrast to meet AA standards. As I clicked into the correction, Siteimprove tells me where the CTA they're refer to is (purple box on lower right corner) and exactly what contrast ratio there currently is. It goes so far as to provide resources for how to meet the criteria.

how-web-accessibility-tool-siteimprove-works

specification-on-how-to-meet-accessibility-criteria

What's next after combing through your site for accessibility?

You can hire an agency to complete a redesign, with web accessibility standards established as a priority – ahem, contact ArcStone. There are also companies that specialize in assessing your site's accessibility and then come up with a game plan for where to prioritize your time and budget – such as Accessible360.

Topics: Web Design, Tuesday Tip

Register for our Web Accessibility Event