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
2. Accessibility in JavaScript- Heavy Applications • Client-side view changes • Custom UI components • Interactive layers • Toasts & notifications • Virtual DOM • Automated Testing
3. POUR me a coffee ☕ https://www.w3.org/WAI/WCAG21/Understanding • Perceivable • Operable • Understandable • Robust
5. Accessibility Basics: Resources • Deque University • WebAIM • Inclusive Components • Egghead Course • Udacity course
6. Demos! https://wakamaifondue.com/ https://github.com/glowroot/glowroot/tree/master/ui https://github.com/chrisheninger/rental-resume.com
7. Automated Accessibility Testing What does it cover? • HTML & ARIA syntax, relationships • Accessible naming/text alternatives* • Color contrast* • Page-level requirements • Keyboard support**
8. Accessibility Testing APIs • axe-core • Tenon.io • WAVE • eslint-plugin-jsx-a11y
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/