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.
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. "
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."
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.
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.
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.
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.
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".
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.
If you include a SELECT drop-down menu with a long list of choices, uses the SIZE= attribute to add vertical height.
The OPTIONGROUP can be used to divide a long list in a drop down menu into catagories.
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.
The Required Field indicator (e.g. "Required) should be included in the LABEL tag so it can be accessed by a screen reader.
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.
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."
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.
If the Submit button is an image, then make sure the ALT tag says "Submit".
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.
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.
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.
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.
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>
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.
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]
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]
NOTE: You can use style sheets to make sure label text is always the same width.
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.
<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>
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.
<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>
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.
This form asks users to select a favorite color word and divides the list into types of blue-greens and types of reds.
<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>
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 TABORDER attribute can be used to manually set tab order. For example:
<input type="text" id="textfield2" taborder="2" >