View
18
Download
4
Category
Preview:
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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/
Recommended