The-DevOps-Daily/devops-daily

feat: Add WCAG accessibility audit automation

Open

#537 opened on Dec 2, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (392 forks)github user discovery
enhancementgood first issuehacktoberfest

Repository metrics

Stars
 (1,087 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

Automate accessibility testing by integrating axe-core or Lighthouse CI into the GitHub Actions workflow.

Problem

  • No automated accessibility testing
  • Manual testing is time-consuming and inconsistent
  • WCAG compliance not verified
  • Accessibility regressions can go unnoticed

Current Accessibility Features

  • prefers-reduced-motion support in animations
  • Semantic HTML structure
  • No automated testing

Proposed Solution

Add automated a11y testing with:

  • axe-core - Fast, comprehensive accessibility testing
  • Lighthouse CI - Full accessibility audit
  • Run on every PR
  • Fail CI if critical issues found

Implementation Options

Option 1: axe-core with Playwright

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('Homepage should not have accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Option 2: Lighthouse CI

- name: Run Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: |
      http://localhost:3000
      http://localhost:3000/quizzes
    configPath: './.lighthouserc.json'

Acceptance Criteria

  • Install axe-core or Lighthouse CI
  • Add accessibility tests for key pages
  • Test: Homepage
  • Test: Quizzes page
  • Test: Quiz detail page
  • Test: Post page
  • Test: Games page
  • Configure GitHub Actions workflow
  • Fail builds on critical violations
  • Generate accessibility report
  • Document how to fix common issues

Files to Create/Modify

  • .github/workflows/accessibility.yml - New workflow
  • .lighthouserc.json - Lighthouse config (if using Lighthouse)
  • tests/accessibility/*.test.ts - Accessibility tests
  • docs/accessibility.md - Documentation

Contributor guide