Forms

Attaching Labels to Form Elements

Every form input element 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” />

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>

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” />

Alternative Implementation

This method can be used when, for stylistic reasons, you do not want to display a visible label. In this case, you can use the title attribute of the input element to describe what information is being asked for. If you employ this method, 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” />

However, this method 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 that text mingled with the user’s input; e.g.,¬† “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. (The OIT site does not allow complex JavaScript, but it can be viewed on this linked site.)

A technique derived from testing done by Terrill Thompson will sometimes produce errors or warnings by automated accessibility checkers, it is usable by major screen readers.

 

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>

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 and 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>

Select your days of availability:



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.
NOTE: If you have only 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 and also provides a description for how they are related.
NOTE: Giving all of the radio buttons the same name 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>

Payment Method



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>


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.


Green
Blue
Red

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

Choose the colors you want



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;”>


NC State University
NC State IT Accessibility

Text Area

To make a text area accessible, just attach the label to the input element.

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


Button

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

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

If you use an image button, be sure to set the alt attribute appropriately.

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

Additional Resources

WebAIM Forms Article

HTML 4 Forms

HTML 5.1 Forms (The new input element types in HTML 5 are not yet fully supported in all assistive technologies.)

Credits: Some material on this page comes from WebAIM’s Accessible Forms Article and from Terrill Thompson’s blog, both of which are linked to previously.