Accessible Forms

Jason Morningstar

UNC Chapel Hill | ITS Communications | Web Services

Goals

• Learn about LABEL, FIELDSET, and LEGEND tags
• Explore good and bad form design
• Examine accessible code for form elements

Basics

• Make forms input device independent
• Use javascript with care
• Test for accessibility!
• Correctly use the <label>, <fieldset>, and <legend> tags.

Usability

• Forms should also be organized in a logical manner. Place the label for the form (e.g., First Name:) adjacent to the form element (i.e., text box, check box, radio button, menu/list).
• Provide good and clear instructions about what information is desired. If any form elements are required, be sure to indicate so. Make sure that the order in which form elements are accessed is logical and easy.

LABEL

• Provide markup for labels and checkboxes, using the <label> tag.

• When a screen reader accesses a form item that has a label associated with it, it will read the label and indicate the type of form item it is (e.g., "First Name. Text box" or "Age. Check box"). Labels are needed for all form elements, except for buttons.

FIELDSET

• Group related form elements, including radio buttons and checkboxes, using the <fieldset> tag.
• Fieldset explicitly ties related items to an intelligible description.
• Each fieldset should have a legend.
• Fieldsets should be used when there are groups of check boxes or radio buttons. Other uses are possible!

LEGEND

• Provide a title for each fieldset using the <legend> tag.

Javascript

• Do not use JavaScript to automatically change the location of the Web browser (the onChange event).

• Allow the user to select the menu item, then select an adjacent form button to go to the page for the item they have selected.
• Always provide a button to submit forms. Don't use JavaScript to automatically submit them.
• User control of the experience.

Bad Form! No Cookie!

Bad Form Reading Order

A Better Form

PEEKING AT THE CODE: LABEL

<tr>
<td> <div style="/*/*/text-align: right;">
<label for="country">Country</label>
</div></td>
<td> <input id="country" type="text" name="textfield38" size="12" /> </td>
</tr>

MORE CODE: FIELDSET & LEGEND

<td style="background-color: rgb(204, 204, 255);"> <fieldset>
<legend>Internet Speed </legend>
<br />
<input id="l288" type="radio" name="radiobutton4" value="radiobutton" />
<label for="l288"> 28.8</label>
<br />
<input id="l56k" type="radio" name="radiobutton4" value="radiobutton" />
<label for="l56k">56k </label>
<br />
<input id="t1" type="radio" name="radiobutton4" value="radiobutton" />
<label for="t1">T1</label>
</fieldset></td>

INPUT

Control type: INPUT

Name

Here's the markup, y'all:

<label for="name">Name</label>
<input id="name" type="text" name="textfield">

TEXTAREA

Control type: TEXTAREA

Explain your motives:

Here's the HTML markup:

<label for="motives">Explain your motives:</label><br>
<textarea id="motives" name="textfield2"></textarea>

CHECKBOXES

Control type: CHECKBOXES

<fieldset>
<legend>Choose a color:</legend><br>
<input id="blue" type="checkbox" name="checkbox" value="checkbox">
<label for="blue">Blue</label><br>
<input id="yellow" type="checkbox" name="checkbox2" value="checkbox">
<label for="yellow">Yellow</label>
</fieldset>

RADIO BUTTONS

Control type: RADIO BUTTONS

<fieldset>
<legend>Choose a car:</legend><br>
<input id="dart" type="radio" name="radio" value="dart">
<label for="dart">Dodge Dart</label><br>
<input id="pinto" type="radio" name="radio" value="pinto">
<label for="pinto">Ford Pinto</label>
</fieldset>

SELECT

4.5 Control type: SELECT

Which is your favorite city? Amsterdam Interlaken Moscow

Here's the HTML:

<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="favcity">
<option value="1">Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
</select>

BUTTON

4.6 Control Type: BUTTON

There are no special HTML tags for buttons. They are accessible as long as you use a standard button. Remember to use an ALT if the button is also an image!

Here's the markup:

<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">

Handy Links

• Contact me at jason_morningstar@unc.edu
• UNC's accessibility site
• WebAIM on Forms (From which I borrowed for this presentation!)