Technical Accessibility
By Marcy Sutton / @MarcySutton
Senior Front-End Engineer, Deque Systems
Who is Marcy Sutton?
Accessibility Wins
Learning to code
Background image shows a laptop with a starry galaxy image behind it and on the screen.
Moving barriers
Background image shows a lush green trail with two downed trees blocking the way.
#developForGood
Today we’ll cover:
- Accessible controls
- Focus management
- Dialogs
Also:
- Using the command line
- Debugging
- Test coverage
- Promises
Test coverage provides a developer contract for how a feature should work and prevents regressions from going out the door.
Test coverage:
- Unit tests
- Integration tests
- End-to-end tests
Angular Material Button component unit tests open in Sublime Text
Angular Material2 Tabs component end-to-end tests open in Sublime Text
Demos!
Removing barriers
- Use real buttons
- Wire the escape key
- Dialog focus management
- Use HTML Inert (& polyfill)
- Write testable code!
Happy users
Coding resources
- ARIA Authoring Practices Guide
https://www.w3.org/TR/wai-aria-practices-1.1/ - Egghead course
https://egghead.io/courses/start-building-accessible-web-applications-today - inert polyfill
https://github.com/GoogleChrome/inert-polyfill
Testing resources
- Karma
http://karma-runner.github.io - Jasmine
jasmine.github.io - Jasmine jQuery
https://github.com/velesin/jasmine-jquery/ - axe-webdriverjs
https://www.deque.com/blog/accessibility-testing-axe-webdriverjs/
Thanks!
twitter.com/marcysutton
github.com/marcysutton
