Using AIS Web Accessibility Toolbar to Check Form Control Labeling

Overview

Strengths

  • Shows inline icons on form control markup associated with form controls
  • If labels are defined provides the calculated label as one of the inline icons

Weakness

  • Does not provide clear feedback on an error when labeling is missing

Step 1: Select Fieldset/labels menu item from the Structure menu in the toolbar

Procedure

  • Navigate to the web page with the web form
  • Open the “Structure” menu in toolbar
  • Select the “Fieldset/Legend” option from the pull down menu

Screenshot

Screen shot of Select Fieldset/labels menu item from the Structure menu in the toolbar

Step 2: Icon information for form controls with proper labeling

Procedure

  • Icons will appear next to each form control to indicate labeling information
  • In this screen shot for controls are correctly labeled using the label element using the for attribute to associate the label with the form control
  • The icons indicate the use of label markup with the for attribute value
  • The text of the label markup is also displayed as inline text

Screenshot

Screen shot of Icon information for form controls with proper labeling

Step 3: Icon information for form controls without proper labeling

Procedure

  • Icons will appear next to each form control to indicate labeling information
  • In this screen shot for controls are correctly labeled using the label element using the for attribute to associate the label with the form control
  • The icons are empty that there label markup with the for attribute value
  • The text of the label markup is also displayed as inline text

Screenshot

Screen shot of Icon information for form controls without proper labeling

Rules Evaluated with this Technique

Rules evaluated with AIS 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.

Manual

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

Manual

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

Manual

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.

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

Manual

Ensure that form fields are in a logical tabbing order.