Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

WAI-ARIA

on

  • 1,657 views

 

Statistics

Views

Total Views
1,657
Views on SlideShare
1,656
Embed Views
1

Actions

Likes
0
Downloads
11
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WAI-ARIA Presentation 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 tab slider menu toolbar 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 tab menu math slider article tooltip heading tree 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 form main navigation complementary 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