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

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

3.
•
–
–
–

4.
•
–
–
–
•

5.
•
•
•
–
–
–

6.
•
–
–
–
–
•
–
–
–
–
–
–
•
–

7.
ARIA
States &
Roles
Properties

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

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

10.
•
–

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

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

13.
•
–
•
–
•
•

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

15.
•
–
–
–
–

16.
<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>

17.
•
–
–
•

18.
•
–
–
–
•
–

19.
• •
–
– –
–
– –
–
–
–
–
•
–
–

20.
•
–
•
–
•
–

21.
•
•
•
•
•
•
•

22.
Thank you!
Are your sites accessible?