Forms

Forms can be accessible so long as they 1) enable screen readers to associate a label with its input and 2) provide context for users.

Associating a label with input can be done in two ways, by making the relationship explicit through the Label For and Input ID elements, and/or by structuring the form linearly.

Structure

If relying on structure alone, there are two things to remember:

• Screen readers read from left-to-right and up-to-down in cells, so text and tables have to be arranged in that order, and
• Screen readers anticipate that labels precede text boxes and that labels follow checkboxes and radio buttons, so this sequence must be followed.

Context

Context is provided by grouping questions or sections logically and identifying them by the Fieldset and Legend elements. Note that FieldSet and Legend work within the structure of forms and NOT across rows or columns defined by tables.

For example, the comments form for this website contains both the accessibility elements described above and has proper structure. View the form for an illustration. View its style sheet to see how forms can be structured without tables.

Label For and Input ID elements

Code Example:

<p> 
<label for="FirstName">First name:</label>
<input name="fn" type="text" id="FirstName">
</input></label></p>

<p>
<label for="SecondName">Second name:</label>
<input name="sn" type="text" id="SecondName">
</input>
</p>

Return to top

<p><label for="Select">
	How useful was this website?</label>
<select id="select" name="rate" size="1">
<option value="" selected>
	Please rate site</option>
<option value="4">Very useful</option>
<option value="3">Somewhat useful</option>
<option value="2">Not very useful</option>
<option value="1">Not useful at all</option>
</select></p>

<p>Which items were MOST useful?</p>
<p class="Checkbox">
<input type="checkbox" name="tm"
id="TutorialMost"></input>
<label for="TutorialMost">
Tutorial</label>
</p>

Fieldset and Legend Elements

Code Example:

<form action="" method="post" 
name="Feedback">
<fieldset>
<legend>Contact Information
</legend>

<p>
<label for="FirstName">First name:</label> 
<input name="fn" type="text" id="FirstName">
</input></label></p>
</fieldset>
...</form>

Return to top