AccessAI: Real-Time Web Accessibility Auditor

Real-time web accessibility auditor using Gemini 3. Simulates blind, elderly, and colorblind users to find UX issues and auto-generates CSS/HTML code fixes instantly.

Comment

Problem

Accessibility auditing is broken. Developers use automated checkers (WCAG tools) that generate false positives, miss nuanced UX issues, and don't understand how real users experience barriers. A screen reader user navigates differently than a colorblind user. Elderly users need different text hierarchy than young users.

Existing tools are: slow (batch processing), expensive, and produce unactionable outputs (generic WCAG violation lists).

Solution: AccessAI

AccessAI uses Gemini 3's advanced reasoning + multimodal vision to audit websites like a real disabled user would, then auto-generates production-ready CSS/HTML patches.

How It Works

  1. Input: User provides website URL + selects accessibility persona (blind, colorblind, elderly, motor impairment)
  2. Vision Processing: Gemini 3 receives website screenshot + DOM structure
  3. Reasoning Layer: Gemini 3 simulates the persona's experience:
    • For blind users: reads semantic structure, checks ARIA labels, evaluates screen reader compatibility
    • For colorblind users: analyzes color contrast ratios, checks reliance on color alone
    • For elderly users: evaluates font sizes, button targets, motion sensitivity
    • For motor-impaired: checks keyboard navigation, focus visibility, click target sizes
  4. Structured Output: Returns JSON with:
    • Issue severity (critical/high/medium)
    • CSS/HTML patches (copy-paste ready)
    • Implementation guide
  5. Safety Layer: Refuses requests that seem harmful

Why Gemini 3 is Perfect

  • Low Latency: Real-time feedback as developers test changes
  • Vision + Reasoning: Understands visual design and technical constraints
  • Long Context: Processes entire page DOM + visual state without truncation
  • Structured Output: Function calling ensures JSON reliability

Technical Stack

  • Frontend: Next.js + TailwindCSS for UI
  • Backend: Node.js/Python with Gemini 3 API
  • Integration: GitHub Actions for auto-testing CI/CD pipeline
  • Database: Supabase for storing audit history

Impact

  • Makes web accessibility accessible to solo developers
  • Reduces accessibility audit costs by 80%+
  • Generates WCAG 2.1 AA compliant code automatically
  • Targets 1B+ users with disabilities

Built With

Share this project:

Updates