Need help with js-a11y-workshop?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

marcysutton
161 Stars 65 Forks MIT License 61 Commits 1 Opened issues

Description

Workshop: Accessibility in JavaScript Applications

Services available

!
?

Need anything else?

Contributors list

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.

Presented at Frontend Masters! You can view the videos that go along with the workshop material in the Accessibility in JavaScript Application course.

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 12 and npm to be installed.

  1. Create a new Gatsby site and slide deck using this starter
git clone https://github.com/marcysutton/js-a11y-workshop
  1. 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
  1. Edit files:
- Site pages: [`src/pages/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/pages)
- Site components: [`src/components/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/components)
- Templates: [`src/templates/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/templates)
- Slide content: [`src/slides/index.mdx`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/slides/index.mdx)
  1. To look at the answers from the exercises, check out the
    /examples
    directory in the
    master
    branch

You can also check out the

solutions
branch to see everything in action: https://github.com/marcysutton/js-a11y-workshop/tree/solutions

Prerequisites

  1. Have a text editor installed, i.e. VSCode
  2. Have the Gatsby CLI (gatsby-cli) installed globally by running
    npm install -g gatsby-cli

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.