HTML5 and ARIA for Meeting WCAG 2.0 Success Criteria

Jon Gunderson, Ph.D.

Division of Disability Resources and Educational Services

University of Illinois

jongund@illinois.edu

IAAP Webinar

Presentation Home Page

Slides

  1. Overview
  2. Web Content Accessibility Guidelines 2.0
  3. Accessible Rich Internet Applications (ARIA) 1.0
  4. HTML 5
  5. HTML 5: main element
  6. Landmarks, HTML5 Section Elements and Headings
  7. ARIA Landmarks
  8. Landmark Example: Disability Resources and Educational Services (DRES) Website
  9. Pitfalls Observed in Initial Use of Landmarks
  10. DRES Home Page Landmarks
  11. DRES Home Page NVDA showing List of Landmarks
  12. DRES Informational Page
  13. DRES Informational Page showing NVDA List of Landmarks
  14. MAIN Landmark Design Patterns
  15. NAVIGATION Landmark Design Patterns
  16. Landmark Design Patterns
  17. Use of Headings (H1-H6) in ARIA Landmarks
  18. Landmark Example: Campus Information Technology and Education Services (CITES) Website
  19. CITES Home Page NVDA showing List of Landmarks
  20. Landmark Example: International Business Machines (IBM)
  21. IBM Home Page NVDA showing List of Landmarks
  22. HTML5 Section Elements
  23. HTML5 to ARIA Mappings and Implementation Information
  24. Headings in HTML5 are Designed for Outlining Content
  25. HTML5 Headings Outline Example
  26. Extensions for Viewing HTML5 Outlines
  27. What About the Article Role and the Article Element?
  28. Screen Reader Support
  29. Link Usability 101
  30. WCAG 2.0 Link Requirements
  31. WCAG 2.0 Technique Examples
  32. Accessible Name Calculation
  33. Defining Link Context Information
  34. WCAG Heading Context Example
  35. NVDA showing List of Links with No Context Markup
  36. Using aria-describedby to define context
  37. NVDA showing List of Links with ARIA-DESCRIBEDBY identifying context
  38. Using aria-labelledby to define accessible name
  39. NVDA showing List of Links with ARIA-LABELLEDBY identifying context
  40. Link Keyboard Focus Styling
  41. WCAG 2.0 Requirements for Forms and Form Controls (Level A and AA)
  42. ARIA and HTML5 form controls
  43. Form Techniques: Example 1
  44. Form Techniques: Example 2
  45. Form Techniques: Example 3
  46. OpenAjax Accessibility Task Force
  47. OpenAjax Evaluation Library Rulesets
  48. AInspector Sidebar for Firefox
  49. Functional Accessibility Evaluator (FAE) 2.0