Automated accessibility testing.

This is a project demonstrating strategies for writing tests for the accessibility of the user interface.

The code stack is React with NextJS.

Getting Started

To install:

npm install

The project contains a couple of test pages. Start the development server and visit http://localhost:3000 to see them.

npm run dev

Linting

The linter plugin eslint-plugin-jsx-a11y asserts accessibility best practices purely on the code basis and supports during coding.

npm run lint

Unit tests

The unit test use Vitest and React Testing Library. They also demonstrate the usage of axe-core, an automated accessibility testing tool. To run:

npm run test

E2E tests

The E2E tests use Playwright (main branch) or Cypress (cypress branch).

They need a running dev server.

Like the unit tests, they also demonstrate the usage of axe-core. Note that some tests fail intentionally. This is documented in the code. To run:

npm run test:e2e

CI tests

Automated accessibility tests can be run in the pipeline with Pa11y. The automated testing tool used is HTML_CodeSniffer. They need a running dev server. To run:

npm run test:ci