Successfully reported this slideshow.
Your SlideShare is downloading. ×

Who is afraid of ARIA

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 39 Ad

More Related Content

Similar to Who is afraid of ARIA (20)

Advertisement

Recently uploaded (20)

Who is afraid of ARIA

  1. 1. Who’s afraid of ARIA? Rian Rietveld WordCamp US 2018
  2. 2. Artwork: kait cooper
  3. 3. Rian Rietveld @RianRietveld Find me on twitter Senior Accessibility Consultant at Level Level Teacher at the Level Level Academy
  4. 4. slideshare.net/rianrietveld Codepen: codepen.io/rianrietveld Slides on
  5. 5. In this talk What is ARIA First rule of ARIA Examples of how to use ARIA Good resources
  6. 6. WAI-ARIA WAI = Web Accessibility Initiative ARIA = Accessible Rich Internet Applications Suite
  7. 7. ARIA defines a way to make Web content and Web applications more accessible to people with disabilities.
  8. 8. It’s all about feedback What happens on the page? What does this mean? How can I interact?
  9. 9. First rule of ARIA… Don’t use ARIA!
  10. 10. Don’t use ARIA to fix meaningless or incorrect HTML5
  11. 11. Hamburgers! For example:
  12. 12. <div id=“menu” > Menu </div>
  13. 13. <div id=“menu” tabindex=“0” > Menu </div>
  14. 14. <div id=“menu” tabindex=“0” role=“button” > Menu </div>
  15. 15. <div id=“menu” tabindex=“0” role=“button” aria-pressed=“false” > Menu </div>
  16. 16. <div id=“menu” tabindex=“0” role=“button” aria-pressed=“false” > Menu </div>
  17. 17. <button id=“menu” > Menu </button>
  18. 18. Semantics gives it all for free
  19. 19. It’s all about feedback What happens on the page? What does this mean? How can I interact?
  20. 20. How to use ARIA Examples!
  21. 21. aria-expanded Is this open or closed?
  22. 22. Demo aria-expanded
  23. 23. aria-live Tell me what’s changing
  24. 24. Demo aria-live
  25. 25. wp.a11y.speak() Let WordPress speak
  26. 26. Demo wp.a11y.speak()
  27. 27. aria-label and the
 .screen-reader-text What you hear is what you get
  28. 28. Demo aria-label
  29. 29. aria-describedby and 
 aria-labelledby How do I fill out this form?
  30. 30. Demo aria-describedby and 
 aria-labelledby
  31. 31. Resources
  32. 32. Free online ARIA Widgets Code Library at dequeuniversity.com
  33. 33. Make it work before you make it nice
  34. 34. slideshare.net/rianrietveld Codepen: codepen.io/rianrietveld @rianrietveld

×