Forms

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. 

Why do forms present challenges to screen readers?

Currently, the interaction between form controls and screen readers can be unpredictable, depending upon the design of the page containing these controls. HTML forms pose accessibility problems when web developers separate a form element from its associated label or title. For instance, if an input box is intended for receiving a user's last name, the web developer must be careful that the words "last name" (or some similar text) appear near that input box or are somehow associated with it. Although this may seem like an obvious requirement, it is extremely easy to violate because the visual proximity of a form element and its title offers no guarantee that a screen reader will associate the two or that this association will be obvious to a user of assistive technology.

While the relationship between the titles and their respective input boxes may be obvious from visual inspection, the relationship is not obvious to a screen reader. Instead, a screen reader may simply announce "input box" when encountering each input box. The reason for these difficulties is revealed from inspecting the HTML source for this table. The following code is a simplified version of this table.

How can developers provide accessible HTML forms?

1. Group Related Information

In FrontPage, to group related information: choose "insert"; "form"; "Group Box". Name the group either by typing over the large group box text or by right clicking on the group box and choosing "group properties"; then insert a group name in the "group name" field.

For example: A group box name "Contact Information" would have fields such as name, address, phone number etc.

2. Use Explicit Labels

 

Text Boxes

To insert an explicit label for a text box, insert a text box field. Then type a label or sting of text ON THE SAME LINE AS THE BOX. Next, highlight both the text box field and the text and choose "insert"; "form"; "label."

 

Radio Buttons and Check Boxes

The easiest way to label a radio button or check box is to add the label code straight into the html. To do this, first insert the radio button or check box field. Highlight the field then open the html view. The code for the field should be highlighted. A typical radio button would look something like this:

    <input type="radio"  value="attend4_" name="preview2" tabindex="2"></b>

Next, click anywhere inside the brackets (<>) and insert an ID attribute. The ID attribute must be unique for every field within a form, and must start with a letter of the alphabet and end with a number. An example follows:

    ID="Preview2"

The new code would read:

    <input type="radio"  ID="Preview2" value="attend4_" name="preview2" tabindex="2"></b>

Next, Click before the highlighted code and insert the label for tag. The attribute will be the same as the ID you entered above. An example follows:

    <LABEL for="Preview2">Insert any text you would want to show up as a label on the form here.

Lastly, click at the end of the original code and close the tag. An example follows:

     tabindex="2"></b></LABEL>

The complete product might look something like this:

     <LABEL for="Preview2">I would like to attend Preview Session Number 2: <input type="radio"  ID="Preview2" value="attend4_" name="preview2" tabindex="2"></b></LABEL>

NOTE: Each radio button or check box MUST have a separate ID even if it has the same name. Each radio button or check box MUST be labeled independently even if it is part of a group with the same name.

 

Drop Down Menus

If there are less than ten options available in the drop down menu see the instructions for a text box. If, however, you will be adding more than ten options - the options must be grouped in bunches of ten or less. To do this you will need to utilize the OPTGROUP element. OPTGROUP will also have to be inserted directly into the html since FrontPage does not yet have this capability. For instructions on using OPTGROUP please visit Web Design Group's form page. An example of a dropdown menu that allow a users to choose the state in which they live, and which utilizes accessibility features that prevent reader users from having to wait through all fifty states follows:

<LABEL for="D1" ACCESSKEY=S><b><font size="3" color="#000099">
<span style="font-variant: normal">State:</span><select size="1" ID="D1" name="State" tabindex="9">
<OPTGROUP LABEL="States Stating With A-D">
<OPTION LABEL="Alabama">Alabama</option>
<OPTION LABEL="Alaska">Alaska</option>
<OPTION LABEL="Arizona">Arizona</option>
<OPTION LABEL="Arkansas">Arkansas</option>
<OPTION LABEL="California">California</option>
<OPTION LABEL="Colorado">Colorado</option>
<OPTION LABEL="Connecticut">Connecticut</option>
<OPTION LABEL="Delaware">Delaware</option>
<OPTION LABEL="District of Columbia">District of Columbia</option></OPTGROUP>

<OPTGROUP LABEL="States Stating With F-K">
<OPTION LABEL="Florida">Florida</option>
<OPTION LABEL="Georgia">Georgia</option>
<OPTION LABEL="Hawaii">Hawaii</option>
<OPTION LABEL="Idaho">Idaho</option>
<OPTION LABEL="Illinois">Illinois</option>
<OPTION LABEL="Indiana">Indiana</option>
<OPTION LABEL="Iowa">Iowa</option>
<OPTION LABEL="Kansas">Kansas</option>
<OPTION LABEL="Kentucky">Kentucky</option></OPTGROUP>

<OPTGROUP LABEL="States Stating With L-M">
<OPTION LABEL="Louisiana">Louisiana</option>
<OPTION LABEL="Maine">Maine</option>
<OPTION LABEL="Maryland">Maryland</option>
<OPTION LABEL="Massachusetts">Massachusetts</option>
<OPTION LABEL="Michigan">Michigan</option>
<OPTION LABEL="Minnesota">Minnesota</option>
<OPTION LABEL="Mississippi">Mississippi</option>
<OPTION LABEL="Missouri">Missouri</option>
<OPTION LABEL="Montana">Montana</option></OPTGROUP>

<OPTGROUP LABEL="States Stating With N">
<OPTION LABEL="Nebraska">Nebraska</option>
<OPTION LABEL="Nevada">Nevada</option>
<OPTION LABEL="New Hampshire">New Hampshire</option>
<OPTION LABEL="New Jersey">New Jersey</option>
<OPTION LABEL="New Mexico">New Mexico</option>
<OPTION LABEL="New York">New York</option>
<OPTION LABEL="North Carolina">North Carolina</option>
<OPTION LABEL="North Dakota">North Dakota</option></OPTGROUP>

<OPTGROUP LABEL="States Stating With O-T">
<OPTION LABEL="Ohio">Ohio</option>
<OPTION LABEL="Oklahoma">Oklahoma</option>
<OPTION LABEL="Oregon">Oregon</option>
<OPTION LABEL="Pennsylvania">Pennsylvania</option>
<OPTION LABEL="Rhode Island">Rhode Island</option>
<OPTION LABEL="South Carolina">South Carolina</option>
<OPTION LABEL="South Dakota">South Dakota</option>
<OPTION LABEL="Tennessee">Tennessee</option>
<OPTION LABEL="Texas">Texas</option></OPTGROUP>

<OPTGROUP LABEL="States Stating With U-W">
<OPTION LABEL="Utah">Utah</option>
<OPTION LABEL="Vermont">Vermont</option>
<OPTION LABEL="Virginia">Virginia</option>
<OPTION LABEL="Washington">Washington</option>
<OPTION LABEL="West Virginia">West Virginia</option>
<OPTION LABEL="Wisconsin">Wisconsin</option>
<OPTION LABEL="Wyoming">Wyoming</option></OPTGROUP>

</SELECT>
</P></font></b></LABEL>

 

To preview a form with this type of field in it, see the campus preview registration form.

 

For all other form elements:

See instructions for text boxes.

 

Tab Order:

Make sure that all form fields are designated a navigable tab order number. The tab order dictates the order in which fields are chosen when the user is using a keyboard only machine or a text reader. You can assign tab order to form elements in FrontPage by right-clicking the form field then choosing "form field properties." In the "TAB" box, insert the appropriate number.

 


 

Helpful Links for Creating Forms:

Information about Using OPTGROUP

Information about Using LABELS

 

RETURN TO ACCESSIBILITY PAGE

 

©2005.Texas A&M at Galveston

 CIS Department. All rights reserved.