Testing form control accessibility with Firefox Accessibility Extension

Overview

Strengths

  • Test form controls of the current web page
  • Provides error information on individual form controls
  • Calculates labels for each form control
  • Highlights the selected form control in the dialog boxon the web page

Step 1: Navigate to the web page

Procedure

  1. Select the “Navigation” option from the toolbar or the “Accessibility” menu option
  2. Select the “Form” option from the Navigation Menu

Screenshot

Screen shot of Navigate to the web page

Step 2: Form Dialog Box

Procedure

  1. View information about each form control from the “Form” dialog box

Screenshot

Screen shot of Form Dialog Box

Step 3: Manual Checks

Procedure

  1. Review manual check requirements and test with firefox
    • Use the TAB key to move between form controls and test if visually styling of the form with focus changes?
    • As you TAB through the form cotnrols does the order make sense for filling out the form?
    • Use the FF zoom functions to make sure the form controls change size?
    • Check form for proper use of “Invalid” and “Required”?

Screenshot

Screen shot of Manual Checks

Rules Evaluated with this Technique

Rules evaluated with Firefox Accessibility Extension
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.

Automatic

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

Automatic

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

Automatic

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

Automatic

Each effective label within a page should be unique.

Manual

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

Manual

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

Manual

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.

Manual

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.