HTML5 and ARIA Design Patterns

Jon Gunderson

University of Illinois

Presentation Home Page


  1. Overview
  2. ARIA Landmarks
  3. Landmark Example: Disability Resources and Educational Services (DRES) Website
  4. Pitfalls Observed in Intial Use of Landmarks
  5. DRES Home Page Landmarks
  6. MAIN Landmark Design Patterns
  7. NAVIGATION Landmark Design Patterns
  8. Landmark Design Patterns
  9. Use of Headings (H1-H6) in ARIA Landmarks
  10. Landmark Example: Campus Information Technology and Education Services (CITES) Website
  11. Landmark Example: International Business Machines (IBM)
  12. HTML5 Section Elements
  13. HTML5 to ARIA Mappings and Implementation Information
  14. Headings in HTML5 are Designed for Outlining Content
  15. HTML5 Headings Outline Example
  16. Extensions for Viewing HTML5 Outlines
  17. What About the Article Role and the Article Element?
  18. HTML5 Video Element Accessibility
  19. ARIA for HTML form controls
  20. Complex Labeling Example using aria-labelledby
  21. Complex Labeling Example using aria-label
  22. Using aria-required, aria-invalid and aria-describedby in Forms
  23. aria-describedby to Provide Link Context
  24. HTML5 Form Accessibility
  25. Examples of Web 2.0 Applications and User Interface Libraries
  26. Web 2.0 Accessibility
  27. Accessible Rich Internet Applications (ARIA) Basics
  28. Tabindex and keyboard focus
  29. Example Widgets
  30. First Step: Use ARIA Landmarks
  31. Second Step: Use HTML5 video, audio and track elements for media
  32. Third Step: Use ARIA to improve the accessibility of Forms and Links
  33. Fourth Step: Use Accessible Widget User Interface Libraries
  34. ARIA Resources
  35. Web Best Practices Working Group
  36. OpenAjax Accessbility Task Force
  37. Tools using OpenAjax Library