WAI-ARIA

1,746 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WAI-ARIA

  1. 1. WAI-ARIA othree@MozTW
  2. 2. Web 1.0
  3. 3. HyperText Markup Language
  4. 4. Designed For Document
  5. 5. Web 2.0
  6. 6. RIAs Rich Internet Applications
  7. 7. Leak of UI Elements Widgets
  8. 8. tree slider toolbar tab menu dialog
  9. 9. Problems • Simulate custom widgets • No semantic • Assistive Technology can’t access real meaning
  10. 10. Dynamic Contents AJAX
  11. 11. Problem • Assistive Technology don’t get mentioned while content changes
  12. 12. WAI-ARIA The Solution
  13. 13. Accessible Rich Internet Applications
  14. 14. WAI-ARIA • Bridge between HTML and Widgets
  15. 15. How?
  16. 16. Example <input type="image" src="thumb.gif" alt="Effectiveness" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 percent" aria-labelledby="leffective">
  17. 17. Example <input type="image" src="thumb.gif" alt="Effectiveness" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 percent" aria-labelledby="leffective">
  18. 18. Keyboard Navigation Role State & Properties
  19. 19. Keyboard Navigation • Redefine tabindex
  20. 20. Role • What this is
  21. 21. State & Properties • State (checked, selected, expanded) • Datas (user input value)
  22. 22. Tabindex • Allowed only in form elements
  23. 23. Redefined Tabindex • Allow in all viewable elements • tabindex = 0 → in native tab order • tabindex = -1 → can’t access vi tab
  24. 24. Keyboard Access • All actions should be able to access by keyboard
  25. 25. Roles alertdialog menu slider tooltip tree tab math article heading separator
  26. 26. State • aria-checked, aria-selected ...etc • No more custom attribute on DOM node • No more unnecessary class name
  27. 27. Properties • aria-label • aria-owns • aria-required • aria-valuenow • ...etc
  28. 28. WAI-ARIA • Bridge between HTML and Widgets • And notice content change to assistive technology
  29. 29. Live Region • aria-live • off • polite • assertive
  30. 30. Other Live Attributes • aria-atomic • aria-busy • aria-relevant
  31. 31. When to Use ?
  32. 32. Start Using WAI-ARIA Today
  33. 33. Almost All AT/Browser Supports
  34. 34. Even on Simple Page
  35. 35. Landmark Roles
  36. 36. banner main complementary form navigation search
  37. 37. Properties
  38. 38. aria-required aria-labelledby aria-owns ...
  39. 39. What WAI-ARIA not is
  40. 40. Need Implement • Not web form widgets • You need implement behaviors yourself
  41. 41. How to implement a datepicker with keyboard access ?
  42. 42. Authoring Practice
  43. 43. one more thing
  44. 44. RDFa
  45. 45. RDF Resource Description Framework
  46. 46. Semantic Web 語意網
  47. 47. Human vs Machine
  48. 48. Otaku ????? Computer
  49. 49. Otaku needs Computer
  50. 50. What is “need” ? Computer Don’t Realize “need”
  51. 51. Framework to Describe All the Resources
  52. 52. RDFa attribute

×