USABLEANDACCESSIBLEFORMS

accessibility or Accessibility?

USABLEANDACCESSIBLEFORMS Structure FIELDSET LEGEND LABEL (for attribute = id attribute)

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

USABLEANDACCESSIBLEFORMS Usability MAXLENGTH OPTGROUP Mandatory fields

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

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

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

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

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”

USABLEANDACCESSIBLEFORMS Examples