Skip to content
Workshop on Building Accessible Sites with Gatsby
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cypress
examples
src
static
.gitignore
LICENSE
README.md
cypress.json
gatsby-browser.js
gatsby-config.js
gatsby-node.js
jest-preprocess.js
jest.config.js
jest.setup.js
loadershim.js
outline.yml
package-lock.json
package.json

README.md

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.

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.

  1. Install Gatsby CLI:
npm install -g gatsby-cli
  1. Create a new Gatsby site and slide deck using this starter
gatsby new gatsby-a11y-workshop https://github.com/marcysutton/gatsby-a11y-workshop
  1. Go into the directory and start the development server
cd gatsby-a11y-workshop
gatsby develop
View in a browser: http://localhost:8000
  1. Edit files:

  2. 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/gatsby-a11y-workshop/tree/solutions

Prerequisites

  1. Have a text editor installed, i.e. VSCode
  2. Have Node.js 12+ and npm installed
You can’t perform that action at this time.