Forms in HTML

Page Content

Input forms – from forms to select courses to search forms – are one of the greatest sources of potential accessibility issues. As a result, there are many specific guidelines in WCAG 2.0 to help ensure that forms can be used by all.

Synopsis

Layout

1. Use the LABEL tag to match a field with a label. Because some screen readers may not implement LABEL, be sure to use other strategies for logical form layout listed below.
   WCAG 2.0 Guideline 4.1.2 — “For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined.”
   WCAG 2.0 Guideline 3.3.2 — “Labels or instructions are provided when content requires user input.”
2. Labels should for text entry fields be placed above or to the left or above of the corresponding element.
   WCAG 2.0 Guideline 1.1.1 — “If non-text content is a control or accepts user input, then it has a name that describes its purpose.”
3. For many screen readers, the only text inside the FORM tag that is read is the LABEL and its field. Use the FIELDSET and LEGEND to add extra information.
4. If you are using layout tables for a form, avoid placing a form field and its label in different table cells. You can use the BR tag between the label and the field if you need to place elements vertically.
5. If more than one input field is on the same line, then the label and its element should be on the same line on the screen.
6. If a series of checkboxes or radio buttons are used, then place each option on its own line so it is clear which option goes with each button.
7. If there continue to be concerns about the function of a form field, you can use the default text option to provide information. For instance default text could be "Enter Penn State Access ID here".
8. Tabbing should take users from field to field in a logical order. In some cases, the TABORDER tag should be used to modify tabbing order in complex layouts.
9. If you include a SELECT drop-down menu with a long list of choices, use the SIZE= attribute to add vertical height.
10. The OPTIONGROUP can be used to divide a long list in a drop down menu into categories.

Required Field and Errors

1. Required fields should be indicated with a symbol or text such as an * and not just a change in color. This symbol should be embedded in the LABEL tag.
   WCAG 2.0 Guideline 1.4.1 —Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
2. The Required Field indicator (e.g. "Required) should be included in the LABEL tag so it can be accessed by a screen reader.
3. A form should include a separate SUBMIT or GO button to initiate a form submission. A submission upon option selection can interfere with screenreader function and also be difficult for users with motion impairment.
4. Form error messages should identify fields with errors and the nature of the error.

   WCAG Guideline 3.3.1 — “If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.”

5. Error messages must be presented in a format detectable by a screen reader. Possible formats include a separate error page or a pop-up window. Lightboxes or updated pages should be avoided unless tested on a screenreader.

Other

1. If the Submit button is an image, then make sure the ALT tag says "Submit".
2. Avoid "jump menus" which direct you to new page once you select an item. This may interfere with keyboards alternates and cause these users to only be able to go to the first item in the list. An option list with a "Submit" or "Go" button may be a better alternative.
3. If necessary, provide an alternate way to submit the form such as phone, mail, or e-mail. It could be as simple as allowing users to print and mail a complete form or calling a contact to have that person fill out a form for them.
4. Do not include the RESET button unless there is a legitimate demand for the need for a user to delete all the information in a form before it is submitted. It is very easy to accidentally press this button for users with motor disabilities or those using a screen reader.

The LABEL Tag

The LABEL tag explicitly associates a form field with a label. This tag allows you to control the positioning of a label, although all results should be checked with a screen reader.

Some examples are shown below.

Note that if a field does not include the LABEL tag for fields, a screen reader may not know what information to put into different fields.

Fieldset and Legend

The FIELDSET tag is used to group similar options together and is signaled in visual browers with an outline. The LEGEND tag adds a text label to the field set. See example below.

SIZE in SELECT Dropdown Menus

When a drop-down menu has a long list of selections (e.g. a list of Penn State campuses), selection may difficult for motion-impaired users who have difficulty manipulating a mouse or some cognitively disabled users who may lose track of where they are in the list.

Including a SIZE="2" attribute increases of the height of the menu to two items displayed allowing users to enter it with a keyboard and for users to view more than one item. The SIZE can be set to other values such as "3" or "4" depending on user needs. See an example below.

OPTIONGROUP in Drop Down Menus

The OPTIONGROUP tag can be used in SELECT menus to group a long list of options into different categories in the menu. See the example below.
Note: This example includes the SIZE=”3″ attribute in the SELECT tag.

Tab Order

Most browsers enable users to use the Tab key to navigate from field to field, providing accessibility to the mobility impaired and users of screen readers. In most forms, the tab order follows a logical progression from right to left, top to bottom.

Top of Page