Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
An Introduction to WAI-ARIA
An Introduction to WAI-ARIA
Cargando en…3
×

Eche un vistazo a continuación

1 de 27 Anuncio

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.

Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (20)

Anuncio

Similares a Introduction to WAI-ARIA (20)

Más de Interactive Accessibility (10)

Anuncio

Más reciente (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?

Notas del editor

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

×