Sarah Bourne Chief Technology Strategist

1. Usable and Accessible Web Forms Sarah BourneChief Technology Strategist

2. Stick to the standard HTML form tags • Using a table makes it trickier to be sure you've correctly connected form fields with their labels. • Screen readers in "form mode" do not read any text except the form elements. <form></form> <fieldset></fieldset> <legend></legend> <label></label> <input> <select> </select> <optgroup></optgroup> <option></option> <textarea></textarea>

3. Be sure to use the LABEL tag • There should be a LABEL for every input (text fields and boxes, radio buttons, checklists) in your form. • Wrap your INPUT tag with the LABEL as well as the text to be used for the label, in addition to using the FOR attribute. <label for="name">Label Text<input name= "name"></label> <label for="name">Label Text</label> <input name= "name">

4. Use normal text for labels • Usability testing showed that using bold or italics in labels significantly slowed people down.

5. Text field size should make sense • Use shorter text fields for short things, and longer fields for longer things • The field should be long enough so they can see everything they have entered

6. Use FIELDSET tags to make logical groupings • This particularly important as the form gets longer or complicated. • Logical clustering makes it easier for all users to fill out the form. • FIELDSET should especially be used for grouping sets of radio buttons and checkboxes.

7. Use the LEGEND tag with FIELDSET • The legend is like a subtitle within a form to tell users what the next cluster of fields is about. • Screen readers include the legend when reading the field labels, so the text should be short and concise. • For short forms, use a single FIELDSET of all the inputs so you can use the LEGEND tag

8. Put "required" as part of the LABEL text • Users are able to fill out the forms more quickly when words are used than when fields are marked with symbols or colors. • Ensures that they will be included by screen readers in form mode. <label>Label Text (required)<input></label>

9. Put "optional" as part of the LABEL text • If most fields are required, you only need to indicate the one or two that are optional. • Labeling all or most fields "required" adds visual "noise" that make it more difficult to fill out the form. <label>Label Text (optional)<input></label>

10. Use a checkbox if only two choices • If there are only two choices (for instance "yes" or "no") use a check box with an explanatory label instead of radio buttons. • Be sure it is an optional field so the unchecked state is allowed. <label><input type="checkbox"> Add me to your email list. (optional)</label>

11. Use a vertical layout • Put the labels above the inputs for text fields and boxes, with everything in a vertical, left-aligned stack: • Easiest and faster to fill out • Simplest markup • Best accessibility <label>Label Text<br><input></label>

12. Use a vertical layout (cont.) • Label text should go to the right of the radio buttons and checkboxes, however. <label><input type="radio"> Label Text</label>

13. Applications may need horizontal layouts • Very long forms with complicated data • Some usability guidance available, but will require usability testing!

14. Primary resources • Luke WroblewskiSenior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designshttp://www.lukew.com/Forms blog at http://www.lukew.com/ff • Mike Cherim"Freelance accessible web developer" and blogger on coding for standards compliance and accessibility.http://green-beast.com/Blog at http://green-beast.com/blog/ • And of course, Mass.Gov/accessibility

15. Thank you!