Elements of Accessible Form Design
Regardless of how you choose to create your form, in general an accessible
form requires two key elements: 1) clear instructions on how and what to input
into the form and 2) ability to navigate the form using only the keyboard.
Instructions and Labels.
In order to meet the first requirement for an accessible form, every element
in the form (i.e., text boxes, radio buttons, drop-down lists, menus) must
have a LABEL which defines the expected input for the element and provides
an additional instructions necessary to completing the required input. The
LABEL must be defined in such a way as to insure that when the user puts the
focus on the form element, the label information is read along with the element.
This tutorial focuses on how to create HTML labels for each form element; however,
you can also create labels in Adobe Acrobat and other form-generating software.
You should familiarize yourself with the methods for adding labels to your
forms using your particular software. It is not enough to put text next to
a form element; this text is often ignored or misinterpreted by assistive technology.
Keyboard Access.
Depending on the complexity of your form, insuring keyboard access to all
form elements and functions can be an automatic feature or require more extensive
coding. Additionally, some form elements available to designers, such as Jump
Menus, do not support keyboard only access.
Related to keyboard access is the issue of tab-order, or the order in which
the cursor moves through your form using the TAB key to move from form element
to form element. Adobe Acrobat, for instance, assigns a tab-index to each form
element in the order the elements are inserted. Thus, if you insert a text
box for the first name, then a text box for the phone number, and then a text
box for the last name, keyboard users will be asked to input the information
in that order. While this does not prevent the user from using the form, it
can make for a confusing and cumbersome entry process. Thus, we suggest testing
your form's read-order and adding necessary mark-up to redefine this order,
if necessary.
Summary of Elements for Accessible Form Design.
Form Layout and Design.
As you design your form, consider that unless you define a different read-order, screen readers read forms left to right from top to bottom. Make sure that this configuration represents a logical input order for users.
When considering how you are going to layout your form, keep in mind these guidelines:
-
Except for check boxes and radio buttons, labels should be before (to the left of) the form element. For check boxes and radio buttons, labels should be directly after (to the right of or below) the box or button.
-
Avoid putting the label in one table cell and the form element in another. If using tables, put both label and form element in the same cell or be sure to use explicitly associated labels.
-
Group like fields into FIELDSETS to help users relate form fields.
-
Insert form fields in the order you want the screen reader to use them. Even better, use the "tabindex" attribute for each form element to explicitly define the order in which the form is accessed by the keyboard (TAB key).
|
1760
Neil Ave 
