Toegankelijkheid met WAI-ARIA

960
-1

Published on

Presentatie over toegankelijkheid met WAI-ARIA die ik heb gegeven tijdens de Barcamp Groningen.

URL voor het slidervoorbeeld: http://www.paciellogroup.com/blog/misc/ARIA/slider/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
960
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Toegankelijkheid met WAI-ARIA

  1. 1. Toegankelijkheid met WAI-ARIA Foto: http://www.flickr.com/photos/86598108@N00/345522486/
  2. 2. Wie ben ik? Foto: http://www.flickr.com/photos/thewolf/2537868837/
  3. 3. Foto: http://www.flickr.com/photos/meyerweb/132867740/
  4. 4. Webrichtlijnen.nl
  5. 5. WAI-ARIA? Web Accessibility Initiative Accessible Rich Internet Applications
  6. 6. Pas op, codevoorbeelden! Foto: http://www.flickr.com/photos/thefangmonster/490423135/
  7. 7. Role <a href=”..”> <img src=”button.png” alt=”OK”/> </a>
  8. 8. Role <a href=”..” role=”button”> <img src=”button.png” alt=”OK”/> </a>
  9. 9. Status <a href=”..” role=”button” aria-pressed=”true”>
  10. 10. Foto: http://joeclark.org/nypl/20Tiemann-closeup.jpg
  11. 11. Voorbeeld: slider <div id=quot;sliderRailquot;> <button class=quot;sliderThumb” id=quot;sliderThumb1quot; role=quot;sliderquot; aria-labelledby=quot;sliderLabelquot; aria-valuemin=quot;0quot; aria-valuemax=quot;100quot; aria-valuenow=quot;0quot; aria-valuetext=quot;0%quot;></button> </div>
  12. 12. Live regions <div aria-live=quot;offquot;> <div aria-live=quot;politequot;> <div aria-live=quot;assertivequot;> <div aria-live=quot;rudequot;>
  13. 13. Landmarks article, banner, complementary, contentinfo, main, navigation, search <div id=”content” role=”main”>
  14. 14. Validatie?
  15. 15. Software met ARIA-ondersteuning Firefox 1.5 Opera 9.5 Internet Explorer 8 Safari 3 JAWS 9 Firevox YUI
  16. 16. Toegankelijkheid testen: doe de muis eens weg Foto: http://www.flickr.com/photos/suhailpk/473307063
  17. 17. Bedankt! Vragen? Foto: http://www.flickr.com/photos/24043297@N00/2857292510/

×