IT Accessibility Curriculum and Resources

Creating Accessible Forms
Lesson Plan

OBJECTIVE:

The learner will list four potential problems with forms and a remedy for each.

SET:

Ask the learners how forms are "usually" presented on the web, how they see forms as visitors to popular sites. Point out that most forms can be scrolled from top to bottom with one field over the next and the associated label to the left. Ask the learners to think about reasons why this might be so.

TEACHING POINTS:

Definitions

FORM

Document or section of a document containing normal content and controls, which visitors to the web site/web page interact with.

FORM CONTROLS

Items within a form with which users interact.

SUCCESSFUL FORM CONTROL

Meets all of the criteria for submission when the form is completed.

CONTROL NAME

Each control has a name that is unique among the controls on that form

CONTROL VALUE

Form controls also have an initial value (which varies depending on the type of control) and a current value (usually determined by the visitor or by a script).

CONTROL TYPE

The type of control specified by the page author governs how it can be used. Below are listed the normal control types for a form:

• Buttons
• Checkboxes
• Radio Buttons
• Menus
• Text
• File Select
• Hidden
• Object

FORM DATA SET

The successful controls and their current values at the time the form is submitted

Review associated HTML elements:

• form
• input
• button
• select, optgroup, option
• textarea
• label
• fieldset/legend

Potential accessibility problems with forms:

• Handling required fields

  • "The items in red are REQUIRED." - Poses a problem for visually impaired users, colorblind users or those using a non-graphical interface.

• Associating labels with fields

  • Designing a form such that the label is above its related control — Poses a problem for users of screen readers — screen readers parse a page in a linear manner (i.e., will read a row of labels, then will indicate control with no association to the relevant label).

Demonstrate the problem of forms with labels that run across the top of the fields. Example:

Name _________

Address __________

City ________

State __

Zip ____

really "looks like" this to a screen reader:

Name
Address
City
State
Zip
_________
__________
________
__
____

Failure to explicitly associate labels with elements — Poses a problem when labels and controls are separated into different table cells

Radio buttons

• Radio buttons — Can pose a problem for users of screen readers, especially if options are given the same TABINDEX number. Radio buttons are also problematic for individuals without fine motor control.

Good Form Programming Practices:

• Use tabindex attribute for all supporting form controls (a, button, input, object, select, textarea):

  <input type="text" id="FirstName" name="userfirstname" tabindex="4">

• Use explicit labels (see <label> example below) with id attributes of associated controls

• Use accesskey attributes for all supporting form controls (a, button, input, label, legend, textarea) where it makes sense:

  <index type="text" id="FirstName" name="userfirstname" tabindex="4" accesskey="F">

• How to program labels above fields accessibly (within same table cell with labels explicitly associated with form controls):

  <td>
     <label for="FirstName" tabindex="4">First Name:</label><br>
     <input type="text" id="FirstName" name="userfirstname">
</td>

• If possible, use more accessible alternatives for radio buttons such as pull-down menus

• For more complex forms, use fieldset/legend elements to provide richer context for users:

  <fieldset>
<legend>MAILING ADDRESS</legend>
<label for="Street" tabindex="6">Street:<
<input type="text" name="StreetAddress" id="Street" size="30">
</label>
<label for="City" tabindex="7">City:
<input type="text" name="MailCity" id="City" size="25">
</label>
<label for="State" tabindex="8">State
<input type="text" name="StateAbbreviation" id="State" size="2">
</label>
<label for="Zip" tabindex="9">Zip:
<input type="text" name="ZipCode" id="Zip" size="5">
</label>
</fieldset>

• Use a method other than color to designate fields which users are required to complete on your form.

ACTIVE PARTICIPATION:

In a small group with hands-on capability, a lab would be appropriate.

In a larger group, before introducing the potential problems with forms, give the learners one to two minutes to write down what they think might be problems with forms.

CLOSURE:

A matching quiz where a set of solutions are provided, and matched against a set of disabilities, and the learner matches the solution to the population that would most benefit from that solution.

MATERIALS:

• Powerpoint, PC and projector
• Quiz
• Form examples, both good and bad

To access Lesson Plan as a Microsoft® Word document: Accessible_Forms_Lesson_Plan.doc

Back to Section Table of Contents
Back to Curriculum Table of Contents