Use this recipe when a project already has accessibility findings and the team needs a staged rollout instead of failing every pull request on day one.
| Stage | Goal | Command |
|---|---|---|
| 1. Observe | Collect reports without blocking CI | npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate report-only |
| 2. Baseline | Accept the current known state | npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --update-baseline |
| 3. Protect | Block only new critical regressions | npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate new-critical-only |
| 4. Tighten | Block all critical findings | npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate critical |
| 5. Mature | Block warnings when the team is ready | npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate warning |
Start with generated report-only CI:
export APP_URL=http://localhost:5173
npx a11y-shiftleft-cli setup \
--url $APP_URL \
--start-command "npm run dev -- --host localhost --port 5173" \
--gate report-onlyThis lets the team review accessibility reports before deciding what should block pull requests.
After reviewing the first reports, create a baseline from the current accepted state:
export APP_URL=http://localhost:5173
npx a11y-shiftleft-cli check \
--dynamic \
--url $APP_URL \
--out reports \
--update-baselineCommit the baseline file:
git add .a11y-baseline.json
git commit -m "Add accessibility baseline"The baseline should represent known existing issues, not a claim that the app is accessible. Refresh it only when the team intentionally accepts the current state.
Once the baseline is committed, switch CI to:
npx a11y-shiftleft-cli check \
--dynamic \
--url $APP_URL \
--out reports \
--gate new-critical-onlyThis compares current findings with .a11y-baseline.json and fails only when a
new critical issue appears.
When the project has fewer legacy findings, move to stricter gates:
npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate critical
npx a11y-shiftleft-cli check --dynamic --url $APP_URL --out reports --gate warningUse critical for teams that want to stop high-impact regressions. Use
warning only when the team is ready for a stricter standard and has a clear
process for fixing findings quickly.
Use audit when a finding needs screenshots, keyboard evidence, or fix
guidance:
npx a11y-shiftleft-cli audit --url $APP_URL --out reports --openFor private or authenticated pages, keep screenshots local and consider:
npx a11y-shiftleft-cli audit --url $APP_URL --out reports --no-screenshots- Start
report-onlyfor the first few pull requests. - Commit
.a11y-baseline.jsononly after reviewing the generated report. - Do not refresh the baseline just to make CI pass.
- Use
new-critical-onlywhile legacy findings are being cleaned up. - Move to
criticalorwarningafter the team has a clear owner and fix process. - Keep
reports/as CI artifacts, not committed files.