Introduction to WAI-ARIA

10,607 views

Published on

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.

Published in: Technology
  • Be the first to comment

Introduction to WAI-ARIA

  1. 1. ••• – – –• – © 2012 Interactive Accessibility 3
  2. 2. <div id="slider"> <div id="slider-thumb"> <img src="sliderbar.gif"> </div></div>
  3. 3. • – – –
  4. 4. • – – –•
  5. 5. ••• – – –
  6. 6. • – – – –• – – – – – –• –
  7. 7. ARIA States &Roles Properties
  8. 8. <a href=“link.html” role=“button”>My button</a>• <button>My button</button>
  9. 9. <button role="heading“ aria- level=“1”>text</button>• – <h1>text</h1>• – –
  10. 10. • –
  11. 11. <h1 role=“button”>heading button</h1>•• <h1><span role=“button”>heading button</span></h1> <h1><button>heading button</button></h1>
  12. 12. • – What is the key command to • activate a button? • • • – –
  13. 13. • – • – ••
  14. 14. <div id="slider" tabindex="0" role="slider"> <div id="slider-thumb"> <img src="sliderbar.gif"> </div></div>
  15. 15. • – – – –
  16. 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. 17. • – –•
  18. 18. • – – –• –
  19. 19. • • – – – – – – – – – –• – –
  20. 20. • –• –• –
  21. 21. •••••••
  22. 22. Thank you!Are your sites accessible?

×