General comments

The label tag is applied around each "text label" you see on the form. Then whatever text you use for the label tag you repeat as an id attribute inside the field name. The work involved is less if you have used text fields or list fields, as you will see in the examples.

It is little hard for some people to relate to label tags, since this is NOT a trait or option seen in the Property inspector window, nor is it something you can SEE when you look at the form. These label tags are used strictly by devices that are translating/reading the form for a blind person. The label tag brackets what TEXT to say aloud as the blind user comes to a particular field, and the screen reader is programmed to find this LABEL tag and its associated ID in a field.

It does not matter if you go through your form and put all of the label tags in first, and then go back to add the id attribute, or put both of these in as you work down the form. If you have the list of field names and the label attribute you will be using, you can check them off as you finish each field.

Turn on the display of the HTML code

You cannot create the LABEL tag nor its associated ID attribute by working in the design mode of Dreamweaver. Nor are these found in the Property inspector window for the field. You need to turn on the display of the HTML coding. Click on the center icon to show the code and the design view. The screen is split, with the top half being the HTML code and the bottom part being what you see on the form/page.

As you add the required coding for each field, in the HTML mode, click in front of the text label for that field.

Fixing single line text fields

You need to put <label for="xxxxxxx"> in front of the TEXT on the screen that you and your users can see explaining the field, and then </label> at the end of the labeling on the screen. You can use either upper case or lower case for the label attribute, but I suggest you use lower case lettering. The particular text you use for the label tag needs to be different from the field name, as you can see in the example below.

An example is below.

I commonly use an understore to separate parts of the LABEL tag name. If the field name is NAME, I might use a label tag of "complete_name". That way I know exactly what field it goes with.

After you have typed in the LABEL FOR information, you need to add inside the field tag itself the same piece of information associated with id="xxxxxxx". It does not matter where in the field tag this ID code is placed.

Each single line text field has only one LABEL associated with the field.

Fixing multiple line text fields

Multiple line text fields are coded in a similar manner as single line text fields, in terms of accessibility. You put <label for="xxxxxxx"> in front of the TEXT on the screen that you and your users can see explaining the field, and then </label> at the end of the labeling on the screen. An example is below:

The particular text you use for the label tag needs to be different from the field name, as you can see in the example.

After you have typed in the LABEL FOR information, you need to add inside the field tag itself the same piece of information associated with id ="xxxxxxx". It does not matter where in the field tag this ID code is placed.

Each multiple line text field has only one LABEL associated with the field.

Fixing lists and menus

Each list field (a drop-down listing) has only one LABEL associated with the field. This is similar to a text field.

After you have typed in the LABEL FOR information, you need to add inside the field tag itself the same piece of information associated with id ="xxxxxxx". It does not matter where in the field tag this ID code is placed.

Each list or drop-down field has only one LABEL associated with the field.

Fixing radio button fields

Each radio button field has a separate label for the text for each radio button. This is different from text and list fields. If there are five radio buttons in a group, each one has a different label associated with it.

After entering a LABEL FOR tag for each part of the radio button, you would then enter the same text used in the LABEL tag for its ID attribute.

Fixing check box fields

Each check box field has a separate label for the text for each check box, similar to how radio buttons are coded. If there are three check boxes in a group, each one has a different label associated with it.

Again, like a radio button, each check box in a group has to have its own LABEL and associated ID attribute.

Make a paper table with your field names and label tag information

Before you begin to assign the label tag and its ID information, make a list of all the FIELD names on your form. Then next to the field name put the LABEL TAG you will use for each field. The field name should not be the same as the label tag.

field name	Label tag and ID to use
name	complete_name
email	complete_email
expertise	expertise_answer
department	department_answer
for radio buttons, each value has a separate label attribute
freshman	freshman_level
sophomore	sophomore_level
junior	junior_level
senior	senior_level
graduate	graduate_level
for check box fields, each value has a separate label attribute
K-12 visits	schools_option
campus-hosts	campus_hosts_option
community-groups	community_option

This document is part of a set of tutorials related to putting a form on your website. The initial page is found at cals.arizona.edu/ecat/forms/olderforms.html