Using WAVE Toolbar for Testing Accessibility of Form Controls

Overview

Strengths

  • Visualization of which form controls have accessible and inaccessible labels
  • Uses icons to indicate the accessibility of labeling for controls

Weakness

  • Does not automatically test for uniqueness of labels
  • Form labeling report is mixed with other accessibility information

Step 1: Select "Errors, Features, and Alerts" toolbar button

Procedure

  1. Navigate to the form using Firefox with the WAVE extension installed
  2. Select the “Errors, Features, and Alerts” toolbar button from the WAVE toolbar
  3. View the icons associated with each form controls to determine accessibility

Screenshot

Screen shot of Select "Errors, Features, and Alerts" toolbar button

Rules Evaluated with this Technique

Rules evaluated with Wave Web Accessibility Toolbar
Test
Type
Description
Manual

The effective Label for a form control must uniquely identify the purpose of a form control on a web page.

Automatic

The elements input[type=“text | password | checkbox | radio | file”], select and textarea must have labels.

Automatic

The element input[type=“image”] must have alt text:

Automatic

The elements input[type=“button”] must have and input[type=[submit | reset”] may have value text.

Manual

Each label, button and legend element must contain text content.

none

The text content of each label and legend element should not only come from the alt attribute of img elements.

Undefined

If a form control has an id attribute its value must be unique on the page.

Manual

Each effective label within a page should be unique.

Manual

Text content that cannot receive the focus should not be placed between form controls.

Undefined

Use CSS to allow form control text size to change with the zoom setting of the browser.

Undefined

Style the form control with focus differently than form controls without focus.

Manual

Required form controls should have the word “required” as part of the effective label.

Manual

Invalid form controls should have the word “invalid” as part of the effective label.

Undefined

Browser or client side (i.e. using javascript) validation of a form control values

Undefined

Ensure that form fields are in a logical tabbing order.