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

44. one more thing

45. RDFa

46. RDF
Resource Description Framework

47. Semantic Web
語意網

48. Human vs Machine

49. Otaku ????? Computer

50. Otaku needs Computer

51. What is “need” ?
Computer Don’t Realize “need”

52. Framework to
Describe All the
Resources

53. RDFa
attribute