Building Accessible Sites with Gatsby
Learn the necessary techniques and tools for building inclusive web applications with Gatsby and React.js from Gatsby's Head of Learning Marcy Sutton.
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/gatsby-a11y-workshop/slides/
Note: This repo requires Node 12 and npm to be installed.
- Install Gatsby CLI:
npm install -g gatsby-cli
- Create a new Gatsby site and slide deck using this starter
gatsby new gatsby-a11y-workshop https://github.com/marcysutton/gatsby-a11y-workshop
- Go into the directory and start the development server
cd gatsby-a11y-workshop gatsby develop
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/gatsby-a11y-workshop/tree/solutions
- Have a text editor installed, i.e. VSCode
- Have Node.js 12+ and npm installed