AccessCheck

Leading the way to a more accessible web

Comment

Inspiration

The web is full of brilliant content—but it’s often inaccessible to people with disabilities. We wanted to lower the barrier for developers and site owners to understand and improve their accessibility, without having to learn dozens of specialized tools. By combining automated testing, OCR for image text, and a leaderboard to celebrate best‑in‑class sites, AccessCheck makes it fun and actionable to “level up” your site’s inclusivity.

What it does

  • URL‑based Accessibility Audits: Enter any public URL and get back a detailed report of WCAG violations, color‑contrast issues, missing alt text, keyboard‑navigation gaps, and more.
  • User Accounts & Private Reports: Sign up or sign in with email/password (securely handled by Supabase Auth) to view, track, and manage all your past accessibility reports in your private dashboard.
  • Progress Tracking & History: Every private report that you make is stored in your account—compare scores over time to see your accessibility improve.
  • Exportable Data: Download any report as JSON for easy integration into your own tools or workflows.
  • Hall of Fame: Sites with the highest scores earn a spot in our public leaderboard, celebrating the best‑designed, most inclusive experiences on the web.

How we built it

  • Frontend: React + TypeScript, Vite for instant reloads, Tailwind CSS for responsive design, Lucide React icons, and React Router.
  • Backend: Node.js + Express. We integrated pa11y for automated audits, Tesseract.js for OCR, and Jimp for any image‑preprocessing needs. A headless Chrome instance lets us crawl and evaluate SPAs.
  • Data & Auth: Supabase (Postgres) handles user authentication, report storage, and leaderboards—giving us real‑time updates and row‑level security with minimal config.
  • Deployment & DevOps: Rapid prototyping in bolt.new, frontend hosted on Netlify, backend on DigitalOcean droplets, and CI/CD pipelines to ensure every push is tested and live within minutes.

Challenges we ran into

  • Dynamic Content Crawling: Many modern sites render client‐side; spinning up headless Chrome sessions had to be carefully managed to avoid timeouts and memory leaks.
  • Scoring Consistency: pa11y reports can vary by page structure—so we built a custom algorithm to normalize scores, weight severity, and produce a single, comparable metric per URL.
  • Real‑time Leaderboard: Ensuring instant updates in the Hall of Fame without overwhelming Supabase with writes pushed us to batch commits and debounce client listeners.
  • OCR Accuracy: Tesseract.js required fine‑tuning of image contrast and binarization via Jimp to reliably extract text from a variety of site screenshots. This is used to detect possible website bot checks that may lead to false-positives.

Accomplishments that we're proud of

  • Secure, User‑Scoped Data: Automatic, seamless signup/login and private report storage—plus one‑click JSON export, all handled via Supabase Auth.
  • End‑to‑End Accessibility Pipeline: From URL input to rendered report, everything happens in under 15-20 seconds on average.
  • Custom Scoring Engine: Balances WCAG errors, warnings, and manual checkpoints into a single “Accessibility Score.”
  • Hall of Fame: A live, gamified leaderboard encourages healthy competition—this will allow public to improve accessibility and climb the ranks.
  • Polished UI/UX: A fully responsive dashboard, clear call‑outs for fixes, and downloadable JSON reports for stakeholders.

What we learned

  • Best practices for headless browser automation, error handling, and resource cleanup.
  • Leveraging Supabase for seamless auth, real‑time subscriptions, and secure row‑level database access.
  • Crafting a balanced, fair accessibility scoring model that aligns with WCAG but remains intuitive to non‑experts.
  • How to optimize OCR workflows in Node, including image preprocessing with Jimp.

What's next for AccessCheck

  • Browser Extension: Instant audits without leaving your site.
  • Automated Suggestions: AI‑powered recommendations for each error (e.g., “use this ARIA attribute,” “adjust text color to hex #…”). Right now, we have a predefined set of recommendations for multiple issues.
  • Team & Organization Workspaces: Collaborate, assign fixes, and track progress across multiple projects.
  • Expanded Reporting: PDF exports, CSV downloads, and integration with project management tools like Jira or Trello.

Built With

Share this project:

Updates