Web applications today are a challenge to make accessible because native HTML does not have the language to support the types of widgets added to Web pages. WAI-ARIA provides a way to add roles, states and properties to make RIA accessible to assistive technology such as screen readers.

3. •
•
•
–
–
–
•
–
© 2012 Interactive Accessibility 3

4. <div id="slider">
<div id="slider-thumb">
<img src="sliderbar.gif">
</div>
</div>

5. •
–
–
–

6. •
–
–
–
•

7. •
•
•
–
–
–

8. •
–
–
–
–
•
–
–
–
–
–
–
•
–

9. ARIA
States &
Roles
Properties

11. <a href=“link.html”
role=“button”>My button</a>
•
<button>My button</button>

12. <button role="heading“ aria-
level=“1”>text</button>
•
– <h1>text</h1>
•
–
–

13. •
–

14. <h1 role=“button”>heading
button</h1>
•
• <h1><span role=“button”>heading
button</span></h1>
<h1><button>heading
button</button></h1>

15. •
– What is the key
command to
• activate a button?
•
•
•
–
–

16. •
–
•
–
•
•

17. <div id="slider" tabindex="0" role="slider">
<div id="slider-thumb">
<img src="sliderbar.gif">
</div>
</div>

18. •
–
–
–
–

19. <div id="slider" title="Price" tabindex="0"
role="slider" aria-valuemin="1" aria-valuemax="
100" aria-valuenow="7" aria-label="Price">
<div id="slider-thumb">
<img src="sliderbar.gif">
</div>
</div>

20. •
–
–
•

21. •
–
–
–
•
–

22. • •
–
– –
–
– –
–
–
–
–
•
–
–

24. •
–
•
–
•
–

25. •
•
•
•
•
•
•

27. Thank you!
Are your sites accessible?