SECTION 508 - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues..
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.
Labels should be placed above or to the left of the corresponding element. All elements should be labeled.
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.
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.
Required fields should be indicated with a symbol or code such as an "(R)", not by a change in the field color or boldness. A key such as "(R) = Required Field" should also be included.
If you include a SELECT drop-down menu with a long list of choices, uses the SIZE= attribute to add vertical height.
Newer HTML tags including FIELDSET , LABEL and LEGEND can provide additional accessibility support for recent browsers including the latest versions of Internet Explorer, Netscape, Mozilla, Opera and Safari.
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.
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. For example
<label><b> Your Name </b>
<input type="text" name="yourname">
</label>
Use Alternate 2 if your layout requires the label and the field to be separated in the HTML.
<labelfor "yourname"> <b> Your Name </b> </label>
<input type="text" name="yourname"id="yourname">
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.
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 form, 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" name="textfield2" taborder="2" >
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.
<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>
In order to facilitate accessibility for screen readers, several new tags, LABEL , FIELDSET and LEGEND were included in the HTML specification and are supported by most recent browsers.
However, not all screen readers support them, so labelling sections with headers (H2, H3) may be a safer option.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.