Creating Accessible Forms: Overview

WAC Workshop. November 2004.
Written and Presented by: Lori Bailey.

Covers: OSU Standards and electronic forms, distributing forms, screen readers and forms, elements of accessible form design, form layout, inserting and marking-up form elements, processing forms and error messages.

Part V: Marking Up HTML Form Elements.

In this section, we will consider each of the form elements and what information you need to include to insert these elements into your HTML form. Although we focus on HTML forms, the requirements are similar regardless of what kind of form it is PDF, scripted, or other although it may be more difficult to add the appropriate accessible markup.

You can view a form with examples of all these elements on our Sample Form.

Text Boxes.

Text boxes require a unique label and unique ID for each box. Attach the label to the text box by using the "for" attribute in the LABEL tag. The "for" attribute should equal the "id" attribute in the INPUT tag.

In FrontPage, type the label and insert the text box, then use the insert label feature to attach the two. Dreamweaver identifies all text boxes as "textfield." You need to add unique names/ids and change the "for" in the LABEL tag to reflect that unique name.

<p align="left">
<label for="first">First Name:</label>
<input name="first" type="text" id="first" tabindex="5" size="30" />
<label for="last">Last Name:</label>
<input name="last" type="text" id="last" tabindex="7" size="30" /><br />
<label for="email">E-mail Address:</label>
<input name="email" type="text" id="email" tabindex="9" size="50" /></p>

Example of Text Boxes:

Text Areas.

Text areas, like text boxes, are also fairly straight forward. In most cases, engaging the "Return" button once inside a text area will create a new line of text and not send the form. But, be sure to test how your server interprets this action. Most problems occur when using client-side processing to validate the form (validates on detection of ENTER key).

<p align="left">
<label for="question">Tell us your question:</label><br />
<textarea name="question" cols="50" id="question" tabindex="19">
</textarea></p>

Example of Text Area:

Radio Buttons.

Radio buttons are the most problematic form element for users of assistive technology. In particular, for JAWS users, it can be difficult to engage "Forms Mode" when the cursor is focus on a radio button. In addition, when a group of radio buttons are used to answer a single question, it can be difficult to associate both the question and answer with each radio button. Finally, users can only turn a radio button on not off and at least one radio button must be selected in the group, making it very import to offer a "None" or "Does not apply" option. The WAC recommends using radio buttons sparingly and instead choosing a list or drop-down menu.

Tips for Using Radio Button Groups:

1. The only way to associate the general question with the radio button options is to add FIELDSET And LEGEND tags around the entire collection of radio buttons. Keep in mind that the entire LEGEND text is read before each option, so keep it short and to the point.

2. Each radio button must be assigned a unique ID and that ID must be reflected in the associated LABEL "FOR" attribute.

3. Be sure to include a "None" or "Not Applicable" choice, so users can "turn off" or deselect an incorrect choice. In most cases, it is best to make this the default choice.

4. Note that Dreamweaver wraps the LABEL tag around the INPUT tag. Although it should not matter, this may cause some browser errors. To be extra careful, reposition the tag.

<div align="left">
<fieldset>
<p align="left"><legend>Are you a current student?</legend><br />
<input type="radio" name="cur_student" value="grad" id="grad" tabindex="13"/>
<label for="grad">Current Graduate Student</label><br />
<input type="radio" name="cur_student" value="ugrad" id="ugrad" />
<label for="ugrad">Current Undergraduate Student</label> <br />
<input name="cur_student" type="radio" value="none" checked="checked" id="none" tabindex="15" />
<label for="none">None: not a current student</label><br /></p></fieldset></div>

Example of Radio Buttons (inside FieldSet):

Check Boxes.

In most cases, check boxes are preferable to radio buttons, because users can turn each box on ("checked") or off ("unchecked"). However, they are still a rather clumsy method of offering multiple choices the WAC recommends using the Menu/List box instead.

Check boxes resemble text boxes in that each box must be given a unique ID and the label tag must be updated for each. Also, Dreamweaver does not assign a default value for each check box, so you must add this. FrontPage assigns each check box the value of "ON," which you can change, if desired. Like the radio button, add the FIELDSET and LEGEND tags to connect boxes related to the same form question/topic.

<div align="left">
<fieldset>
<legend>Would you like to join any of the department listservs? (check any that interest you)</legend>
<input type="checkbox" name="list_dept" value="dept list" tabindex="20" id="list_dept" />
<label for="list_dept">Department Listserv</label><br />
<input type="checkbox" name="list_grad" value="Gradlist" tabindex="21" id="list_grad" />
<label for="list_grad">Graduate Student Listserv</label><br />
<input type="checkbox" name="list_ugrad" value="ugrad list" tabindex="23" id="list_ugrad" />
<label for="list_ugrad">Undergraduate Listserv</label><br />
<input type="checkbox" name="list_18th" value="18th cen list" tabindex="25" id="list_18th" />
<label for="list_18th">18th Century Literature Listserv</label>
</fieldset></div>

Example of Check Box Group:

Menus and List Boxes.

Menus and list boxes are excellent choices for presenting multiple options in one field. They can be limited to accept only one answer or to allow multiple selections. Both FrontPage and Dreamweaver automate much of the work for accessible menus and list boxes.

Notice in the example below that each OPTION tag does not require a separate label. Wherever a form element includes a VALUE attribute that attribute serves as the label for that form element.

<p align="left">
<label for="topic">What is the topic of your question (choose best):</label><br />
<select name="topic" size="1" id="topic" tabindex="17">
<option value="none" selected="selected">Choose topic</option>
<option value="gradstudies">Information on Graduate Study</option>
<option value="ugrad">Information on Undergraduate Study</option>
<option value="web">Problem with web site</option>
<option value="course">About course currently being offered</option>
<option value="futurecourse">About future course</option>
<option value="department">General question about deparment</option>
<option value="faculty">General question about faculty or staff</option>
<option value="other">Other: not listed</option></select></p>

Example of Menu Box (with drop-down menu):

Jump Menus.

One very problematic form of the menu/list box the Jump Menu. When a user selects an option in a Jump Menu, a script, link, or other action is automatically engaged. Thus, the user only needs to click on the object once. However, keyboard users can only select the first item as soon as it is selected by the keyboard, the action is engaged and users cannot scroll down the rest of the list.

Instead of a Jump Menu, add a "GO" or "Select" button next to the menu to allow users to initiate the action with an additional click. Note that this option typically relies on JavaScript or other client-side scripting to make the GO button work and should therefore not be used as the primary navigation method (See "Processing Forms" below).

Buttons (Submit and Reset).

The like the OPTION in a menu or list, the "value" attribute serves as the label for button elements and should therefore be as simple and clear as possible. In particular, note if engaging the button leads to a "next step" (data verification) in the form process and not to the completion/submission of the data.

<p><input type="submit" name="Submit" value="Submit Your Question" tabindex="27" id="Submit" /></p> </form>

Example of Button: