Smashing TV - How I Work: Accessibility

Slides from my webinar for Smashing TV, on accessibility debugging in JavaScript-heavy web applications

Resources:
- https://www.w3.org/WAI/WCAG21/Understanding
- https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/
- https://dequeuniversity.com/
- https://webaim.org/
- https://inclusive-components.design/
- https://egghead.io/courses/start-building-accessible-web-applications-today
- https://www.udacity.com/course/web-accessibility--ud891
- https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/

Accessibility Testing APIs:
- https://axe-core.org/
- https://tenon.io
- https://wave.webaim.org/api/
- https://github.com/evcohen/eslint-plugin-jsx-a11y

Demos we tested:
- https://wakamaifondue.com/
- https://github.com/glowroot/glowroot/tree/master/ui
- https://github.com/chrisheninger/rental-resume.com

Transcript

1. How I Work: Accessibility
   By Marcy Sutton
   Smashing TV May 10, 2018
   

   View Slide

2. Accessibility in JavaScript-
   Heavy Applications
   • Client-side view changes
   • Custom UI components
   • Interactive layers
   • Toasts & notifications
   • Virtual DOM
   • Automated Testing
   

   View Slide

3. POUR me a coffee ☕
   https://www.w3.org/WAI/WCAG21/Understanding
   • Perceivable
   • Operable
   • Understandable
   • Robust
   

   View Slide

4. View Slide

5. Accessibility Basics: Resources
   • Deque University
   • WebAIM
   • Inclusive Components
   • Egghead Course
   • Udacity course
   

   View Slide

6. Demos!
   https://wakamaifondue.com/
   https://github.com/glowroot/glowroot/tree/master/ui
   https://github.com/chrisheninger/rental-resume.com
   

   View Slide

7. Automated Accessibility Testing
   What does it cover?
   • HTML & ARIA syntax, relationships
   • Accessible naming/text alternatives*
   • Color contrast*
   • Page-level requirements
   • Keyboard support**
   

   View Slide

8. Accessibility Testing APIs
   • axe-core
   • Tenon.io
   • WAVE
   • eslint-plugin-jsx-a11y
   

   View Slide

9. Wrap It Up
   • A11y + JavaScript ❤
   • The basics matter
   • Get skilled at focus management
   • Test, test, test!
   https://www.smashingmagazine.com/2015/05/client-
   rendered-accessibility/
   

   View Slide