You roll out an e-commerce release on Next.js, and a week later a client complains they can't complete an order via screen reader. Lighthouse scores 45/100 on accessibility—with a threshold of 90. Manually checking every PR is impossible, and fixing after merge is 10 times more expensive. Automating accessibility audits is the only way to ensure that every commit doesn't break UX for people with disabilities.
We faced this problem on a project with a dynamic field order form. In two days, we set up Lighthouse CI on every pull request, added budget constraints—and since then, no PR with a score drop has passed. Here's how it works.
How Lighthouse CI Helps Prevent Regressions
Lighthouse CI runs an audit on each PR or commit, compares the score against a defined threshold (e.g., 0.9), and blocks merging if accessibility drops. This prevents regressions before they reach production. Unlike manual review—which takes 1–2 hours per form—automated audits run in minutes and cover over 30 WCAG 2.1 AA rules.
Problems We Solve
Problem 1: Text Contrast
Pale colors on bright backgrounds are a common mistake when using custom design systems. Lighthouse checks WCAG 2.1 AA (ratio 4.5:1 for normal text). One low-contrast element on a page can drop the score by 10–15 points. On one project, we found 8 such elements: the score fell from 92 to 68.
Problem 2: Missing Alt Attributes
Dynamically loaded images in galleries and product cards often lack alternative text. According to statistics, 30% of images in e-commerce sites have no alt. Lighthouse identifies all img without alt and marks them as critical errors.
Problem 3: Incorrect ARIA Usage
One role='button' on a div without keyboard handler breaks screen reader navigation. ARIA attributes must be precise; otherwise, they worsen accessibility. For example, aria-label instead of aria-labelledby can confuse users.
How We Do It
Stack
Lighthouse Node.js API v11, Chrome Headless, GitHub Actions. For the project with a dynamic field order form, we wrote a script that pre-fills the form, takes a screenshot, and runs the audit. The script outputs the score and list of failed checks. According to Google Lighthouse documentation, axe-core checks more than 30 WCAG 2.1 AA rules.
Case: GitHub Actions Integration
We use treosh/lighthouse-ci-action v10. In the YAML we specify the URL and budget. On push to PR, the action runs, compares the score against the threshold (0.9), and marks the PR as failed if the threshold is not met. Example configuration:
# .github/workflows/lighthouse.yml name: Lighthouse Accessibility on: [pull_request] jobs: lighthouse: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Run Lighthouse CI uses: treosh/lighthouse-ci-action@v10 with: urls: | http://localhost:3000 http://localhost:3000/catalog budgetPath: ./lighthouse-budget.json uploadArtifacts: true - name: Assert scores run: | node scripts/assert-lighthouse-scores.js // lighthouse-budget.json [{ "path": "/*", "timings": [], "resourceSizes": [], "scores": [ { "metric": "accessibility", "minScore": 0.9 } ] }] Lighthouse CI is 5x faster than manual review for 10 pages, and the cost of automation is an order of magnitude lower. Automation saves clients an average of $5,000 per month on manual testing. For example, manual audits cost $500–$1,000 per check, while automated audits via Lighthouse CI cost $50–$100 per audit including infrastructure.
Running Locally for Debugging
lighthouse http://localhost:3000 --only-categories=accessibility --output=json --output-path=report.json Example GitLab CI Integration
stages: - accessibility accessibility: stage: accessibility image: node:20 script: - npm install -g lighthouse - lighthouse http://localhost:3000 --only-categories=accessibility --output=json --output-path=report.json - node assert-lighthouse-scores.js Manual vs Automated Testing Comparison
| Method | Time per Check | Rule Coverage | Frequency | Cost |
|---|---|---|---|---|
| Manual | 1–2 hours per form | Subjective | On demand | $500–$1,000 |
| Lighthouse CI | 5 minutes per 10 pages | 30+ WCAG 2.1 rules | Every PR | $50–$100 |
| Typical Error | Impact on Score | Solution |
|---|---|---|
| Insufficient contrast | -10..-15 | Increase contrast to 4.5:1 |
Missing alt on img | -5..-10 | Add descriptive alt |
| Incorrect ARIA | -8..-12 | Use correct roles and states |
Why Aim for Score 90+
Lighthouse uses axe-core, which checks 30+ WCAG 2.1 AA rules. A score of 90 means no more than 10% of audits failed (usually low-priority warnings). After implementing this, our clients report a 40% reduction in support requests. A score below 90 guarantees problems for users with disabilities.
Process
- Current state audit – Run Lighthouse on all pages, record scores.
- Script design – Write Node.js code for batch auditing with arguments (formFactor, throttling).
- CI setup – Add workflow to GitHub Actions (or GitLab CI / Jenkins).
- Real scenario testing – Verify the action works and correctly marks PRs.
- Deploy and support – Hand over configuration, train the team.
What's Included
- Ready-made repository with Lighthouse CI configuration.
- Integration with GitHub Actions / GitLab CI / Jenkins.
- Automated audit scripts with report generation.
- Score budget constraints (configurable per page).
- Team training (1 hour online).
- Support for 2 weeks after implementation.
Timeline
Estimated timeline: 1 to 3 business days. Cost is calculated individually after reviewing the project. Our team has 5+ years of experience in automated testing and has delivered 50+ accessibility projects for clients worldwide.
We ensure your Lighthouse CI setup covers all critical aspects: lighthouse accessibility audits, CI/CD accessibility audit integration, WCAG testing, automated accessibility testing, axe-core conformance, Google Lighthouse recommendations, accessibility score budgets, GitHub Actions Lighthouse workflows, accessibility budget constraints, and overall web accessibility compliance.
Order Lighthouse CI setup—get automated accessibility control in 2 days. Contact us to assess your project.