Accessible forms

Scott Rippon
ITS: Web Resources and Development

Introduction

• Focus on relevant Web Content Accessibility Guidelines 1.0 (WCAG1.0) produced by W3C Web Accessibility Initiative (WAI)
  ( www.w3.org/WAI )
• Including a couple of other key form design issues.
• Is NOT a presentation on:
  • CGI-mailer
    ( www.its.monash.edu/web/resources/cgi-mailer.html ).
  • Theory of form design.

Relevant WCAG1.0 checkpoints

• www.w3.org/TR/WCAG10/full-checklist.html
• Priority 2:
  • Checkpoint 10.2
  • Checkpoint 12.4
  • Checkpoint 12.3
• Priority 3:
  • Checkpoint 9.4 *
  • Checkpoint 9.5 *
  • Checkpoint 10.4 *

* Our recommendations differ from WCAG1.0.

Checkpoint 10.2/12.4

• 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  www.w3.org/TR/WCAG10/wai-pageauth.html#tech-unassociated-labels
• 12.4 Associate labels explicitly with their controls.
  www.w3.org/TR/WCAG10/wai-pageauth.html#tech-associate-labels
• Use:
  • Correct positioning of text and form control.
  • LABEL element.

Correctly positioning form controls

• Make sure that:
  • For text fields the text is located on the left.
  • For radio buttons and checkboxes the text is located on the right.
• Why?
• Ensures the correct read order in screen readers. Essential for older readers that don't recognise the LABEL element.
• Makes content easier to scan, improving readability for sighted users.

Correctly positioning form controls (continued)