The-DevOps-Daily/devops-daily

feat: Add WCAG accessibility audit automation

Aberta

#537 aberto em 2 de dez. de 2025

 (0 comentário) (0 reação) (0 responsável)TypeScript (392 forks)github user discovery
enhancementgood first issuehacktoberfest

Métricas do repositório

Stars
 (1.087 estrelas)
Métricas de merge de PR
 (Mesclagem média 1d 23h) (82 fundiu PRs em 30d)

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

Guia do colaborador