1 / 15

Sarah Bourne Chief Technology Strategist

Usable and Accessible Web Forms. Sarah Bourne Chief Technology Strategist. 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.

gerd
Télécharger la présentation

Sarah Bourne Chief Technology Strategist

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Usable and Accessible Web Forms Sarah BourneChief Technology Strategist

  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="name">Label Text<input name= "name"></label> <label for="name">Label Text</label> <input name= "name">

  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 "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>

  9. 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>

  10. 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>

  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="radio"> 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 WroblewskiSenior Principal, Product Ideation & Design at Yahoo! Inc. and Principal & Founder, LukeW Interface Designshttp://www.lukew.com/Forms blog at http://www.lukew.com/ff • Mike Cherim"Freelance accessible web developer" and blogger on coding for standards compliance and accessibility.http://green-beast.com/Blog at http://green-beast.com/blog/ • And of course, Mass.Gov/accessibility

  15. Thank you!

More Related