1 / 11

Building Usable and Accessible Forms: Best Practices and Guidelines

Learn essential tips for creating user-friendly web forms that comply with accessibility standards. Improve usability by implementing structure, styling, and enhancements. Enhance accessibility with proper labeling, color usage, and error handling. Evaluate common sense practices and user expectations. Explore examples for inspiration.

nathan-mooney
Télécharger la présentation

Building Usable and Accessible Forms: Best Practices and Guidelines

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

  2. USABLEANDACCESSIBLEFORMS accessibility or Accessibility?

  3. USABLEANDACCESSIBLEFORMS Structure • FIELDSET • LEGEND • LABEL (for attribute = id attribute)

  4. USABLEANDACCESSIBLEFORMS Structure • Wrap label/element pairs in a block-level element • Style all dimensions in EMs • Use BUTTON, not INPUT TYPE=“SUBMIT” • Don’t use CSS to set INPUT widths - use SIZE

  5. USABLEANDACCESSIBLEFORMS Usability • MAXLENGTH • OPTGROUP • Mandatory fields

  6. USABLEANDACCESSIBLEFORMS Accessibility • SPANs inside LABELs • Do not rely on colour alone to communicate information • Suitable INPUT sizes • Updated TITLE and clear error message

  7. USABLEANDACCESSIBLEFORMS Enhancements (JavaScript) • Indication of current focus • Pop-up help • Alternative input methods • Auto-selection of default text

  8. USABLEANDACCESSIBLEFORMS Common Sense • Less than 5 options - use RADIO • Yes/No question - use CHECKBOX

  9. USABLEANDACCESSIBLEFORMS Common Sense • Less than 5 options - use RADIO • Yes/No question - use CHECKBOX

  10. USABLEANDACCESSIBLEFORMS What They Expect • Grey out and disable the SUBMIT button • Don’t style form widgets any more than you have to • Don’t use INPUT TYPE=“IMAGE”

  11. USABLEANDACCESSIBLEFORMS Examples www.wufoo.com www.websemantics.co.uk/tutorials/accessible_forms/

More Related