Some key takeaways:
- Understand how to incorporate accessibility into your web development workflow.
- Debug your sites and applications for accessibility using the latest tools.
- Apply accessibility to React web applications with Gatsby, while learning how accessibility applies to other stacks.
- Learn the benefits of manual and automated testing to grow web accessibility superpowers!
- Integrate focus management into your web applications, gracefully handling keyboard and screen reader interactions.
- Practice announcing view changes with your code and keeping screen reader users up to date.
- Achieve wins with semantic markup, unobtrusive animation, and progressive enhancement.
Workshop slides: https://marcysutton.github.io/js-a11y-workshop/slides/
Note: This repo requires Node 12 and npm to be installed.
- Create a new Gatsby site and slide deck using this starter
git clone https://github.com/marcysutton/js-a11y-workshop
- Go into the directory, install dependencies, and start the development server
cd js-a11y-workshop npm install npm start
View in a browser: http://localhost:8000
To look at the answers from the exercises, check out the
/examplesdirectory in the
You can also check out the
solutions branch to see everything in action: https://github.com/marcysutton/js-a11y-workshop/tree/solutions
- Have a text editor installed, i.e. VSCode
- Have the Gatsby CLI (gatsby-cli) installed globally by running
npm install -g gatsby-cli