Make Your Content Accessible: WCAG2 Compliance with HTML_CodeSniffer!16 May
Check that your HTML code conforms to your coding standard.
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.
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 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.
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 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+.