Accessible Data Forms

Overview

HTML forms can be quite difficult to navigate with assistive technology if they are not laid out in a predictable and consistent manner. Section 508 - Standard (n) provides requirements for designers that ensure that forms are usable to individuals that are blind or unable to view the layout of a form. Section 508 - Standard (p) doesn't specifically mention HTML forms, but the requirement does pertain to the entry of data, therefore one can relate this standard to forms.

Section 508 - Standard (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.

Section 508 - Standard (p)

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Note: Standard (n) is presented first in this content. Standard (p) is presented further down in this content.

back to top

Explanation - Standard (n) - Accessible Forms

The layout of form fields can be confusing to individuals that are not using the page in a visual manner. Placement of form field labels in relation to form fields offer one concern. A second concern arises if the form is structured within a table.

Placement of Form Field Labels

Compare the two manners by which the users street address is collected in the examples below.

For individuals that are sighted, both form fields clearly ask for your street address. To assistive technology, the second example is usable, yet frustrating. A screen reader would read the examples in a manner similar to the following. Note that [text] is representative of how the screen reader reads a text entry box.

Example #1 - Enter your street address. [Text]
Example #2 - [Text]. Enter your street address.

In Example #1, the user will know prior to encountering the text box, that he/she is being asked for their street address. In Example #2, the user would realize that they had come across a text entry box, but not know what to do with it. Upon being told to, "Enter your street address", the user would need to retreat back to the text entry box and complete it. Both examples are usable, however the second leaves much to be desired.

Tables and Forms

A designer may have used a table to control the layout of a form. This is an acceptable technique if the form linearizes properly within the table. If you are not familiar with the concept of table linearization, visit the presentation of accessible tables before continuing. The example below demonstrates a form in a table.

The linear order of this form is dictated by the table that provides structure. Linear order of the table is to move from left to right across the first row, then down a row again reading content from left to right. Thus, the content of this form reads as:

First Name: [Text]
City: [Text]
Last Name: [Text]
State: [Text]
Date of Birth: [Text]
Zip Code: [Text]

While this form is not technically inaccessible, it is definitely poorly organized. It would be beneficial to the user to have the name information and the address information grouped seperately, rather than intermingled. Give careful thought to the linear order of a form prior to constructing it in a form.

back to top

Techniques for Accessible Forms

Three accessibility techniques can be implemented in the design of forms.

• placing form field prompts prior to form fields
• using the LABEL HTML tag
• use of a title attribute within the HTML code for a form field

Of these techniques, the proper placement of form field prompts is the best choice. Each of the other techniques have merits, but are not problem free.

Place Form Field Prompts Properly

A form field prompt is the visual text that directs the completion of the form field. In the examples on this page, First Name would be a prompt, as would City, State, Date of Birth, etc. Proper placement of a form field prompt is dependent upon the form field to which it is associated. The guidelines for placement follow the form reading processes the development teams of the major screen reader technologies have set in their applications.

Use the LABEL HTML Tag

The LABEL HTML tag associates the form field with a text label. If a designer implements this code, then the form field label placement becomes flexible. Let's review the form field example used earlier in this discussion.

Enter your street address

Earlier, we learned to avoid the practice of placing form field prompts after form fields. The code for this example is as follows. Note the LABEL tag and the ID HTML attribute.

<input type="text" name="street_address" id="street" />
<label for="street">Enter your street address</label>

The "label for" HTML code carries a value of "street". Correspondingly, the form field, indicated by the HTML tag input, has been assigned an id equal to street. Subsequently, the label text could be placed anywhere on the page and assistive technology will correctly identify the HTML form field to the user.

A strong argument can be made to focus on proper placement of form field prompts rather than rely upon the LABEL HTML tag. Two points of support for this argument are that:

• Not all screen readers, even current versions support the LABEL tag. (Only IBM's Home Page Reader provides support.) Support may not be included on future versions.
• Use of the LABEL tag requires a bit of HTML knowledge. If you don't feel comfortable in the code and aren't a user of Macromedia Dreamweaver MX, rely upon the linear order we discussed a bit earlier. Macromedia Dreamweaver MX includes a form function that prompts the user to assign form field labels. With this functionality enabled, accessible form design is quite simple.

Using the TITLE Attribute

Yet another option is the HTML title attribute. Title is a component of the HTML in any form field. In the example that follows, the title equals "Enter your street address".

<input type="text" name="street_address2" title="Enter your street address"/>

This technique is not widely advocated as the use of title in the HTML tag input is not a part of the HTML or XHTML specifications of the World Wide Web Consortium.

Summary of Accessible Form Techniques

The techniques in this section can be confusing. If you are designing a page that uses forms, make the proper placement of form field prompts the highest priority. If you are using Dreamweaver MX, then implement the LABEL tags. The use of TITLE would need to be completed within the HTML source code. Resort to this technique if the form is structured within nested tables and you feel comfortable working within HTML source code. Keep your forms as simple as possible in their layout, position prompts in logical locations and you won't have to worry about LABEL or TITLE.

back to top

Explanation - Standard (p) - Timed Responses

Designers can use programming scripts to set a time limit on completing a form. One example of a time constraint is a limit for completion of a quiz. Standard (p) requires that a student is made aware of the time limitation prior to initiating the quiz and is also able to request more time if needed and acceptable to the task at hand. It is understood that in some cases, extending a time limit eliminates the validity of an assessment measure. This would be a fair place for departmental processes or pedagogy to be a factor in assisting individuals that need more time.

back to top

Technique for Accessible Use of Timed Responses

Several guidelines should shape the use of a timed response.

• Precede all timed response mechanisms with an alert that a timed response is in use.
• Provide a counter that notifies a user how much time remains.
• Allow a user to request more time if this is acceptable.

back to top

Other Considerations

Assigning TABINDEX Attributes

Tabindex is of help to individuals that must use the keyboard to navigate a page. Tabindex is not a requirement of Section 508.

Tabindex controls the order by which a user can tab through a form and more generally through a web page. Tabindex can be assigned to form fields and to hyperlinks. Let's look at an example of a form.

The First Name field has been assigned a tabindex value of 1. Last name has been set to tabindex equal to 2. Date of Birth has been set to a tabindex of 3. The tabindex for City is equal to 4. That pattern continues for State and Zip Code. For users that tab through the form, the tabindex will control the order by which tab advances through the page and the form.

Again, Dreamweaver MX provides an easy to use prompt that creates the tabindex values. If you are comfortable working directly in HTML code, the tabindex attribute can be added to the form field input type as illustrated in the code for the first name field below.

<label for="label7">First Name:</label> <input type="text" name="textfield7" tabindex="1" id="label7" />

Understand that the tabindex values aren't just for this form. A designer needs to examine the page as a whole prior to assigning tabindex. Assigning a tabindex value of 1 to a form field at the bottom of a web page means it is the first element a user will progress to when they tab; even if that action skips 20 hyperlinks that precede the form field.

back to top

Validation Technique(s)

The testing measures that follow can be used to evaluate compliancy of your web page(s) with the concepts presented for Standard (n) and Standard (p).

Standard (n)

• view your page using a text based browser such as Lynx
• listen to the page using a screen reader or speech synthesizer
• navigate through the page using only the keyboard to complete all necessary functions

Standard (p)

• locate all form elements - evaluate whether they have a timed response function built in

back to top

complete a self-assessment about forms