Your SlideShare is downloading. ×
WAI-ARIA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WAI-ARIA

1,246
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,246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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