The-DevOps-Daily/devops-daily

feat: Add WCAG accessibility audit automation

Open

#537 创建于 2025年12月2日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (392 fork)github user discovery
enhancementgood first issuehacktoberfest

仓库指标

Star
 (1,087 star)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南