Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this tutorial, we revisit the To Do List App to enhance the overall accessibility and fix a couple of issues we found by testing with the Firefox DevTools Accessibility Inspector. We will make some modifications to the HTML, SASS, and JavaScript to improve the overall A11y.

Quick Concepts outline:
Accessibility Enhanced for our To Do List App
• Introduction / App Outline
• Accessibility testing with Chrome DevTools Lighthouse
• Accessibility testing with Firefox DevTools Accessibility Inspector
• Identifying trouble spots and areas to improve
• HTML improvements
• SASS styling updates
• Re-testing with Lighthouse and Accessibility Inspector
• ChromeVox Keyboard Navigation
• Testing the To Do List app with ChromeVox
• Fixing a trouble spot with JavaScript
• Re-testing the To Do List app with ChromeVox
• Revisiting our SASS to keep it DRY
• Wrapping it up

▶ JavaScript Tutorials for Beginners Playlist here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT

Further Reading:
Firefox Developer Edition: https://www.mozilla.org/en-US/firefox/developer/
ChromeVox Extension: https://chrome.google.com/webstore/search/chromevox
ChromeVox Keyboard Shortcuts: https://www.chromevox.com/keyboard_shortcuts.html
Using tabindex: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

More A11y Videos:
A11ycasts: https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
Accessibility - State of the Web w/ Marcy Sutton: https://youtu.be/uNuCy9wkszM
Firefox DevTools Accessibility Inspector: https://www.youtube.com/watch?v=7mqqgIxX_NU&list=PLgjjGlfBflIRVUoHWywHeUtfblwMXK8oX

Follow Me:
Twitter: https://twitter.com/yesdavidgray
Reddit: https://www.reddit.com/user/DaveOnEleven
Medium: https://medium.com/@davegray_86804

#accessibility #a11y #devtools