Forms in HTML

Input forms – from forms to select courses to search forms – are one of the greatest source 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 fieds 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, uses the SIZE= attribute to add vertical height.

  10. The OPTIONGROUP can be used to divide a long list in a drop down menu into catagories.

Required Field and Errors

  1. Required fields should be indicated with a symbol or text such as an "(R)" and not just a change in color. The best option is just "Required", but if a symbol is used, then include a key such as "(R) = Required Field" should also be included above the FORM 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.

 

Top of Page

The LABEL Tag

This tag explicitly associates a form field with a label. The LABEL 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.

Sample LABEL Code

* = Required Field

Send Newsletter updates?

See the Code

Note that that because the LABEL is matched to a specified field ID, the label could follow a field (as is often the case for checkboxes and radio buttons.

<p>* = Required Field</p>
<p><label for="name"><b>Your Name *</b> </label>
<input type="text" name="name" id="name" /></p>

<p><b>Send Newsletter updates?</b><br />
<input type="checkbox" name="newsletter" id="newsletter" />
<label for="newsletter">Yes, please send e-mail updates once every five minutes.</label></p>

 

Top of Page

Optimal Layout for Forms

Screen readers state the name of a field, then say to "input" data. Unless the labels are placed correctly users will not know which data to input in which field. Below are some accessible and inaccessible examples of form labeling.

Inaccessible Form with Unlabeled Elements

Instructions: Please enter your name, address, and phone number in the fields below.

  



The form above is inaccessible because the form has three unlabeled fields. A screen reader would read it as:

Instructions: Please enter your name, address, and phone number in the fields below.
[INPUT] [INPUT] [INPUT]

 

Inaccessible Form with Tables:
Elements & Labels in Different Table Cells

 

Inaccessible Form with Tables
Name Phone Number Userid
Street Address City,State Zip Code



The form above would be read as follows in a screen reader:

Name, Phone Number, Userid
[INPUT] [INPUT] [INPUT]

Street, City/State, Zip Code
[INPUT] [INPUT] [INPUT]

 

Accessible Form, Vertical Layout

NOTE: You can use style sheets to make sure label text is always the same width.

 

Accessible Form, Horizontal Layout With Tables

Accessible Form in Table

Although the above form is laid out in an HTML table, each label and corresponding field are in the same cell and on the same line.

 

 

Top of Page

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.

Fieldset and Legend for Student Year

Identify Current Student Year

View the Code

<form>
<fieldset>
<legend>Identify Current Student Year</legend>


<p>
<input type="radio" name="radio1" id="freshman" value="1" />
<label for="freshman">Freshman</label>

<input type="radio" name="radio2" id="sophomore" value="2" />
<label for="sophomore">Sophomore</label>

<input type="radio" name="radio3" id="junior" value="3" />
<label for="junior">Junior</label>

<input type="radio" name="radio4" id="senior" value="4" />
<label for="senior">Senior</label>
</p>
</fieldset>
</form>

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.

Sample Dropdown Menu of Size=3


View the Code

<label for="Campus">Penn State Campus Menu</label>
<select name="Campus" id="Campus" size="3">
    <option value=""> </option>
    <option value="OZ::Abington Campus">Abington Campus (OZ)</option>
    <option value="AA::Altoona Campus">Altoona Campus (AA)</option>
...
</select>

 

Top of Page

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.

Color Choice Example

This form asks users to select a favorite color word and divides the list into types of blue-greens and types of reds.

View the Code

<label for="color">What is your favorite color?< /label>
<select name="color" id="color">
<optgroup label="Blue-Greens">

<option value="bgteal">Teal</option>
<option value="bgcyan">Cyan</option>
<option value="bgaqua">Aqua</option>

</optgroup>
<optgroup label="Reds">

<option value="rscarlet">Scarlet</option>
<option value="rvermillion">Vermillion</option>
<option value="rcrimson">Crimson</option>

</optgroup>

</select>
</form>

 

Top of Page

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 top to bottom, but if the default order is not the one needed, then the TABINDEX attribute can be used to manually set tab order. For example:

Sample TABINDEX Code

<input type="text" id="textfield2" tabindex="2" >

 

Top of Page