CoolFace
Apppublic

MontassarBen/accessibility-worker

sourceHugging Faceupdated 9mo agoView on Hugging Face
0likes
App README

Accessibility Monitor & Fix Backlog Generator

Automated WCAG 2.1 AA Compliance for the Modern Web.

By June 28, 2025, digital products in Germany must be accessible under the Barrierefreiheitsstärkungsgesetz (BFSG). This tool bridges the gap between knowing you have a problem and fixing it.

🧐 Objective: What does this app do?

This is not just another linting tool. It is a full-lifecycle accessibility engine designed to help teams reach WCAG 2.1 AA compliance rapidly.

  1. 1.Scans Real User Experiences: It doesn't just check HTML files. It launches a real Chromium browser (Playwright) to render your page, execute JavaScript, wait for APIs to load, and then audit the accessibility. This ensures 100% reliability for SPAs (React, Vue, Next.js).
  2. 2.Visualizes Compliance: It turns cryptic error logs into a Health Score (0-100) and visual charts, making accessibility understandable for managers and stakeholders.
  3. 3.Generates Fixes: It provides a "Fix Backlog" with specific code snippets, DOM elements, and screenshots of every violation, ready to be copied into Jira or GitHub.

� Key Features

1. 🕷️ "Spider" Scanning Engine (100% Reliability)

  • —Automatic Discovery: Give it one URL (e.g., example.com), and it automatically finds internal links to scan multiple pages.
  • —Network Idle Wait: The scanner intelligently waits for all network traffic (API calls, images, scripts) to finish before testing. This guarantees accurate results for dynamic loading pages.
  • —Lazy-Load Handling: Handles modern lazy-loaded images and content without crashing.

2. 🎨 Visual Analytics Dashboard

  • —Compliance Score: A dynamic 0-100 score calculated based on the severity and frequency of issues, normalized by page count.
  • —Impact Distribution: A Pie Chart showing the breakdown of Critical vs. Serious issues.
  • —Per-Page Analysis: A Bar Chart identifying which specific pages are bringing down your score.

3. 📝 Actionable Reporting

  • —Real-Time Progress: Watch the scan happen page-by-page via a streaming UI.
  • —Evidence Collection: Captures Screenshots of every failing element so developers know exactly what to fix.
  • —Export Options: one-click copy to Markdown (for tickets) or Export to PDF (for compliance proofs).

� Tech Stack

  • —Frontend: Next.js 16 (App Router), Tailwind CSS, Framer Motion (animations), Recharts (Analytics).
  • —Engine: Node.js, Playwright (v1.57+), @axe-core/playwright (Industry standard auditing engine).
  • —Architecture: Monorepo with Split Deployment (Vercel + Hugging Face).

☁️ Deployment Architecture

To ensure 100% scanning reliability without hitting serverless timeout limits, this project uses a Split Deployment Strategy:

  1. 1.Frontend (`apps/web`) -> Vercel
  2. 2.Hosts the Next.js Dashboard.
  3. 3.Orchestrates the user experience and visualization.
  4. 4.Connects to the Worker via API.
  5. 5.Worker (`apps/worker`) -> Hugging Face Spaces
  6. 6.Hosts the heavy Playwright engine in a custom Docker container.
  7. 7.Exposes a REST API (POST /scan) to perform the audits.
  8. 8.Bypasses Vercel's 10-second serverless timeout.

🇪🇺 Why This Matters (BFSG 2025)

Most companies fail accessibility because audits are static PDFs that sit in drawers. This tool specifically addresses the "Execution Gap":

  • —Risk Management: Meets the legal requirements effective June 2025.
  • —Developer Efficiency: Translates "WCAG Failure 1.1.1" directly into "Task: Add Alt Text to Image on Homepage".