Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016

3,061 views

Published on

There're a lot of accessibility tools available today. This presentation will provide an overview of these tools, and how they can be built into your workflow. From basic, all the way to advanced automated E2E testing. Geared for front-end developers/ engineers looking to improve the accessibility of their work.

Working code examples are available at https://github.com/gerardkcohen/nightwatch-a11y-testing

Published in: Internet
  • Be the first to comment

Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016

  1. 1. Accessibility Testing Tools for Developers
  2. 2. CONTACT Accessibility Testing Tools for Developers Gerard K. Cohen Front-End Ux Architect/ Senior Accessibility Lead Wells Fargo, Wholesale Technology Services email://gerardkcohen@gmail.com twitter:// @gerardkcohen
  3. 3. Accessibility Testing?
  4. 4. Basic Test #1
  5. 5. BASIC TESTING Accessibility Testing Tools for Developers HTML Validator https://validator.w3.org/nu/
  6. 6. BASIC TESTING Accessibility Testing Tools for Developers HTML Validator Web Developer Tools http://chrispederick.com/work/web-developer/
  7. 7. BASIC TESTING Accessibility Testing Tools for Developers HTML Validator Local Validator https://github.com/validator/validator
  8. 8. Basic Test #2
  9. 9. BASIC TESTING Accessibility Testing Tools for Developers TAB KEY
  10. 10. BASIC TESTING Accessibility Testing Tools for Developers tabindex=“-1” tabindex=“0” tabindex=“1”
  11. 11. Basic Tests HTML Validation Keyboard focus with TAB
  12. 12. CSS Bookmarklets
  13. 13. CSS BOOKMARKLETS Accessibility Testing Tools for Developers debugCSS Developed by Yahoo! http://yahoo.github.io/debugCSS/
  14. 14. CSS BOOKMARKLETS Accessibility Testing Tools for Developers Diagnostic.css Developed by Karl Groves http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/
  15. 15. CSS BOOKMARKLETS Accessibility Testing Tools for Developers Revenge.CSS Developed by Heydon Pickering https://github.com/Heydon/REVENGE.CSS
  16. 16. CSS BOOKMARKLETS Accessibility Testing Tools for Developers Custom Rules
  17. 17. CSS BOOKMARKLETS Accessibility Testing Tools for Developers Custom Rules Ex: CSS Toolbar “Widget” role=“group” aria-label=“some label”
  18. 18. JS Bookmarklets
  19. 19. JS BOOKMARKLETS Accessibility Testing Tools for Developers tota11y Developed by Khan Academy http://khan.github.io/tota11y/
  20. 20. JS BOOKMARKLETS Accessibility Testing Tools for Developers HTML CodeSniffer Developed by Squiz http://squizlabs.github.io/HTML_CodeSniffer
  21. 21. Browser Plugins
  22. 22. Browser Plugins Accessibility Testing Tools for Developers Web Developer Tools Developed by Chris Pederik http://chrispederick.com/work/web-developer/
  23. 23. Browser Plugins Accessibility Testing Tools for Developers Accessibility Developer Tools Developed by Chrome
  24. 24. Browser Plugins Accessibility Testing Tools for Developers WAVE Developed by WebAim http://wave.webaim.org/extension/
  25. 25. Browser Plugins Accessibility Testing Tools for Developers aXe Developed by Deque http://www.deque.com/products/axe/
  26. 26. Browser Plugins Accessibility Testing Tools for Developers Tenon Developed by Karl Groves http://tenon.io/
  27. 27. Advanced Testing
  28. 28. What’s Next?
  29. 29. Conclusion
  30. 30. CONTACT Accessibility Testing Tools for Developers Gerard K. Cohen Front-End Ux Architect/ Senior Accessibility Lead Wells Fargo, Wholesale Technology Services email://gerardkcohen@gmail.com twitter:// @gerardkcohen

×