9.9. Tools to Help Check Accessibility

The next set of tools is used to ensure that web applications conform to accessibility standards.

9.9.1. W3C HTML Validation Service

The very first line in HTML files should be the document type (doctype) the doctype is an instruction interpreted by web browsers to know what version of markup the page was written in. This allows the browser to render the page accordingly. HTML validators ensure that your markup complies to the standard declared by the document type at the top of your HTML page.

Figure 9-34. Fangs rendering a web page

The W3C HTML Validation Service (http://validator.w3.org/) is a free tool presented as a web page, where a URL can be entered and the W3C HTML Validation Service will report any issues where the HTML is noncompliant to the document type specified. The example in Figure 9-35 shows errors that were found on http://www.mcwherter.net/blog using the W3C Markup Validation Service.

Figure 9-35. W3C HTML Validation Service

9.9.2. W3C CSS Validation Service

Very similar to the W3C HTML Validation Service, the CSS Validation (http://jigsaw.w3.org/css-validator/) will parse the CSS contained on a page and report any errors found. The example in Figure 9-36 shows two errors on http://www.mcwherter.net/blog using the W3C CSS Validation Service.

Figure 9-36. W3C CSS Validation Service

9.9.3. WebAIM WAVE

WAVE (http://wave.webaim.org/) is a free service developed by the WebAIM organization. The WAVE service is provided through a website that checks a single web page for accessibility issues. Instead of focusing on standards it focuses on accessibility and reports issues with accessibility.

After the WAVE service has parsed a particular web page for accessibility issues, as in Figure 9-37, an image of the web page will be presented containing icons that help the user find the elements of the page that are not accessible.

Green icons indicate that an accessibility feature has been implemented but still may require review, such as the first icon, the alt tag. When this icon is rendered, you should still check the alternative text to ensure that it is accurate and conveys the correct message:

Red icons rendered by WAVE indicate accessibility errors that need attention before the site is considered accessible:

Blue Icons indicate semantic, structural or navigational elements. These elements may help with accessibility but should be checked for proper usage. For example if the blue "th" icon is rendered, you should ensure that the element is truly a header. If the element is not a true header, than that tag should be replaced with a "tr" tag:

Yellow icons are considered alters. These elements may cause accessibility issues, but normally draw attention to areas where accessibility can be made better. For example if the alt icon with the question mark is rendered, it means that suspicious text is entered in the alt tag. The text could be empty, the text could begin with "Image of" or a few other options the WAVE application is aware of:

Another point to mention is that all trapezoid-shaped icons relate to images. A complete reference to all of the WAVE icons can be found at http://wave.webaim.org/icons

Figure 9-37. WAVE service run on a web page

Even though the WAVE tool reports the page in Figure 9-37 as accessible, I can see a few issues. The Pittsburgh code camp logo is missing alternative text along with the other elements with yellow icons.

9.9.3.1. Cynthia Says

Cynthia Says (http://www.contentquality.com/) is an online service that validates that a web page complies with accessibility standards. Cynthia Says is different from the other tools mentioned, because it allows you to select the accessibility standard you are testing for, as shown in Figure 9-38, and a text-based report will be generated after the test, listing the accessibility checkpoints indicating if the page passed or failed.

Figure 9-38. Cynthia Says configuration page

After the Cynthia Says tool is run, a detailed check list, listing each accessibility element for the selected compliance level, is listed indicating if the element has passed or failed, as in Figure 9-39.

Figure 9-39. Cynthia Says report

9.9.3.2. InFocus

The InFocus tool (https://www.ssbbartgroup.com/amp/infocus.php) navigates through an entire web application and reports accessibility issues via a text-based report. A version of InFocus, as shown in Figure 9-40, can be downloaded and used for free, but only contains a subset of the features the commercial product has.

Figure 9-40. InFocus testing a website