Accessibility in JavaScript Applications

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
• SmashingConf NYC

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.

1. Install Gatsby CLI (or clone/npm install this repo instead)

npm install gatsby-cli -g

2. Create a new Gatsby site and slide deck using this starter

gatsby new js-a11y-workshop https://github.com/marcysutton/js-a11y-workshop

3. Go into the directory and start the development server

cd js-a11y-workshop
npm start

View in a browser: http://localhost:8000

4. Edit files:

   • Site pages: src/pages/*
   • Site components: src/components/*
   • Templates: src/templates/*,
   • Slide content: src/slides/index.jsx