Download presentation
Presentation is loading. Please wait.
Published byDaniella Hunter Modified over 8 years ago
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/
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.