The purpose of this proof of concept is to create a project starter template for anyone who wants to enforce accessibility inside their application. It implements accessibility on different levels, starting from simple linting rules, component testing to CI/CD pipelines.
However, it is important to mention, that by using only this setup you will not prevent every accessibility issue and there is still much more to do to ensure compliance with WCAG. Nevertheless, having some rules in place is already a good start and, it can keep teams aligned on what their goal is.
- Next.js
- Storybook
Before running the project and diving into detail, make sure you have the project ready.
- Clone the repo
git clone https://github.com/BibiSebi/nextjs-a11y-poc.git- Install dependencies by using:
npm install
# or
yarn install- Run the project
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser to see the result.
- Build the project
npm run build
# or
yarn build- Add Storybook
- Add Accessibility Storybook Addon
- Add Accessibility Linter
- Create CI/CD pipeline
- Create Axe tests