Accessibility in web Forms

Resources

WebAIM tutorial on accessible forms

Set up Dreamweaver (Edit>Preferences>Accessibilty) to prompt for accessibility information whenever you create a form or a form element.

When you create a new form element, Dreamweaver will ask for:

• an id for the form object
• a label that will identify the meaning of the form object
• a style for the label tag - the one below is
  attach label tag with a "for" attribute
• access key -- sets up a keyboard equivalent (one letter) and the Alt key (Windows) or the Control key (Macintosh) to select the form object in the browser.
• a tabindex -- if you set up a tabindex for one form element, you have to do it for all the form elements. Instead place the form elements in a logical order, with similar elements clustered together, and you won't need a tabindex.

The HTML code for this checkbox is:

<form id="form1" name="form1" method="post" action=""> <p> <label for="email">Sign up for email</label> <input type="checkbox" name="email" id="email"/> </p> </form>

top

10 Sharp Design on Form Accessibility

This more advanced tutorial even tells you how to indicate which fields are required. See
http://www.10sharpdesign.com/accessibility/forms/4-required-fields.html

This tutorial also includes valuable tips to make forms more usable as well as more accessible.
http://www.10sharpdesign.com/accessibility/forms/9j-usability.html

top