Skip to content

Add Foundation for Automated Accessibility Testing #933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

coseeian
Copy link
Collaborator

Summary
This PR sets up the foundation for automated accessibility testing using Playwright and axe-core, enabling continuous verification of the p5.js website’s compliance with WCAG 2.2 guidelines.

By integrating these tools into our workflow, contributors can quickly detect and address accessibility issues, reducing the risk of regressions and supporting ongoing improvement toward an inclusive, standards-compliant interface.


Key Changes

  1. Initial Setup

    • Installed and configured Playwright and axe-core as the automated accessibility testing stack.
    • Established test directory structure for future accessibility test expansion.
  2. Playwright Configuration (playwright.config.ts)

    • Device Profiles: Added five test environments to ensure broad coverage:

      • Desktop Chrome
      • Desktop Firefox
      • Desktop Safari
      • iPhone 15
      • Pixel 7
    • Runtime Modes:

      • LOCAL – Launches Astro dev server (http://localhost:4321) for development testing.
      • BUILD – Builds and serves from dist (http://localhost:4173) for CI or production-like testing.
      • REMOTE – Targets an external production base URL (p5js.org fallback).
    • CI Optimizations:

      • Retries failed tests in CI (max 2) for flake reduction.
      • Restricts to single worker in CI to avoid port conflicts.
      • Generates HTML reports and retains traces/screenshots for debugging.
  3. Accessibility Test Example (test/a11y)

    • Added a sample test that scans the Home page using axe-core against WCAG 2.2 rules.

Impact

  • Introduces a reproducible, automated method for detecting accessibility violations before deployment.
  • Facilitates faster PR reviews by providing clear accessibility reports.
  • Lays the groundwork for full-site automated accessibility checks integrated into CI/CD pipelines.

Next Steps

  • Expand test/a11y to cover additional page.
  • Integrate test suite into GitHub Actions for automated runs on each PR.
  • Specify which WCAG and best-practice rules should be enabled for automated accessibility testing.

@ksen0 ksen0 self-requested a review August 12, 2025 19:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants