Create Forms with correctly placed labels and logical tab order:

How do you do this?

• Place form text labels next to its element (if using a table to layout your form, place labels in the same table cell with its form element):
• text boxes, text areas, combo boxes (pick lists) - place label to the LEFT or BEFORE its element
• radio buttons, check boxes - place label to the RIGHT or AFTER its element
• Create a logical tab order through links, form controls, and objects (WCAG Checkpoint 9.4)
• Make sure forms can be accessed with a keyboard (WCAG Checkpoint 9.5)
• Make sure form elements are associated with the correct text (using <label> tag and the 'for' parameter) (WCAG Checkpoint 11.3)
• Group form elements in large forms (WCAG Checkpoint 12.3)

WHY? A user using a screen reader will hear the correct label with its form element. Laying out a form in this way will also result in a more logical form for all users. People navigating throught a form with the keyboard or alternative pointing device will be able to input the right information into the right form field.

• W3C Web Content Accessibility Guideline 9
• WebAIM tips on creating accessible forms

• Return to Index of Accessibility Tips
• One Page Checklist of 'W3C Quick Tips' for Accessibility

These tips may be applied to any web site or Vista course, and are derived from the World Wide Web Consortium (W3C) Web Accessibility Initiative but are not intended to reinterpret them. Web developers are encouraged to access the W3C Web Content Accessibility Guidelines Version 1.0, directly.