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/