Web Accessibility:Forms

Web & Databases

• Personal www4 websites
• Engr People websites
• Research Websites
• Infrastructure
• Requests
• Databases
• Site Statistics
• WebTest Sites
• Student Organizations
• Web Accessibility
  • Layout and Structure
  • Presentation and Styles
  • Navigation
  • Forms
  • Scripting
  • Electronic Documents
  • Non-Textual Content
  • Validation Tools

• Place labels for text controls adjacent and left of the form control
• Place the labels for radio buttons and check box to the right of the form control
• Do not use structural elements like table cells to separate the label from the form control.
• Explicitly associate the label with the form control
  • Set each form control with a unique id value
  • Use the <Label for="form_control_id_value" > to explicitly associated the label with the form control.
• Avoid using images as labels for form controls, if they are used, be sure to use them within the <label> element and include the alt attribute
• Place a text prompt in the text entry and selection controls
• Use title attribute to increase functionality by giving additional supplemental information for the form control
• Organize form controls into related groups. Use <fieldset> element to group form controls and the <legend> element to label the group
• If needed use <tabindex> to establish the tab order of the entries
• Use CSS to control the visual appearance of the form

---

Resources

[1] IBM Web Guidelines- Forms

[2] WEBAIM- Creating Accessible Forms

[3] Jim Thatcher- Accessible Forms

[4] Web Standards- Forms

[5] Accessify.com- Acessibile Form Builder

[6] Web Semantics- Accessible Forms