Form Labels and Tab Order

User input forms allow visitors to interact with Web documents by entering personal information or comments. Such forms are not inherently inaccessible to people using adaptive computer equipment, but there are a few extra steps that should be taken to make them easier to use.

WAI Guideline 12 instructs Web designers to "associate labels explicitly with their controls," which in this context means to clearly show the relationship between form elements and their labels. When input forms appear on a page, they usually include brief text labels that tell visitors what type of information is expected. For instance, a text box might have the phrase "First Name" beside it, indicating that the user's first name should be entered. While that may seem obvious enough, some forms are very complex and may be laid out on the screen in such a way that the relationship between input fields and their text labels becomes unclear. This is especially difficult for visitors who are unable to see the computer screen, since they cannot perceive the visual clues that link form elements and their labels. For these reasons, it is necessary to make the relationship clear through some additional HTML code.

Forms on Web documents are created using a somewhat complex combination of HTML code, beginning with the "form" tag itself. The opening form tag indicates the beginning of the form, and the closing tag shows the end.

  <form>

  </form>

Within the form are placed various input fields into which users can enter information. Perhaps the most common type of form field is the text box, which is created with the "input" tag and "type" attribute. The input tag should also include a "name" attribute which will help identify the visitor's response. The HTML excerpt below shows how a single text box can be created. Beneath that is the unlabeled text box itself.

  <form>
    <input type = "text" name = "Fieldname">
  </form>

Typically, a series of text boxes and labels appears within a form. The labels may be placed above or beside the input fields, and users are expected to visually perceive their relationship. The HTML excerpt below shows a simple form with three labeled text boxes. Beneath that is the form itself.

  <form>
    First Name: 
    <input type = "text" name = "Fname"><br>
    Last Name: 
    <input type = "text" name = "Lname"><br>
    Address: 
    <input type = "text" name = "Address">
  </form>

First Name:
Last Name:
  Address:  

To implement Guideline 12, the input tags should also include an "id" attribute to uniquely identify each element within a form. The Web designer can arbitrarily assign a keyword to this attribute. Next, the text labels should be contained by "label" tags that explicitly associate them with their corresponding fields by means of the "for" attribute and the appropriate keyword. The HTML excerpt below includes this additional code, though the form itself appears exactly the same.

  <form>
    <label for = "field1">First Name: </label>
    <input type = "text" name = "Fname" id = "field1"><br>
    <label for = "field2">Last Name: </label>
    <input type = "text" name = "Lname" id = "field2"><br>
    <label for = "field3">Address: </label>
    <input type = "text" name = "Address" id = "field3"><br>
  </form>

First Name:
Last Name:
  Address:  

WAI Guideline 9 address the topic of keyboard access to forms, since many visitors browse the Web with some type of keyboard device instead of a mouse. It instructs Web designers to "create a logical tab order through links, form controls, and objects." When using a keyboard to access a form, the Tab key allows visitors to pass from one input field to another. On a simple form, this usually means they start at the top form element and tab through to the bottom. However, for a complex form -- especially one that occupies different areas of a page -- the tab order may not be so straightforward. Users pressing the Tab key may find the browser's focus moving around the form in unexpected ways.

To implement the logical tab order suggested by Guideline 9, an additional attribute can be included inside the input tag. The "tabindex" value lets a Web designer explicitly indicate the sequence in which users will pass through the form when pressing the Tab key. The HTML excerpt below shows the addition of the tabindex value, though the form itself appears the same.

  <form>
    <label for = "field1">First Name: </label>
    <input type = "text" name = "Fname" id = "field1" tabindex = "1"><br>
    <label for = "field2">Last Name: </label>
    <input type = "text" name = "Lname" id = "field2" tabindex = "2"><br>
    <label for = "field3">Address: </label>
    <input type = "text" name = "Address" id = "field3" tabindex = "3"><br>
  </form>

First Name:
Last Name:
  Address:  

Access Art implements both form labeling and tab order techniques wherever forms appear on the site. The simplified HTML excerpt below shows how the user comment form was created. Beneath that is the form itself.

  <form>
    <label for = "Message">Please enter your comment or question below.</label>
    <p>
    <textarea name = "Message" id = "Message" tabindex = "1"></textarea>
    <p>
    If you would like a reply, please include your name and e-mail address.
    <p>
    <label for = "Name">Name:</label><br>
    <input type = "text" name = "Name" id = "Name" tabindex = "2"><br>
    <label for = "Email">E-mail address:</label><br>
    <input type = "text" name = "Email" id = "Email" tabindex = "3">
  </form>

Please enter your comment or question below.

If you would like a reply, please include your name and e-mail address.

Name:

E-mail address:

Though it was not necessary on this site, the WAI Guidelines also suggest grouping form controls to make forms easier to use.