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






<select> </select>




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