$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

    View Slide

  2. Arthur Gouveia
    FRONT END STUFF & BEER
    @ARTHURGOUVEIA

    View Slide

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

    View Slide

  4. tota11y.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  9. View Slide

  10. http://bit.ly/a11y-sniffer

    View Slide

  11. WCAG 2.0 Standard:
    “Summary”

    View Slide

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

    View Slide

  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`

    View Slide

  14. MATHEMATICAL
    ACCES SIBILIT Y
    a11y = GAGP * e
    GAGP = Guidelines And Good Practices
    e = Empathy

    View Slide

  15. THANKS!
    @ARTHURGOUVEIA

    View Slide