The-DevOps-Daily / The-DevOps-Daily/devops-daily
feat: Add WCAG accessibility audit automation
Open
Nobody has claimed this yet.
enhancement
good first issue
hacktoberfest
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 392
- Avg merge
- 5h 8m
- Merged PRs (30d)
- 121
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-motionsupport 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 testsdocs/accessibility.md- Documentation
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by deciding between the proposed axe-core with Playwright approach and Lighthouse CI, then review the listed workflow, configuration, test, and documentation paths. Add coverage for the homepage, quizzes, quiz detail, post, and games pages, run it through GitHub Actions, and verify that critical violations fail builds and reports are generated. Document common fixes in docs/accessibility.md.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- github-actions, playwright, typescript
- Domain
- accessibility, ci-cd, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100