- Attaching Labels to Form Elements
- Types of Input Elements
- Additional Resources
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
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” />
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?
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.
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.
<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” />
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.
<input id=”cash” type=”radio” name=”payment” value=”cash” />
<input id=”check” type=”radio” name=”payment” value=”check” />
<input id=”credit” type=”radio” name=”payment” value=”credit” />
<label for=”credit”>Credit Card</label>
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”>
Multiple Selection Items Menu
It is possible to make a menu that allows multiple selections by adding the attribute
to the select tag; however, this can be more difficult for some users to manipulate.
It is recommended to use a set of checkboxes to accomplish 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>
<input type=”button” value=”GO” onclick=”location= document.getElementById(‘menu’).options[ document.getElementById(‘menu’).selectedIndex].value;”>
NC State University
NC State IT Accessibility
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>
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” />
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.