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.
<input 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.
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight" />
<label for="overnight">Overnight</label><br />
<input id="twoday" type="radio" name="shipping" value="twoday" />
<label for="twoday">Two day</label><br />
<input id="ground" type="radio" name="shipping" value="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 <th> tag, and associate the cells with the appropriate headers using the scope attribute.
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.
This work is made possible by the generosity of individual donors and congregations. Please consider making a donation today.
Last updated on Wednesday, March 30, 2011.
- Chalice and UU Art
- Congregational Press Relations
- Civil Discourse
- GA Presentations
- UUA Monthly Bulletin