Forms

Attaching Labels to Form Elements

All form input elements must have a corresponding label to indicate what information is being requested. There are two ways to attach a label to a form input element.

Using "for" and "id" attributes

This method explicitly ties a label to an input element by matching the "for" attribute in the label tag with the "id" attribute in the input element tag. NOTE: This method will usually give you more flexibility in applying custom styling to your form elements. All of the examples on this page will use this method.

<label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" />

First Name

Nesting the input element within the label tag

This method ties a label to an input element by wrapping the input element with the label tag.

<label>First Name <input type="text" name="first-name" /></label>

First Name

Types of Input Elements

Text Field

Ideal Implementation

This method has a visible label that describes what information is being asked for in the text box.

<label for="last-name">Last Name</label> <input id="last-name" type="text" name="last-name" />

Last Name

Alternative Implementation

Sometimes for stylistic reasons you do not want have a visible label displayed. Instead of a visible label you can use the title attribute of the input element to describe what information is being asked for. If this technique is used you still need to visually let your user know what information you are asking for. This is often handled by pre-populating the text field with the information being requested.

<input type="text" title="city" value="City" name="city" />

This introduces new issues that must be dealt with, such as

• having to clear the text out of the box before entering new information or risk having strange data submitted like "CityRaleigh"
• if the user deletes the initial text then later comes back to the form element, will they remember what information was being asked for

These issues can be handled with JavaScript. Here is a more robust implementation of this technique. (This site does not allow complex JavaScript so it must be viewed on this alternative site.)

While the following technique will sometimes produce errors or warnings by automated accessibility checkers, it is usable by major screen readers.

This technique is derived from testing done by Terrill Thompson.

Checkbox

Single Checkbox

For a single checkbox you simply need to attach the label to the input element.

<input id="sendemail" type="checkbox" name="sendemail" value="sendemail" />
<label for="sendemail">Send me email updates.</label>

Send me email updates.

Multiple Related Checkboxes

When you have a collection of related check boxes you need to include them in a fieldset and provide a legend. This helps visually identify related elements plus provides a description for how these items are related.

<fieldset>
<legend>Select your days of availability:</legend>
<input id="monday" type="checkbox" name="availability" value="monday" />
<label for="monday">Monday</label><br />
<input id="tuesday" type="checkbox" name="availability" value="tuesday" />
<label for="tuesday">Tuesday</label><br />
<input id="wednesday" type="checkbox" name="availability" value="wednesday" />
<label for="wednesday">Wednesday</label>
</fieldset>

Radio Button

To make a radio button accessible you first need to attach the label to the input element.When you have a radio button input you usually have more than one input. (If you only have one radio button, a checkbox is more appropriate because it gives the user the option to unselect it.) Using the fieldset and legend helps visually identify the related group of radio buttons plus provides a description for how they are related. NOTE: By giving all of the radio buttons the same name it creates a radio group where selecting one radio button unselects the others in the group.

<fieldset>
<legend>Payment Method</legend>
<input id="cash" type="radio" name="payment" value="cash" />
<label for="cash">Cash</label>
<br />
<input id="check" type="radio" name="payment" value="check" />
<label for="check">Check</label>
<br />
<input id="credit" type="radio" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</fieldset>

Select Menu

Single Item Selection Menus

To make a select menu accessible you simply need to attach the label to the input element.

<label for="color">Choose the color you want</label>
<select id="color" name="select">
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Red</option>
</select>

Choose the color you want
Green Blue Red

Multiple Selection Items Menu

It is possible to make a menu that allows multiple selections by adding the attribute multiple="multiple" to the select tag, however, this can be more difficult for some users to manipulate.

Choose the colors you want
Green Blue Red

It is recommended to use a set of checkboxes to accomplish the same goal.

Jump Menu

Many times select menus are turned into "jump menus" by executing some JavaScript as soon as the selection has changed. This creates accessibility issues for users because actions can be triggered accidentally by simply tabbing or arrowing through a menu. Instead of a jump menu, a "go" button should be used in conjunction with a select menu to achieve the same goal.

<label for="menu">Go to the Web Site:</label>
<select id="menu" name="menu">
<option value="http://www.ncsu.edu/" selected="">NC State University</option>
<option value="http://oit.ncsu.edu/itaccess">NC State IT Accessibility</option>
</select>
<input type="button" value="GO" onclick="location= document.getElementById('menu').options[ document.getElementById('menu').selectedIndex].value;">

Go to the Web Site:
NC State University NC State IT Accessibility

Text Area

To make a text area accessible you simply need to attach the label to the input element.

<label for="feedback">Please leave your feedback:</label><br />
<textarea id="feedback" name="feedback"></textarea>

Please leave your feedback:

Button

Buttons are inherently accessible as long as the you provide an appropriate value attribute.

<input type="submit" name="submit" value="Submit this form" />

Image Buttons

If you use an image button make sure the alt attribute is set appropriately.

<input type="image" name="submitbutton" src="accessibilitybutton.jpg" alt="Submit this form" />