Accessible Forms

Table of Contents

1. Priority
2. Description
3. More Info
4. Coding/Best Practices
5. Testing/QA
6. Search Engine Optimization (SEO)
7. W3C Guidelines

Priority:

Required

Short Discription:

Associate a label tag with all form fields, use fieldset to group related form elements together (radio buttons for example), avoid the use of dynamic combo boxes that automatically activate a highlighted option. User must be able to review all choices in a combo box by pressing up/down arrow keys, and tab between all form fields and understand their purpose (edit field, checkbox, etc.

More Info:

Forms are required to be accessible. Many forms are used in Ecommerce areas and must be accessible to be able to be used. Since recent law suits all seem to be directed at Ecommerce, it is very important that we make sure all forms are usable by people with disabilities.

Coding:

Best Practices:

Creating Accessible Forms

Using FIELDSET and LEGEND Tags to Improve Accessibility

Using Taborder and Tabindex to Create Keyboard Accessibility

Using a Dropdown Select List to Change Dynamic Content on a Page

Using CSS to Hide Audible Text Off The Screen

Using the ARIA REQUIRED STATE to Create Accessible Form Fields

1. Use TABINDEX to create a logical tab order to each form. It is good practice to specify a tab order to form fields. It may not always be necessary but should be used to create an explicit method for moving through the form.

2. Each INPUT tag within a FORM MUST have a LABEL tag. Use ID in the input tag and FOR in the label. See the example below

3. It is good practice to provide keyboard shortcuts using the accesskey attribute to important links including those in client-side image maps, form controls, and groups of form controls.

<FORM action="submit" method="post">
<P>
<LABEL for="user" accesskey="U">name</LABEL>
<INPUT type="text" id="user">
</FORM>

4. Divide large blocks of information into more manageable groups where natural and appropriate. When form controls can be grouped into logical units, use the FIELDSET element and label those units with the LEGEND element.

5. Avoid the use of dynamic combo boxes that automatically activate a highlighted option. User must be able to review all choices in a combo box by pressing up/down arrow keys.

6 .Hint:
label {font-weight:bold;cursor:hand:}
in your style sheet will make the entire label clickable, which is helpful when using radio buttons, or check boxes.

Testing:

• The best way to test with Jaws is to use Jaws Forms Mode and listen (Activate Jaws Forms Mode by moving focus to a form field and pressing the Enter Key. Jaws will say "Forms Mode" To exit Forms Mode, press the + key.).
• Once in Forms mode you should hear Jaws speak the Labels as you enter each text input field.
• You should hear Jaws speak the Fieldset Labels. If Jaws simply says "Edit". There is no label associated.
• You should be able to use the arrow keys to navigate Radio Buttons.
• You should be able to use the arrow keys to navigate Drop Down Select lists.
• You should be able to hear Jaws speak the Buttons Alt Attributes.

The AIS toolbar can also be used to test for FORM LABELs and FIELDSETs.

The AIS toolbar results look like this:

SEO:

TBD

W3C:

HTML Techniques for Web Content Accessibility Guidelines 1.0

Keyboard access to forms

Grouping form controls

Labeling form controls

Graphical buttons

Techniques for specific controls

Backward compatibility issues for forms