USABLE AND ACCESSIBLE FORMS
-
Upload
nathan-mooney -
Category
Documents
-
view
18 -
download
4
description
Transcript of USABLE AND ACCESSIBLE FORMS
USABLEANDACCESSIBLEFORMS
USABLEANDACCESSIBLEFORMS
accessibilityor
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
www.wufoo.com
www.websemantics.co.uk/tutorials/accessible_forms/