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.
(These pages give a very clear summary of the different standards.)
Install and use
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.
By default it appears to evaluate your site against the WCAG 2.0 AA standard:
but you can easily change that using the drop-down in the top right corner:
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:
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:
I can certainly see HTML_CodeSniffer being a particularly useful tool while developing sites.
Find it on GitHub: HTML_CodeSniffer.