Squiz Labs Blog - The latest news from the R&D division of Squiz®

Subscribe to our RSS feeds

Make Your Content Accessible: WCAG2 Compliance with HTML_CodeSniffer!

Check that your HTML code conforms to your coding standard.

HTML_CodeSniffer is a new tool from Squiz that checks your HTML against a specified coding standard, detecting any violations. The tool, written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own sniffs. In doing this, developers can check that their HTML code has been formatted correctly, for example, that all tags have been closed and comments are properly positioned.

HTML_CodeSniffer comes with a set of 3 initial standards that enforce the W3C's Web Content Accessibility Guidelines (WCAG) 2.0 (Level A, AA and AAA). These guidelines detail how web content can be made accessible to people with disabilities and establish the various levels of web accessibility.

Learn more about the W3C's Web Accessibility Intuitive (WAI).

Available now as a bookmarklet, HTML_CodeSniffer can be easily run on any web page without the need of installing anything on your local machine or including any scripts on your site. Simply launching the bookmarklet will display HTML_CodeSniffer's floating Auditor interface, which will automatically evaluate the content of the currently viewed web page.

The HTML_CodeSniffer tool on a site 

The Auditor will detail the issues generated for the page, categorised as either errors, warnings or notices. These three levels of issues can be used by developers to indicate the severity of discovered issues. When dealing with the inbuilt WCAG accessibility standards, these categories represent the following significance: 

  • Errors: these issues must be addressed to meet the accessibility standards.
  • Warnings: these issues should be addressed to meet the accessibility standards (best practice).
  • Notices: these issues require manual checking and may need to be addressed to meet the accessibility standards.

Modifying the Standards against which HTML_CodeSniffer is checking will prompt the tool to reevaluate the page against the new standard.

Once a page has been evaluated, HTML_CodeSniffer will generate an in-depth report outlining the issues discovered (from the selected categories), providing steps to aid in their resolution.

HTML_CodeSniffer listing generated issues

Clicking on an individual issue will display information specific for that issue. For the in-built WCAG standards, this includes a Principle and Technique, linking to the specific item the issue addresses in the WCAG 2.0 standard.

A Point to Element option is also available for each issue, displaying an icon that indicates the relevant element within the content of the page. Please note that in some cases this option will not be enabled as the relevant element may be hidden on the page.

A snippet of the infracting code is also provided to assist editors with the resolution of the reported issue.

HTML_CodeSniffer displaying information on a specific issue 

HTML_CodeSniffer is available now and can be acquired on the GitHub HTML_CodeSniffer page. Simply drag the provided link to your browser's bookmarks bar for installation. HTML_CodeSniffer has been designed to work with Google Chrome, Firefox 10+, Safari 5+ and Internet Explorer 8+.

Squiz Labs

R & D division of Squiz Pty Ltd

Open source web experience management solutions

Squiz Labs is the research and development division of Squiz, the company behind the Squiz Suite of web experience management and development tools.

Our PHP and JavaScript developers are responsible for producing innovative enterprise-quality software while our interface designers and testing team ensure our products both look great and are easy to use.