Lighthouse CI: Automate Accessibility Audits in CI/CD

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

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

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

1. Current state audit – Run Lighthouse on all pages, record scores.
2. Script design – Write Node.js code for batch auditing with arguments (formFactor, throttling).
3. CI setup – Add workflow to GitHub Actions (or GitLab CI / Jenkins).
4. Real scenario testing – Verify the action works and correctly marks PRs.
5. 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.

Website Accessibility: WCAG, Screen Readers, Keyboard Navigation

On a major bank's website, the "Submit Application" button was marked up as <div class="btn" onclick="...">. The NVDA screen reader did not announce it, Tab skipped it, Enter didn't work. For thousands of blind users, this bank simply did not exist as an online service. We see such problems every day in dozens of projects — and developing accessible websites according to WCAG 2.2 AA has become the only way to avoid discrimination and legal risks. Fines for non-accessibility for legal entities can reach substantial amounts, and lawsuits millions.

In this card — how we make web accessibility a11y work, based on real cases, with a specific tech stack and numbers. No generic phrases.

Why is Semantic Markup the Foundation of Web Accessibility (a11y)?

Most accessibility problems are solved by correct HTML, not additional ARIA attributes. <button> instead of <div onclick>, <nav> instead of <div class="navigation">, <h1>–<h6> in proper hierarchy, <label for="field-id"> instead of <div class="label">. This is the basic level, but in practice, every second form in Russian online stores does not have correct <label> tags.

ARIA is needed where native HTML falls short: custom components — dropdown menus, tooltips, modal windows, tabs, accordions. And here the complexity begins.

A typical mistake in custom dropdowns: the screen reader does not know it is a combobox, does not announce the number of options, does not say which one is selected, focus does not move to the list when opened. Proper implementation:

• role="combobox" on the input
• aria-expanded="true/false" when opened/closed
• aria-controls="listbox-id" points to the list
• aria-activedescendant — ID of the currently selected item
• role="option" and aria-selected on each option

This is not theory; it is tested with a screen reader. NVDA + Chrome or VoiceOver + Safari is a mandatory part of QA.

<div role="combobox" aria-expanded="false" aria-controls="listbox-1" aria-activedescendant="" tabindex="0">
  <label for="input-1">Select city</label>
  <input id="input-1" type="text" role="combobox" aria-autocomplete="list" />
  <ul id="listbox-1" role="listbox" aria-label="Cities">
    <li role="option" aria-selected="false" id="opt-1">Moscow</li>
    <li role="option" aria-selected="false" id="opt-2">St. Petersburg</li>
  </ul>
</div>

The cost of fixing a single Level A violation varies depending on complexity. Implementing a11y from the design stage reduces the refactoring budget by 2–3 times compared to retrofitting a finished site.

How to Properly Build Keyboard Navigation?

Tab order should match the visual order of elements. If in HTML the "Cancel" button comes before "Confirm", but CSS swaps them — the keyboard user is confused.

Focus trap in modal windows. When a modal opens, Tab should cycle only within it. When closing, return focus to the element that opened the modal. Without this, the user ends up at the top of the page after closing.

tabindex="-1" — element does not enter Tab sequence but can receive focus programmatically. Used for elements that receive focus via JavaScript (section headings after anchor navigation).

tabindex="1" and above is almost always an error. Explicit order breaks natural order and creates unpredictable behavior. Control order via DOM, not tabindex.

Skip links — a "Skip to content" link, hidden visually, visible on Tab. Allows screen reader users to skip repetitive navigation.

Color and Contrast: Requirements and Common Violations

WCAG 2.2 AA requires contrast 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1 and 4.5:1.

The most common violations: gray placeholder in inputs (#999 on white = 2.9:1), light gray secondary text, white text on pastel backgrounds.

Color should not be the sole indicator: "required fields are red" without an asterisk — violation for color blind users.

Testing tools: axe DevTools, WAVE, Accessibility Inspector in Chrome DevTools. axe-core integrates into Playwright tests: automatic check of 80+ rules on every deployment. Manual testing finds about 60% more errors than automated.

What Is Important About Media Content and Dynamics?

Images without alt — a common basic failure. alt should be meaningful: not alt="image_123.jpg", but a description of content relevant to context. Decorative images — alt="" (empty, not missing attribute).

Video should have captions. YouTube auto-captions are not a standard; they make mistakes. WebVTT files with correct captions for all educational and marketing video content.

Animations — a problem for users with vestibular disorders. @media (prefers-reduced-motion: reduce) — media query that disables or slows animations for users with that OS setting.

What Changed in WCAG 2.2?

Version 2.2 came into effect with new criteria:

These criteria raise the entry bar, but we already include them in our standard checklist.

Audit and Remediation

Automated tools find about 30–40% of violations. The rest is only manual testing. Minimum scenario: go through the entire critical user flow (registration, purchase, form) using only keyboard and screen reader.

Process

1. Automated audit — axe-core, Lighthouse, WAVE — outputs 80+ rules.
2. Manual testing — NVDA, VoiceOver, keyboard — 2–3 days for a typical site.
3. Violation prioritization — P1 (blocks usage), P2 (creates difficulties), P3 (enhancements).
4. Fixing — iteratively, integrate checks into CI via Playwright + axe.
5. Re-audit — close all P1/P2 before release.
6. Documentation and handover — report with results, maintenance recommendations, team training.

Results and Scope

• Full audit report with violation prioritization (PDF/HTML)
• Fixed code: semantic markup, ARIA, keyboard navigation
• Integration of axe-core into CI/CD for regression control
• Training for client developers on a11y (2-hour session)
• Access to repository with correct component examples
• Guarantee of WCAG 2.2 AA compliance at time of delivery

Timeline

Budget is calculated individually after the audit. Contact us — we will evaluate your project in 1 day. Get a consultation and free checklist when ordering an audit.

Experience and Guarantees

We have been working in web accessibility a11y for over 8 years. Completed more than 50 projects for banks, retail, and government. Certified specialists (IAAP CPACC, WAS). We guarantee passing a third-party audit or will fix for free.

WCAG 2.2 Standard — official W3C recommendation defining web content accessibility requirements.

Wikipedia: Web Content Accessibility Guidelines
Wikipedia: ARIA

— web accessibility levels a11y per version 2.2.

Order an audit now — get a checklist and preliminary estimate for free. Contact us – we will respond within an hour.