Home

Forms: Labeling, Instructions and Error Feedback

Jon Gunderson, Ph.D.

Division of Disability Resources and Educational Services

College of Applied Health Sciences

University of Illinois at Urbana-Champaign

E-mail: jongund@illinois.edu

Slides

  1. Forms Overview
  2. WCAG 2.0 Requirements for Forms and Form Controls (Level A and AA)
  3. ARIA and HTML5 form controls
  4. Important Concepts: Role and Accessible Name
  5. Advantages of using Label Element
  6. Basic Screen Reader Commands related to Forms
  7. Pizza Order Form: No Labels
  8. Pizza Order Form: Label Element by Reference
  9. Pizza Order Form: Label Encapsulation
  10. Pizza Order Form: Fieldset/Legend
  11. Pizza Order Form: Focus Styling
  12. Form Evaluation and Inspection Tools and Rules
  13. Pizza Order Form: Instructions using tabindex
  14. Pizza Order Form: Instructions using label
  15. Pizza Order Form: Instructions using aria-describedy
  16. Pizza Order Form: Required Form Controls
  17. Pizza Order Form: aria-labelledby
  18. Pizza Order Form: aria-label
  19. Billing/Shipping Form: No group identification
  20. Billing/Shipping Form: Fieldset/Legend
  21. Pizza Service Survey: no labels
  22. Pizza Service Survey: aria-labelledby
  23. Form Control Labeling Technique Summary
  24. Error Feedback: Alert Box
  25. Error Feedback: List of Errors
  26. Popup Error Feedback Example
  27. Popup Error Feedback: Label element, aria-describedby, aria-controls and status
  28. Popup Error Feedback: aria-labelledby, aria-controls and status
  29. Popup Error Feedback: Label element, aria-label, aria-controls and status