1. USABLEANDACCESSIBLEFORMS

2. 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/