���˴�Ƭ

Online forms can be handy way to get assistance, search, request, or submit information to be sent somewhere else. They can also be accessibility nightmares if done incorrectly.

Form Layout

Screen readers and other adaptive technology access forms and other HTML content in a linear order. Once a screen reader encounters a submit button, it expects that the form should be submitted. In cases where optional fields, such as radio buttons for changing search criteria, are presented after the submit button, the screen-reader user may not be aware that the options even exist.

Similarly, instructions for a form must be presented before the form. This includes statements about how required fields are denoted or information that the person should be aware of before submitting the form. For example, "This quiz will take approximately 20 minutes" or "In order to complete this form you will require your staff number..."

Labels

Labels should be named and placed in a logical order. For example a form that asks you to input your name should have the <label> to the immediate left of the text-box. Labels should also be to the right of radio buttons and checkboxes.

Form fields always have a text-based label indicating what information should be entered into the form field, or what a radio button/check box represents. These labels need to be associated with the actual form field for ���˴�Ƭ accessibility. This extra information provides two advantages:

1. It explicitly associates the field with the label (or provides the equivalent information through the title). This means that when a person is filling out the form using a screen reader, the screen reader will tell the person what the field represents. Without this explicit association, the screen reader software must "guess."
2. The label text becomes "clickable". When you click on the label, the form field it is associated with receives the focus. In the cases of radio buttons and check boxes, this action will select or deselect the form control. This provides a larger "target" area for clicking, making the form more usable to everyone and especially more accessible to those using voice recognition software or people who have a motor impairment.

HTML code

<p><label for="name">Name</label>

<input type="text" name="name" id="name" size="10" maxlength="30" /></p>

(where the "for" attribute corresponds to the "id" attribute)

Tab order

When navigating web forms anyone can use the “Tab” key to move from field to field. Someone using a screen reader will make good use of the Tab key. Most of the time, the “Tab” will move focus in the logical order of the form (top to bottom) but not always. To ensure a logical movement, you can set the “tab index” attribute for each form element to set the order.

HTML Code

<p><label for="name">Name</label>

<input type="text" name="name" id="name" tabindex="1" /></p>

Any field that is required to be filled out should be labelled using proper symbols and text such as (* required). If required fields are indication by a bold font or the colour red, a screen reader won’t be able to identify those fields as required.

If a “Submit” button is an image, ensure it has an Alt tag saying “Submit”.