Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms
Stick to the standard HTML form tags <ul><li>Using a table makes it trickier to be sure you've correctly connected form fi...
Be sure to use the LABEL tag <ul><li>There should be a LABEL for every input (text fields and boxes, radio buttons, checkl...
Use normal text for labels  <ul><li>Usability testing showed that using bold or italics in labels significantly slowed peo...
Text field size should make sense <ul><li>Use shorter text fields for short things, and longer fields for longer things </...
Use FIELDSET tags to make logical groupings <ul><li>This particularly important as the form gets longer or complicated. </...
Use the LEGEND tag with FIELDSET <ul><li>The legend is like a subtitle within a form to tell users what the next cluster o...
Put &quot;required&quot; as part of the LABEL text <ul><li>Users are able to fill out the forms more quickly when words ar...
Put &quot;optional&quot; as part of the LABEL text <ul><li>If most fields are required, you only need to indicate the one ...
Use a checkbox if only two choices <ul><li>If there are only two choices (for instance &quot;yes&quot; or &quot;no&quot;) ...
Use a vertical layout <ul><li>Put the labels above the inputs for text fields and boxes, with everything in a vertical, le...
Use a vertical layout (cont.) <ul><li>Label text should go to the right of the radio buttons and checkboxes, however. </li...
Applications may need horizontal layouts <ul><li>Very long forms with complicated data </li></ul><ul><li>Some usability gu...
Primary resources <ul><li>Luke Wroblewski Senior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Found...
Thank you!
Upcoming SlideShare
Loading in …5
×

Usable and Accessible Web Forms

1,639 views

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,639
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Usable and Accessible Web Forms

  1. 1. Sarah Bourne Chief Technology Strategist Usable and Accessible Web Forms
  2. 2. Stick to the standard HTML form tags <ul><li>Using a table makes it trickier to be sure you've correctly connected form fields with their labels. </li></ul><ul><li>Screen readers in &quot;form mode&quot; do not read any text except the form elements. </li></ul><ul><ul><ul><li><form></form> </li></ul></ul></ul><ul><ul><ul><li><fieldset></fieldset> </li></ul></ul></ul><ul><ul><ul><li><legend></legend> </li></ul></ul></ul><ul><ul><ul><li><label></label> </li></ul></ul></ul><ul><ul><ul><li><input> </li></ul></ul></ul><ul><ul><ul><li><select> </select> </li></ul></ul></ul><ul><ul><ul><li><optgroup></optgroup> </li></ul></ul></ul><ul><ul><ul><li><option></option> </li></ul></ul></ul><ul><ul><ul><li><textarea></textarea> </li></ul></ul></ul>
  3. 3. Be sure to use the LABEL tag <ul><li>There should be a LABEL for every input (text fields and boxes, radio buttons, checklists) in your form. </li></ul><ul><li>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. </li></ul><ul><ul><li><label for=&quot; name &quot;> Label Text <input name= &quot; name &quot;></label> </li></ul></ul><ul><ul><li><label for=&quot; name &quot;> Label Text </label> <input name= &quot; name &quot;> </li></ul></ul>
  4. 4. Use normal text for labels <ul><li>Usability testing showed that using bold or italics in labels significantly slowed people down. </li></ul>
  5. 5. Text field size should make sense <ul><li>Use shorter text fields for short things, and longer fields for longer things </li></ul><ul><li>The field should be long enough so they can see everything they have entered </li></ul>
  6. 6. Use FIELDSET tags to make logical groupings <ul><li>This particularly important as the form gets longer or complicated. </li></ul><ul><li>Logical clustering makes it easier for all users to fill out the form. </li></ul><ul><li>FIELDSET should especially be used for grouping sets of radio buttons and checkboxes. </li></ul>
  7. 7. Use the LEGEND tag with FIELDSET <ul><li>The legend is like a subtitle within a form to tell users what the next cluster of fields is about. </li></ul><ul><li>Screen readers include the legend when reading the field labels, so the text should be short and concise. </li></ul><ul><li>For short forms, use a single FIELDSET of all the inputs so you can use the LEGEND tag </li></ul>
  8. 8. Put &quot;required&quot; as part of the LABEL text <ul><li>Users are able to fill out the forms more quickly when words are used than when fields are marked with symbols or colors. </li></ul><ul><li>Ensures that they will be included by screen readers in form mode. </li></ul><ul><ul><li><label> Label Text (required) <input></label> </li></ul></ul>
  9. 9. Put &quot;optional&quot; as part of the LABEL text <ul><li>If most fields are required, you only need to indicate the one or two that are optional. </li></ul><ul><li>Labeling all or most fields &quot;required&quot; adds visual &quot;noise&quot; that make it more difficult to fill out the form. </li></ul><ul><li><label> Label Text (optional) <input></label> </li></ul>
  10. 10. Use a checkbox if only two choices <ul><li>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. </li></ul><ul><li>Be sure it is an optional field so the unchecked state is allowed. </li></ul><ul><ul><li><label><input type=&quot;checkbox&quot;> Add me to your email list. (optional) </label> </li></ul></ul>
  11. 11. Use a vertical layout <ul><li>Put the labels above the inputs for text fields and boxes, with everything in a vertical, left-aligned stack: </li></ul><ul><ul><li>Easiest and faster to fill out </li></ul></ul><ul><ul><li>Simplest markup </li></ul></ul><ul><ul><li>Best accessibility </li></ul></ul><ul><ul><ul><li><label> Label Text<br> <input></label> </li></ul></ul></ul>
  12. 12. Use a vertical layout (cont.) <ul><li>Label text should go to the right of the radio buttons and checkboxes, however. </li></ul><ul><ul><li><label><input type=&quot;radio&quot;> Label Text </label> </li></ul></ul>
  13. 13. Applications may need horizontal layouts <ul><li>Very long forms with complicated data </li></ul><ul><li>Some usability guidance available, but will require usability testing! </li></ul>
  14. 14. Primary resources <ul><li>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 </li></ul><ul><li>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/ </li></ul><ul><li>And of course, Mass.Gov/accessibility </li></ul>
  15. 15. Thank you!

×