Getting Forms right the first time - Details
[Why?]
[How?]
Why?
One element that poses difficulty for even experienced screen-reader users is completing forms in an on-line environment. Forms require the input of information from the user that, while visually understandable, may not make sense when using a screen-reader. In part, this is due to the manner in which a screen-reader communicates the on-screen information to the user. For instance, a web-based form may require information about the person's address in order to complete a purchase. If the address information is not associated with the form input field then the information entered by the user may not be what is required to process the information .
How?
Making a web-based form accessible can be accomplished using various HTML attributes that associates the query with the form field elements. Care must be taken, however, when creating forms within tables used for presentation purposes. Nesting table content can make it difficult for screen-readers to communicate the on-screen information to the user in a recognisable format.
Form attributes
There are several HTML form attributes that are necessary to develop accessible forms. Not all of these commands are available from a web authoring tool interface (e.g., Dreamweaver, FrontPage 2000, etc.) and require the web creator to edit this information in the HTML code.
HTML form tags
<form>; </form>
This defines the form for user input. This is not seen by the user, rather it signals to the browser to receive information.
<form name="form1" method="post" action=" ">
</form>
<input>
Defines the input field element. It is generally followed by the type=" " tag to specify the type of input field.
<form name="form1" method="post" action="">
First Name:
<input type="text" name="firstname">
</form>
<label>; </label>
This element associates the label to a control. If the label is associated to a particular control, then clicking on the label will activate the control. When used with the "for" and "id" tags, it binds the label to another element. If you are coding this tag by hand, it is important to place the <label> attribute next to the text and form field element you are associating.
<form name="form1" method="post" action=" ">
<label for="fname">First Name:</label>
<input type="text" name="firstname" id="fname">
<br>
<label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname">
<br>
<input type="checkbox" name="happyday" id="hday">
<label for="hday">I am having a happy day.</label>
</form>
<fieldset>; </fieldset>
Draws a box around the set of form input elements that you wish to relate to one another.
<form name="form1" method="post" action="">
<fieldset>
<label for="fname">First Name:</label>
<input type="text" name="firstname" id="fname">
</fieldset>
</form>
The <fieldset> HTML tag can also be used with the <legend> tag to create a caption for the form input elements that exist within the <fieldset> attribute.
<form name="form1" method="post" action=" ">
<fieldset>
<legend>Name Information</legend>
<label for="fname">First Name:</label>
<input type="text" name="firstname" id="fname">
</fieldset>
</form>
<select>; </select>
The <select> attribute provides the flexibility of a drop-down option box from which the user can select one choice from multiple options. It is often used with the <option> and <optgroup> tags. If you wish to highlight a particular option in the drop-down box, you can use the <option selected> tag.
<select>
<option selected>Please choose a wine type</option>
<optgroup label="White Wine">
<option value="chardonnay">Chardonnay</option>
<option value="pinotgris">Pinot Gris</option>
<option value="sauvignonblanc">Sauvignon Blanc</option>
</optgroup>
<optgroup label="Red Wine">
<option value="merlot">Merlot</option>
<option value="sangiovese">Sangiovese</option>
<option value="cabernetsauvignon">Cabernet Sauvignon</option>
</optgroup>
</select>
<button>; </button>
There are essentially two methods to create a button for a web page. The first method uses the <input type="submit" value="Submit"> tag to create a button. This is the standard button that is present on many web pages. The message on the button can be changed by altering the text in the value=" " field.
The other method is to use the <button> tag that allows the web developer to vary a button style and appearance. A submit button sends the information contained in the form to the server for processing. A reset button resets all the form field elements to their original condition essentially returning the form to its default state. A push button does not have a default behaviour. Rather a push button will have some type of scripting information that triggers a process or function. The push button function will not be covered at this time due to its reliance on scripting languages. If the <button> tag is used and the button representation is a graphic image, then it is necessary to include an alt-tag in the HTML code.
<button name="submit" type="submit">
Send
<img src="/icons/wow.gif" alt="wow">
</button>
<button name="reset" type="reset">
Reset
<img src="/icons/oops.gif" alt="oops">
</button>
<tabindex>
The <tabindex> tag allows the web developer to set the order in which form field elements become available when using the tab keyboard button. This ensures the correct form field is selected when the user moves through the on-line form using the keyboard instead of the mouse. Navigation will proceed from the lowest tab index value to the next greater tab index value.
<form name="form1" method="post" action=" ">
<fieldset>
<legend>Name Information</legend>
<label for="fname">First Name:</label>
<input type="text" name="firstname" id="fname" tabindex="1">
<br>
<label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname" tabindex="2">
</fieldset>
</form>
Types of Input Elements
There are several types of input elements a web design author can implement to facilitate the collection of information from the site visitor. These input elements may be text areas, radio buttons, or checkboxes.
Text Area
A text area is a multi-line text input area that allows the user to enter an unlimited amount of text information. If necessary, the web developer can control the type of information entered and/or the length of the text entry. You can give the text area a "name" attribute to distinguish between several responses.
Please enter information into the area below:
<textarea name="Information" rows="5" columns="20">
</textarea>
Example:
Please enter information into the area below:
Radio Button
When a user clicks on a radio button that button will be selected and all other buttons with the same "name" attribute will be unselected. This is effective when a web developer is only interested in gathering a response where the answer cannot be both items at the same time (i.e., Boolean).
Male:
<input type="radio" name="sex" value="male">
<br>
Female:
<input type="radio" name="sex" value="female">
Example:
Male:
Female:
Drop Down Menus
Drop down menus provide the flexibility of allowing the user to select from a list of options without the list of information occupying space on a web page. These menus are developed using the <select> , <optgroup> , and <option> tags. When coupled with a JavaScript function, it is possible to automatically redirect the user to another web page or institute a specific function by selecting one of the drop-down menu options. However, this prevents a user from using the arrow keys to scroll through the list of option because the first item selected will initiate the combination of keyboard commands, it is generally recommended to not couple the drop-down menu with a JavaScript function.
Title Attribute of Input Elements
When developing forms for a web page it can be difficult to insure that the form will be easily accessible by all individuals. This is particularly true when creating forms within tables to maintain structure and layout properties from one machine to the next. The use of the <title> tag can be incorporated into the HTML coding to improve the ability of a screen-reader to communicate the on-screen information. For instance, the following example is a form investigating the population of birds during two different times of the year:
In this situation, it is difficult for a screen-reader to communicate accurately to a user as to what form field elements apply to the appropriate row and column heading. The <title> attribute can provide the screen-reader user with more information and allow the user to complete the information with greater accuracy. To use the <title> tag, place the code <title="descriptive information goes here"> within the <input> tag of the form field element. This will provide more information for the screen-reader user to complete a complex web-based form.