Forms
Fri, 03/27/2009 - 17:04 — kvl5046
Inaccessible Form with Tables:
This Page
- Synopsis
- The LABEL Tag
- Optimal Layout for Forms
- FIELDSET and LEGEND
- OPTIONGROUP in Drop Down Menus
- Tab Order
- SIZE in SELECT Dropdown Menus
- Links to Additional Tutorials
Synopsis
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.
Required Field
-
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.
-
The Required Field indicator (e.g. "Required) should be included in the LABEL tag so it can be accessed by a screen reader.
Layout
-
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.
-
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.
-
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".
-
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 indormation.
-
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.
Other
-
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.
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
See the Code - Alternate 1
<label><b> Your Name </b>
<input type="text" name="yourname">
</label>
See the Code - Alternate 2
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">
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
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
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
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 TABORDER attribute can be used to manually set tab order. For example:
Sample TABORDER Code
<input type="text" name="textfield2" taborder="2" >
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
View the Code
<fieldset>
<legend>Identify Current Student Year</legend>
<label><input type="radio" name="class" id="Freshman" value="1">Freshman</label><br />
<label><input type="radio" name="class" id="Sophomore" value="2">Sophomore</label><br />
<label><input type="radio" name="class" id="Junior" value="3">Junior</label><br />
<label><input type="radio" name="class" id="Senior" value="4">Senior</label>
</fieldset>
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
<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>
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>What is your favorite color?
<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>
</label>
</form>
Links to Additional Tutorials
- Printer-friendly version
- Login or register to post comments