Forms: Labeling, Instructions and Error Feedback

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. JAWS Form Control Support
7. NVDA Form Control Support
8. Voice Over Form Control Support
9. Pizza Order Form: No Labels
10. Pizza Order Form: Label Element by Reference
11. Pizza Order Form: Label Encapsulation
12. Pizza Order Form: Fieldset/Legend
13. Pizza Order Form: Focus Styling
14. Form Evaluation and Inspection Tools and Rules
15. Pizza Order Form: Instructions using tabindex
16. Pizza Order Form: Instructions using label
17. Pizza Order Form: Instructions using aria-describedy
18. Pizza Order Form: Required Form Controls
19. Pizza Order Form: aria-labelledby
20. Pizza Order Form: aria-label
21. Billing/Shipping Form: No group identification
22. Billing/Shipping Form: Fieldset/Legend
23. Pizza Service Survey: no labels
24. Pizza Service Survey: aria-labelledby
25. Form Control Labeling Technique Summary
26. Error Feedback: Alert Box
27. Error Feedback: List of Errors
28. Popup Error Message Example Summary
29. Popup Error Example 1: no reference to error message
30. Popup Error Example 1: Assistive Technology Support
31. Popup Error Example 2: label[for] references error message
32. Popup Error Example 2: Assistive Technology Support
33. Popup Error Example 3: aria-describedby reference to error message
34. Popup Error Example 3: Assistive Technology Support
35. Popup Error Example 4: title attribute used for error message
36. Popup Error Example 4: Assistive Technology Support
37. Popup Error Example 5: aria-labelledby attribute used for error message
38. Popup Error Example 6: aria-label attribute used for error message
39. Popup Error: Best Practices