Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Forms

Last updated Oct 17, 2003.

When I looked for sites that do forms correctly from an accessible perspective, I struggled to find one other than at obvious sites for people with disabilities. Such sites are missing attributes to enable screen readers to correctly read the form. Imagine the possibilities of sites that people with visual impairments wouldn't be able to access because of poorly marked-up forms: banks, jobs, shopping, and more. We often think of forms in terms of surveys or providing basic information. But they're also for filling transaction information, completing online applications, and completing the checkout on an e-commerce site.

To make accessible forms, put the text prompt next to its corresponding form control. The labels should be on the left of the control for edit fields and <select> menus. For radio buttons and checkboxes, put the prompt on the right side of the control. Buttons include prompts as part of the control in the value attribute. The <label> element ensures that screen readers read the correct text with the associated form control. For example:

<label for="name">Enter your first name.</label>
<input type="text" name="fname" id="name" />

Some forms overlook text prompts that have multiple fields or parts like birthdates, credit card numbers, or phone numbers and create multiple boxes like the ones in Figures 1 and 2. A credit card number is broken into four parts for easier reading, but will the person using a screen understand this?

When using checkboxes and radio buttons, group them with the <fieldset> tag with a <label> for each item and include a title in the form of the <legend> tag. For example:

<fieldset>
<legend>What are your favorite animals:</legend><br />
<input id="dog" type="checkbox" name="checkbox1" value="dog" />
<label for="dog">dog</label><br />
<input id="cat" type="checkbox" name="checkbox2" value="cat" />
<label for="cat">cat</label><br />
<input id="bear" type="checkbox" name="checkbox3" value="bear" />
<label for="bear">bear</label />
<input id="tiger" type="checkbox" name="checkbox4" value="tiger" />
<label for="tiger">tiger</label>
</fieldset>

The example has three key parts to make it accessible: <legend> around the question, <fieldset> before and after the list, and <label> for each item in the list. It's acceptable to replace <label> with the <input> tag and an associated title attribute.

<fieldset>
<legend>What is your favorite animal:</legend><br />
<input id="dog" type="radio" name="animal" value="dog" title="dog" />
<input id="cat" type="radio" name="animal" value="cat" title="cat" />
<input id="bear" type="radio" name="animal" value="bear" title="bear" />
<input id="tiger" type="radio" name="tiger" value="tiger" title="tiger"/>
</fieldset>

The name attribute is deprecated, but older browsers don't understand the id attribute, so the solution is to include both. However, if you find the validator spits out name as a problem, just remove it. For <select>, you can use <label> and id:

<label for="gender">What is your gender?</label>
<select id="gender" name="gender">
<option value="male">male</option>
<option value="female">female</option>
</select>

You can also use <optgroup> for grouping:

<label for="baseball">Which is your favorite baseball team?</label> 
<select id="baseball" name="baseball">
<optgroup label="National League">
<option value="LA">Los Angeles Dodgers</option>
<option value="StL">St. Louis Cardinals</option>
<option value="NYM">New York Mets</option>
</optgroup>
<optgroup label="American League">
<option value="NYY">New York Yankees</option>
<option value="Tx">Texas Rangers</option>
<option value="Sea">Seattle Mariners</option>
<option value="Toronto">Toronto Blue Jays</option>

</optgroup>
</select>