Your SlideShare is downloading. ×
  • Like
Usable and Accessible Web Forms
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Usable and Accessible Web Forms


Presentation for the Mass.Gov Portal User Group meeting on October 9, 2007

Presentation for the Mass.Gov Portal User Group meeting on October 9, 2007

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms
  • 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=&quot; name &quot;> Label Text <input name= &quot; name &quot;></label>
      • <label for=&quot; name &quot;> Label Text </label> <input name= &quot; name &quot;>
  • 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 &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>
  • 9. 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>
  • 10. 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>
  • 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=&quot;radio&quot;> 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 Wroblewski Senior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designs Forms blog at
    • Mike Cherim &quot;Freelance accessible web developer&quot; and blogger on coding for standards compliance and accessibility. Blog at
    • And of course, Mass.Gov/accessibility
  • 15. Thank you!