Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Forms

Labeling Form Elements

The first thing to know about accessible forms is that most form elements need label tags. Label tags are used on the prompt (the text preceding the form element) and the form element itself. The prompt consists of a label tag with a for attribute in it that matches an id attribute in the form tag. Here are a few sample text fields, each followed by its code:

:

<p><label for="name">Full Name</label>:

<input type="text" name="fullname" id="name" size="12"></p>

 

:

<p><label for="remarks">Suggestions</label>:<br />

<textarea name="remarks" id="remarks" cols="30" rows="5">

Type your suggestions here.

</textarea>

</p>

Labels without Visible Text Prompts

Sometimes a field is presented by itself with no text to provide a cue. Such is the case with this Search box, similar to that found on the CSULB home page, in which a field is displayed with only a button after it in the page flow, as if it was a sort of retroactive description. Naturally this doesn't count as being accessible, as labels are supposed to come immediately before the field. The recommended solution is to use the title attribute in the field definition.

<input type="text" name="q" title="Search CSULB" />

<input type="image" src="LB_btn_srch.gif" alt="Search" />

Forms in Tables

Title attributes are also used to provide cues for fields in table-based forms. The difference is that the title for a field must include the row and column heading labels (see Tables). For example,

Next Section: Legends & Field Sets