Testing Links Using WAVE Toolbar

Overview

The WAVE Toolbar is a Firefox extension that evaluates a web page locally (meaning it evaluates dynamically-generated HTML instead of only source HTML) and shows accessible and non-accessible features through the use of icons and indicators embedded on the evaluated web page.

Strengths

  • Toolbar can evaluate any page viewable in a browser (password-protected, dynamically generated, locally served, etc)
  • Icons allow for easy spotting of problem areas on a page
  • Gives immediate visual feedback
  • Shows problems for specific types of link issues (duplicate/extraneous/unusable out of context link text, broken or hidden skip navigation links, empty links)
  • Shows where positive steps have been taken to provide accessible links (skip navigation)
  • Easy to refresh and remove icons from page

Weakness

  • Adds a toolbar to Firefox browser
  • Loads the page with embedded images – can be overwhelming
  • Mouseover is only way to get more information about embedded icons on evaluated page and those sometimes are overlapped by other visual elements on page
  • Lots of icons with lots of meanings – not easy to use
  • No ability to test links only (always part of larger set of accessibility issues being evaluated)
  • Only evaluates on page-by-page basis, no way to know if a problem on one page is the same throughout a web site/application

Step 1: Install WAVE Toolbar (Firefox only)

Procedure

If toolbar is not installed in Firefox browser:

  • Visit WAVE Toolbar website and follow instructions to download and install

Screenshot

Screen shot of Install WAVE Toolbar (Firefox only)

Step 2: Find WAVE Toolbar in Firefox browser

Procedure

  • WAVE Toolbar should show above web page as part of browser menu

Screenshot

Screen shot of Find WAVE Toolbar in Firefox browser

Step 3: Evaluate web page using WAVE Toolbar

Procedure

  • Visit web page in Firefox browser
  • Click the “Errors, Features, and Alerts” button (next to WAVE menu button)
  • Mouseover icons that appear on screen (red icons indicate definite problems and yellow icons indicate possible problems)
  • Use the icons key to find out which icons indicate problems with links (also available as “Icons Key” toolbar button between “Disable Styles” and “Tools” buttons near the end of the toolbar)

Screenshot

Screen shot of Evaluate web page using WAVE Toolbar

Rules Evaluated with this Technique

Rules evaluated with Wave Web Accessibility Toolbar
Test
Type
Description
Manual

Link text content must indeicate the target of the link.

Automatic

Link text should be meaningful when taken out of context; therefore, links that point to different URIs should be unique.

Undefined

An image that is the entire content of a link should be at least 16×16 pixels in size.

Manual

The text content of a link should be at least 4 characters in length when rendered graphically.

Undefined

The alt text for images that are part of links should not be the same as the text content of the link.

Manual

The first link on a page should be a skip navigation link.

Undefined

Internal links need to set tabindex=-1 for compatibilty with Internet Explorer.

Undefined

Small links should not be placed close together.