Gatsby Site Accessibility Example

Built with Narative's Novela Theme

With minimal styling and maximum features — including multiple homepage layouts, built-in social sharing and dark mode — Novela makes it easy to start publishing beautiful articles and stories with Gatsby. This fork is intended to be a sandbox for accessibility development and testing.

Additional features in this repo

• Cypress and Cypress-axe set up for accessibility testing
• Reach UI menu button

Accessibility resources

• Gatsby Accessibility Workshop materials
• Making Your Gatsby Site Accessible
• End-to-End Testing in Gatsby
• React Accessibility Docs
• Additional Accessibility Resources

Using this starter

This guide will take you through setting up the site with this fork of Gatsby Starter Novela.

Step 1: Starter installation

With gatsby-cli:

gatsby new gatsby-site https://github.com/marcysutton/gatsby-accessibility-starter

With git clone:

git clone git@github.com:marcysutton/gatsby-accessibility-starter.git gatsby-site

cd gatsby-site

yarn

Step 2: Develop & Build

Once installed or cloned locally and all packages are installed you can begin developing your site.

# Run localhost
yarn dev

# Build your Gatsby site
yarn build

If wanting to use Netlify CMS as the content editor, then you need to be run the proxy in another terminal tab. Then visit http://localhost:8000/admin to view the editor.

# Run proxy
yarn proxy

Step 3: Run tests

Run end-to-end accessibility tests with Cypress.

yarn run test:e2e

Tests can also be run in a continuous integration environment without the Cypress UI:

yarn run test:e2e:ci

Novela help

If you don't have yarn installed follow the yarn getting started guide

For more information visit the original Theme repository