Learn the necessary techniques and tools for building inclusive web applications with Gatsby and React.js from Gatsby's Head of Learning Marcy Sutton.
Presented at:
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/gatsby-a11y-workshop
Workshop slides: https://marcysutton.github.io/gatsby-a11y-workshop/slides/
This project was started with gatsby-starter-mdx-basic and @mdx-deck/theme.
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 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
/examplesdirectory in themasterbranch
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