Article

Creating Online Forms

by WebAIM

Introduction

Forms are used for all kinds of interactive purposes on the web. Forms allow users to select and purchase merchandise, to fill in surveys and questionnaires, to register for courses, to search for information on the web, and a long list of other actions.

When we talk about the accessibility of forms, we are usually referring to their accessibility to people who use screen readers. People with other types of disabilities are generally less affected by faulty forms. It should be noted, however, that everyone benefits from a well-organized, highly usable form, especially those with cognitive disabilities.

Ensure Forms are Keyboard Accessible, Logical, and Easy to Use

Many users must use their keyboard to navigate and use the web. You must ensure that the forms on your web site can be completed using only the keyboard. There are a few things that can make forms totally unusable with the keyboard, the most common of which is JavaScript. Be careful in your use of JavaScript to manipulate form data, set focus, change form elements, or submit forms. Each of these can make the form difficult or impossible to complete or understand using the keyboard alone. Always test your web site forms for accessibility.

A use of forms that has become common on the web is the drop-down menu for navigation. It allows you to put many navigational items into a very small amount of real estate in your page. User's can use a drop-down menu to select an item that corresponds with a location on the web. While these forms by themselves do not cause accessibility issues, if JavaScript is used to submit the form data when the user selects a drop-down menu item, then accessibility is affected. These forms often use the JavaScript onChange event, which means that when the form items is changed, the browser is instructed to automatically go to a specific web page. This onChange event is triggered when the user releases their mouse button after selecting the item in the drop-down menu that they want. If, however, the user is not using a mouse, they must use the keyboard arrows to navigate through the drop-down menu items. Each time they move up or down through the menu's items, the JavaScript detects an onChange event, which directs the browser to a new page. An example of this type of form can be found at http://sports.espn.go.com/ncb/index - external link by trying to select a conference from the menu on the left of the page. So, if the drop-down menu has ten items, and the user wants to get to the tenth item, they will be forced to first select the first item, which will take them to a web page, go back to the menu, select the next item, go back to the menu, and so on, ten times until they get to the page they want.

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. This can sometimes by problematic if tables are used to control layout of form items. To check the linearized order of items on the page, use the Wave accessibility tool - external link or the Opera browser.

One Last Tip

Do not use JavaScript to automatically change the location of the web browser. Instead, 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.

posted on Jun 13, 2007

   Topics