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.

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