The-DevOps-Daily/devops-daily

feat: Add WCAG accessibility audit automation

オープン

#537 opened on 2025/12/02

 (0 件のコメント) (0 件のリアクション) (0 人の担当者)TypeScript (392 件のフォーク)github user discovery
enhancementgood first issuehacktoberfest

Repository metrics

Stars
 (1,087 個のスター)
PR merge metrics
 (平均マージ 1d 23h) (30d で 82 merged PRs)

説明

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

コントリビューターガイド