Making Web Forms Accessible

Thanks to Web Accessibility in Mind (WebAIM)—most of the material below is reproduced directly from the expert advice offered on the WebAIM site.

Add a Label to Every Field

Each form field should have a unique ID, and text associated with that field should be marked as a label "for" that ID.

for="name">Name:
id="name" type="text" name="textfield" />

When you have several associated form elements, they can be grouped together by something called a fieldset. Each fieldset should have a legend. The legend is the text that describes the associated group of form items.


Choose a shipping method:

Overnight


Two day


Ground

See Creating Accessible Forms for more samples and detailed information.

Mark Up Tables for Accessibility

When presenting information or forms within a table, remember that rows will be read left-to-right and columns will be read top-to-bottom. Be sure related form elements (fields and labels) are adjacent to each other.

When appropriate for the data, designate row and/or column headers using the 

 tag, and associate the cells with the appropriate headers using the scope attribute.


Shelly's Daughters


scope="col">Name

 scope="col">Age
scope="col">Birthday



scope="row">Jackie
5
April 5



scope="row">Beth
8
January 14


See Creating Accessible Tables for more samples and detailed information.

Review the Instructions

Use a header to call out any instructions necessary to use a form. Be sure the instructions do not rely upon visual cues, and that all necessary form functions are accessible through keyboard commands.

For more information contact web@uua.org.