Jan 27 2013

Tear Down This Wall: HTML_CodeSniffer Checks Websites For Accessibility

Advertisement

Accessibility is a major societal task that is constantly gaining in importance. Websites are no exception here. Even more so, online services for some people are their sole possibility of taking part in social life. Thus accessibility is a vital precondition to allow handicapped people to claim their share of the information age. HTML_CodeSniffer is a tool to check any given website for compliance to given standards. The tool generally works as a bookmarklet and can be invoked while surfing around any given website easily.


HTML_CodeSniffer

Accessibilty-Guidelines: WCAG and Section 508

The „Web Content Accessibility Guidelines“ (WCAG) by the „Web Accessibility Initiative“ (WAI) in W3C contain recommendations for the creation of accessible web content. They’ve been put into effect as early as 2008 and currently carry the version number 2.0. The guidelines differentiate three stages of conformance (A, AA and AAA), where A represents the lowest and AAA the highest grade of conformance. Websites conforming to AAA comply to all relevant guidelines, thus incorporating the highest grade of accessibility.

An example: If you offer “time-based media”, that means audio or video on your website, obviously people who cannot hear will have problems consuming them. If you want to conform to level A, the addition of captions to the content is sufficient. Conformance to level AA requires the addition of audio descriptions and conformance to level AAA even requires the addition of translations into sign language.

HTML_CodeSniffer checks an HTML document against these guidelines. You can explicitly choose a level of conformance to have any given website being checked against. Results include errors, warnings and hints. A detailed report informs you error by error and warning by warning what and why is not WCAG compliant.

After having invoked the HTML_CodeSniffer on several websites you will soon find out that there are not a lot of compliant services out there. Even conformance to level A is few and far between. If you want maximum compliance for your project lots of work is before you, even minimum conformance will set you on the go for quite some time.

Besides checking for W3C guidelines HTML_CodeSniffer is able to examine contents through the eyes of  Section 508. Section 508 is a reference to the relevant section of the U.S. federal Rehabilitation Act of 1973, and requires that electronic and information technology procured by federal government agencies (with some exceptions) be accessible at “comparable” levels to government employees and members of the public with a disability. Rules and regulations therein are mandatory for federal authorities in the United States.

HTML_CodeSniffer: Bookmarklet or Direct Input

The easiest way of using HTML_CodeSniffer is the use of the bookmarklet. Checking a website is only one click away. Alternatively HTML source code can be pasted into a web form and checked directly.


HTML_CodeSniffer checks Wikipedia

Using direct input does not limit you. In the same way the bookmarklet does, results are shown for errors, warnings and hints. A detailed report is also available. As the use of the bookmarklet is much easier, more comfortable and more complete, you will most likely only use the direct method during development. Is this HTML section compliant? Check, before you use it.

Conclusion: HTML_CodeSniffer is a useful tool. It does exhaustive checks on web documents and evaluates the state of accessibility thoroughly. It does show how much work it is to establish an accessible website, too. This might be useful to convince customers who are usually not willing to pay for work that they seemingly cannot even see. I would not raise my hopes up high in this regard, though…

(dpe)

About the Author

Denis works as a freelance web designer since 2005.

Homepage

Comments and Discussions
  • Tim, 04 February 2013

    Great Tool thanks.

    People forget the importance of this, it not only impacts the user but also your search engine efforts. It’s good to have tools like this in your pocket.

search form
 
image description image description