Download 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 form mode do not read any text except the form elements
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">
Use normal text for labels
- 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 users can see everything they have entered.
Use fieldset tags to make logical groupings
- This is 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.
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>
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>
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>
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>
- Label text should go to the right of the radio buttons and checkboxes.
<label><input type="radio"> Label Text</label>
Applications may need horizontal layouts
- Very long forms with complicated data
- Some usability guidance available, but will require usability testing
- Luke Wroblewski
Senior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designs
Forms blog at http://www.lukew.com/ff
- Mike Cherim
"Freelance accessible web developer" and blogger on coding for standards compliance and accessibility.
Blog at http://green-beast.com/blog/