$30 off During Our Annual Pro Sale. View Details »

I will tota11y sniff your code

I will tota11y sniff your code

Introductory talk about tools for auditing the a11y of web apps, presenting tota11y.js and HTML_CodeSniffer, with live demo testing.

Arthur Gouveia

October 18, 2016
Tweet

More Decks by Arthur Gouveia

Other Decks in Programming

Transcript

  1. I ’ LL T OTA11Y S N IF F YOU

    R C OD E TOOLS F OR EMPOWERING YOUR A11Y SKILLZ
  2. Arthur Gouveia FRONT END STUFF & BEER @ARTHURGOUVEIA

  3. TOTA11Y. JS & HTML _CODESNIFFER WHAT, HOW AND WHY

  4. tota11y.js

  5. http://khan.github.io/tota11y/

  6. http://bit.ly/google-axs

  7. LI VE DE MO USI NG TOTA11Y.JS ON OUR D

    EV RO UTINE
  8. tota11y.js Pros: • Easy integration • Good entry point to

    a11y • Great for quick wins • Awesome UI for finding problems • Good insights educating about practices • “Supported” by Google Cons • Simplified results • No control over WCAG compliance level
  9. None
  10. http://bit.ly/a11y-sniffer

  11. WCAG 2.0 Standard: “Summary”

  12. LI VE DE MO USI NG HTML_CODESNIFFER O N OU

    R DEV ROUTINE
  13. Pros: • Easy integration • Good UI for finding problems

    • Throughout insight on the problems • Links to solution + WCAG principle • Validated with different WCAG levels Cons • Can’t be used as a bookmarklet on all sites due to `Content Security Policy directive`
  14. MATHEMATICAL ACCES SIBILIT Y a11y = GAGP * e GAGP

    = Guidelines And Good Practices e = Empathy
  15. THANKS! @ARTHURGOUVEIA