Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Introduction to WAI-ARIA

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
An Introduction to WAI-ARIA
An Introduction to WAI-ARIA
Wird geladen in …3
×

Hier ansehen

1 von 27 Anzeige

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie Introduction to WAI-ARIA (20)

Weitere von Interactive Accessibility (10)

Anzeige

Aktuellste (20)

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?

Hinweis der Redaktion

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

×