1 / 11

USABLE AND ACCESSIBLE FORMS

USABLE AND ACCESSIBLE FORMS. USABLE AND ACCESSIBLE FORMS. a ccessibility or A ccessibility?. USABLE AND ACCESSIBLE FORMS. Structure FIELDSET LEGEND LABEL (for attribute = id attribute). USABLE AND ACCESSIBLE FORMS. Structure Wrap label/element pairs in a block-level element

nathan-mooney
Download Presentation

USABLE AND ACCESSIBLE FORMS

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