Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to WAI-ARIA

11,144 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?

×