Using HTML5 and Accessible Rich Internet Accessibility (ARIA) to Create Highly Accessible Web Resources

Jon Gunderson

University of Illinois

jongund@illinois.edu

Presentation Home Page

Slides

  1. Overview
  2. Web Content Accessibility Guidelines 2.0
  3. Web Content Accessibility Guidelines 2.0: Techniques
  4. Accessible Rich Internet Applications 1.0
  5. Accessible Rich Internet Applications 1.0: Implementation Guide for Developers
  6. Web Content Accessibility Guidelines 2.0: Technique Issues
  7. ARIA Landmarks
  8. Landmark Example: Disability Resources and Educational Services (DRES) Website
  9. Pitfalls Observed in Intial Use of Landmarks
  10. DRES Home Page Landmarks
  11. MAIN Landmark Design Patterns
  12. NAVIGATION Landmark Design Patterns
  13. Landmark Design Patterns
  14. Use of Headings (H1-H6) in ARIA Landmarks
  15. Landmark Example: Campus Information Technology and Education Services (CITES) Website
  16. Landmark Example: International Business Machines (IBM)
  17. HTML5 Section Elements
  18. HTML5 to ARIA Mappings and Implementation Information
  19. Headings in HTML5 are Designed for Outlining Content
  20. HTML5 Headings Outline Example
  21. Extensions for Viewing HTML5 Outlines
  22. What About the Article Role and the Article Element?
  23. Accessible Video/Audio Issues
  24. HTML5 Video Element Accessibility: Example
  25. Accessible Web Video Example: Captions and Audio Descriptions
  26. Accessible Web Video Example: Captions
  27. Accessible Web Video Example: University of Illinois Public Engagement
  28. Free Captioning Tool for Web Videos
  29. ARIA for HTML form controls
  30. Complex Labeling Example using aria-labelledby
  31. Complex Labeling Example using aria-label
  32. Using aria-required, aria-invalid and aria-describedby in Forms
  33. aria-describedby to Provide Link Context
  34. HTML5 Form Accessibility
  35. Examples of Web 2.0 Applications and User Interface Libraries
  36. Web 2.0 Accessibility
  37. Accessible Rich Internet Applications (ARIA) Basics
  38. Tabindex and keyboard focus
  39. Example Widgets
  40. Example Widget: Accessible Custom Checkbox Using ARIA
  41. First Step: Use ARIA Landmarks
  42. Second Step: Use HTML5 video, audio and track elements for media
  43. Third Step: Use ARIA to improve the accessibility of Forms and Links
  44. Fourth Step: Use Accessible Widget User Interface Libraries
  45. ARIA Resources
  46. OpenAjax Alliance Web Accessibility Evaluation Library
  47. OAA Accessibility Cache Inspector for Firefox
  48. AInspector for Firebug
  49. OAA Accessibility Cache Inspector for Firefox: Demonstration
  50. OpenAjax Alliance Accessibility Evaluation Library: Rules
  51. Status of the Tools
  52. Plans for the Future
  53. Web Best Practices Working Group
  54. OpenAjax Alliance Accessibility Task Force