Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms

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 &quot;form mode&quot; 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>

Using a table makes it trickier to be sure you've correctly connected form fields with their labels.

Screen readers in &quot;form mode&quot; 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>

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=&quot; name &quot;> Label Text <input name= &quot; name &quot;></label> <label for=&quot; name &quot;> Label Text </label> <input name= &quot; name &quot;>

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=&quot; name &quot;> Label Text <input name= &quot; name &quot;></label>

<label for=&quot; name &quot;> Label Text </label> <input name= &quot; name &quot;>

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

Usability testing showed that using bold or italics in labels significantly slowed people down.

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

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

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.

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.

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

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

Put &quot;required&quot; 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>

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>

Put &quot;optional&quot; 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 &quot;required&quot; adds visual &quot;noise&quot; that make it more difficult to fill out the form. <label> Label Text (optional) <input></label>

If most fields are required, you only need to indicate the one or two that are optional.

Labeling all or most fields &quot;required&quot; adds visual &quot;noise&quot; that make it more difficult to fill out the form.

<label> Label Text (optional) <input></label>

Use a checkbox if only two choices If there are only two choices (for instance &quot;yes&quot; or &quot;no&quot;) 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=&quot;checkbox&quot;> Add me to your email list. (optional) </label>

If there are only two choices (for instance &quot;yes&quot; or &quot;no&quot;) 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=&quot;checkbox&quot;> Add me to your email list. (optional) </label>

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>

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>

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

Label text should go to the right of the radio buttons and checkboxes, however.

<label><input type=&quot;radio&quot;> Label Text </label>

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

Very long forms with complicated data

Some usability guidance available, but will require usability testing!

Primary resources Luke Wroblewski Senior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designs http://www.lukew.com/ Forms blog at http://www.lukew.com/ff Mike Cherim &quot;Freelance accessible web developer&quot; 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

Luke Wroblewski Senior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designs http://www.lukew.com/ Forms blog at http://www.lukew.com/ff

Mike Cherim &quot;Freelance accessible web developer&quot; 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

Thank you!