Download Usable and Accessible Web Forms ppt format of pug_071009_formaccessibility.ppt

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>

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

Primary Resources

Recommended Content

People also viewed...

You recently viewed...

Personalization is OFF. Your personal browsing history at Mass.gov is not visible because your personalization is turned off. To view your history, turn your personalization on.

Learn more on our .

*Recommendations are based on site visitor traffic patterns and are not endorsements of that content.