How to Use the Label Element to Make Online Forms Accessible

An important accessibility feature of online forms is the proper use of the label element. A label is a connection between the form element itself and the text explaining what the form field is for. Here is how to use the label element.

Difficulty: Moderate

Instructions

Things You'll Need:

• A text editor or WYSIWYG HTML editor

Build Your Form

1. There are two steps to creating a label. The first is the label itself. With the label element include an attribute called FOR. The FOR attribute tells which actual form element the label is for.

2. The second step involves matching an ID attribute in the form element to the exact value that was given to the FOR attribute in the label element.

3. 
    
   A label with a text field

   Pictured is an example of a text field in a form asking for a person's name. You can see the HTML in the image. Note that in this example the label will appear before the text field.

4. 
    
   A label with a checkbox

   On the other hand, when you use checkboxes in a form, you may want to have the label appear after the form element. This image shows the proper way to do that with HTML and includes a surrounding fieldset and legend for the checkboxes. The fieldset and legend are not necessary for checkboxes, I included them to provide a complete example. Use a similar pattern to place the label after each radio button when making a form with radio buttons.

5. 
    
   A label with a select menu

   For a select box you use the label only for the instructions on what to select.

6. Submit and Reset buttons do not need label text. The form control itself gives the text needed.

Tips & Warnings

• When certain fields are required you can add an asterisk character to the form label text. Explain that required fields are marked with an asterisk at the beginning of the form.