Using WAVE to Test Accessibility of Form Controls

Overview

Strengths

  • Icons and labels are used to indicate the accessibility of labeling
  • Icons are next to each form control making it easy to identify which controls are accessible or inaccessible

Weakness

  • Can only test publically available web forms, forms that are only available after someone has logged in cannot be tested
  • Does not test forms with dynamically generated content through javascript (client side scripting)

Step 1: Go the WAVE home page

Procedure

  • Go to the WAVE home page
  • Enter in the URL of the page to test
  • Select the button “WAVE this page!”

Screenshot

Screen shot of Go the WAVE home page

Step 2: View the icons and labels for a web page with improper references to the id attributes of form controls

Procedure

  • View the icon next to each form control to identify accessible and inaccessible web pages
  • The screen shot in this step shows the form has label markup but the for attribute references to the form controls are undefined

Screenshot

Screen shot of View the icons and labels for a web page with improper references to the id attributes of form controls

Step 3: View the icons for web page with no labels

Procedure

  • View the icon next to each form control to identify accessible and inaccessible web pages
  • The screen shot in this step shows red colored icons that indicate there is no label markup

Screenshot

Screen shot of View the icons for  web page with no labels

Step 4: View icons when labels are poperly defined

Procedure

  • View the icon next to each form control to identify accessible and inaccessible web pages
  • The screen shot in this step shows green colored icons that indicate there is proper label markup

Screenshot

Screen shot of View icons when labels are poperly defined

Rules Evaluated with this Technique

Rules evaluated with WAVE Web Accessibility Evaluation Tool
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.

Manual

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

Manual

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.

Undefined

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.