Learn the necessary techniques and tools for building inclusive web applications with JavaScript from Gatsby's Head of Learning Marcy Sutton.
Presenting at Frontend Masters
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.
App URL: https://marcysutton.github.io/js-a11y-workshop
Workshop slides: https://marcysutton.github.io/js-a11y-workshop/slides/
This project was started with gatsby-starter-mdx-basic and @mdx-deck/theme.
Note: This repo requires Node 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
npx gatsby developView in a browser: http://localhost:8000
-
Edit files:
- Site pages:
src/pages/* - Site components:
src/components/* - Templates:
src/templates/* - Slide content:
src/slides/index.mdx
- Site pages:
To look at the answers from the exercises, check out the /examples directory