Description

There are a number of tools we use to conduct an accessibility evaluation of a website. Human input is still essential in judging the number and severity of issues as they relate to a WCAG guideline passing or failing, but these automated tools can still be very effective at quickly detecting accessibility issues within large pages.

Automated checkers

Automated checkers provide a good way for discovering problems that can be programmatically determined, such as:

• Missing “alt” attributes for images
• Missing label tags for inputs
• Missing “scope” attributes for table headings
• Missing document title
• Non-hierarchical order of headings
• Duplicated IDs
• Language of page not set

There are many automated accessibility checkers available, but we will discuss a few here.

1. AChecker: A web based HTML accessibility checking service. To check a website, go to http://achecker.ca, enter a URL (or upload a file or paste in the source code):

AChecker will then return a list of accessibility issues, divided into different categories.

• Known Problems: Some problems, such as issues with the heading structure, are easy to detect automatically. Known problems are issues that definitely create accessibility barriers and must be fixed.
• Likely problems are probable and likely important barriers that AChecker can’t establish for sure without human input.
• Potential problems are issues that cannot be identified automatically, these always require human judgement. AChecker flags these as a way to help you guide your evaluation, many of them may not end up causing accessibility barriers, but you will have to go through the list to make sure.

2. WebAIM WAVE Add-In: An add-in (extension) for Firefox or Chrome. The add-in reports accessibility issues while in the browser, which is good for checking sites that require a login, or sites where you wish to keep the information private. It will list known errors, alerts, features and structural elements found, as well as other useful information in a sidebar. WAVE marks errors with icons in-line, next to the error locations.

The Icon Key lists what the errors mean and gives suggestions for how to fix them.

3. HTML_CodeSniffer: Another browser extension that will report accessibility issues in a small pop-up window. Running the HTML_CodeSniffer will show a list of errors, warnings, and notices in your browser for the website currently being viewed.

Clicking on an error or warning will show additional details and point you to the source of the problem within the page.

Again, any automated checker will only catch a small number of possible accessibility issues on a site, and should only be used to supplement a review.

Manual tools

There also exist a large number of stand-alone accessibility tools that will aid you in conducting an audit.

Manual tools can help human evaluators discover accessibility issues such as:

• Semantically incorrect markup
• Errors in markup
• Low contrast text
• Text that doesn’t resize well
• Areas not accessible to keyboard users
• Keyboard traps
• Poor focus visibility
• Missing skip link

Several of the tools often used include:

1. HeadingsMap: A browser extension for Firefox or Chrome that lists the headings and heading structure of a page, highlighting any empty tags or hierarchical issues. HeadingsMap appears as a side panel in your browser.

2. TPG Colour Contrast Analyzer: A small desktop application that allows you to enter a foreground colour and a background colour and checks the contrast level as it relates to WCAG guidelines. The app can be set to float on top of your browser. The foreground and background colours can be selected using the eyedropper tool or by entering the Hex values manually.

3. W3C Nu HTML Checker: A website where you can enter a URL and receive a report on any mark-up errors such as unclosed tags, duplicated ids, deprecated code, incorrect attributes, etc.

4. Zoom Text: A plugin for Chrome that allows you to increase the text size to 200%. Firefox already allows text-only zoom (enlarging). Zoom text appears next to the address bar, and shows how much the text is enlarged.

5. Firebug/Web Inspector – Most browsers include markup inspection tools that allow you to view the html code for a site. Simply right-click on a section of the page and select ‘Inspect Element’. The inspector panel appears at the bottom of the browser. You can highlight the web content that a piece of code relates to by hovering over it with your mouse.

6. Keyboard navigation test: Using the keyboard to navigate and interact with the site will allow you to discover features or links unavailable to keyboard users or those using alternative inputs. Use TAB to move forward and Shift+TAB to move backwards.

Assistive technology

Testing a website using assistive technology (AT) is an excellent way to discover some of the more hidden accessibility issues, and observe the experience an AT user might encounter when using the website.

Screen reader testing will help discover accessibility issues such as:

• Missing alternative text
• Missing headings
• Improper/missing navigation list markup
• Missing input labels
• Missing ARIA to help explain dynamic content
• Confusing content order
• Areas that are not accessible to keyboard users
• Keyboard traps
• Unannounced pop-up dialogs or error messages

There are two main screen-readers available that are both helpful for testing and free to use:

1. VoiceOver – a screen-reader that comes with the Mac that works with the Safari browser. You can turn it on by hitting Command+F5. You can find a list of keyboard shortcuts that will help you navigate websites with VoiceOver here: http://webaim.org/articles/voiceover/

2. NVDA – a Windows screen-reader that can be downloaded for free and used with the Firefox browser. For a list of helpful keyboard shortcuts, see: http://webaim.org/articles/nvda/

---

Task

1. Choose one automated tool to inspect a page of a website.
2. Use a screen-reader, either VoiceOver or NVDA, to read and interact with a website. Remember to use http://webaim.org/articles/voiceover/ for VO keyboard shortcuts, and http://webaim.org/articles/nvda/ for NVDA shortcuts.
3. Attempt to interact with a website using the keyboard only. Can you navigate to and operate all of its functions?
4. Post your observations here, ensuring that the "Is this for an assignment?" dropdown is set to the name of this lesson.

---

Continue to Lesson 4 - Evaluation Process »