Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction to WAI-ARIA

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 27 Ad

Introduction to WAI-ARIA

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.

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.

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Similar to Introduction to WAI-ARIA (20)

Advertisement

More from Interactive Accessibility (10)

Recently uploaded (20)

Advertisement

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?

Editor's Notes

  • When sites are correctly designed, developed, and edited, we provide the opportunity for all users to have equal access to information and functionality.

×