Accessible Forms

Page address:

Building accessible forms involves the proper use of tab indexes, fieldsets and legends, implicit/explicit labels, and the optgroup tag within select menus.

Forms should include

  • logical form layout. Labels help, but some layouts, especially using multi-column tables, can cause problems.
  • Layout considerations:
    • labels should be to the right of checkboxes and radio buttons, and to the left of everything else. Or rather, in the HTML the label text should appear after checkboxes and radio buttons. It not only makes for cleaner-looking layout, it's what assistive technology expects. Using <label> may lessen the need for this guideline.
  • Avoid "jump menus" without a "go" button. These are select menus that are used for navigation with JavaScript to change the page when an option is selected. Don't use them. It's disruptive and causes problems for keyboard navigation. There should be a submit button.
  • Add title attributes to form fields, especially to text input boxes (<input type="text" ... /> and <textarea>). There is no longer a need for placeholder characters, but the title attribute can help: <input type="text" size="20" id="searchTerm" title="Search Term"/>
  • When using JavaScript for form validation, when there's an error set focus on the element you're creating an alert for. For example, if you have an alert warning that the required field "name" needs to be filled in, set focus on the "name" field.