Check accessibility with HTML_CodeSniffer from Squiz

University homepage showing results of HTML Code Sniffer.

University homepage showing results of HTML Code Sniffer.

Last month we had a visit from web content management system company Squiz. The primary reason for their visit was to demo their CMS Matrix but one of the really cool and practical things they left us with was simply making us aware of HTML_CodeSniffer.

Written entirely in JavaScript HTML_CodeSniffer checks the source code of a web page and shows you where your code doesn’t meet a particular accessibility standard: it supports

(These pages give a very clear summary of the different standards.)

Install and use

It’s rather simple to install, simply visit the HTML_CodeSniffer website, then drag the bookmarklet to your bookmarks bar. (A bookmarklet is essentially a bookmark that contains JavaScript code rather than a web address.)

To use HTML_CodeSniffer visit the web page you want to test (it can be a local page as well as a standard, hosted page, which is useful) and click on your new bookmarklet.

Results

By default it appears to evaluate your site against the WCAG 2.0 AA standard:

CodeSniffer results

but you can easily change that using the drop-down in the top right corner:

CodeSniffer accessibility standard settings

What is particularly useful are the reports that HTML_CodeSniffer offers for any errors, warnings and notices that it discovers. Select which areas you want to see results for, using the blue toggle switches, then click View Report.

You are then presented with a paginated list of results:

CodeSniffer results

Clicking on a result gives you more specific details about the issue, including a code snippet, as well as—most helpfully—an animated, bouncing marker showing you where on the page the error or warning is referring:

Detailed results from CodeSniffer

The yellow marker beneath the search box (on the left) is showing what the warning is referring to.

I can certainly see HTML_CodeSniffer being a particularly useful tool while developing sites.

Find it on GitHub: HTML_CodeSniffer.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s