Accessibility Radar — Autonomous

Autonomous WCAG 2.2 accessibility auditor & auto-fixer powered by Playwright, real Accessibility Tree extraction, multimodal AI, and Kiro spec-driven development.

Comment

💡 Inspiration

Over 96% of the world’s top one million websites fail basic WCAG accessibility guidelines according to WebAIM. Traditional accessibility linters suffer from three fatal flaws:

  1. Blind to real browser rendering: They analyze raw HTML without computed CSS styles, transparent ancestor backgrounds, or the real Accessibility Tree exposed to screen readers (NVDA, VoiceOver, JAWS).
  2. Lack of visual awareness: They know if an alt attribute exists, but cannot tell if alt="image" is meaningless.
  3. Point out errors without fixing them: Developers are handed long lists of warnings without working code patches.

We built Accessibility Radar to close this loop: detect, explain, generate surgical patches, apply them, and re-validate in an autonomous closed loop.

🎯 What it does

Accessibility Radar inspects real web pages in headless Chromium, extracts the real browser Accessibility Tree, maps computed styles, visual element coordinates (rect), and live keyboard focus (Tab) order, and feeds them into multimodal AI (or our deterministic Smart Mock engine).

It audits the 5 core pillars of WCAG 2.2 (A & AA):

  • Contrast & Visibility (1.4.3 / 1.4.11): Computes relative luminance over blended backgrounds and enforces ≥ 4.5:1 (or 7:1 AAA).
  • Silent Interactive Elements (4.1.2 / 2.4.4): Identifies unlabeled buttons, links, and inputs, synthesizing context-aware aria-labels.
  • Media Semantics (1.1.1): Replaces generic or missing image text with multimodal AI descriptions.
  • Focus Order & Keyboard Navigation (2.4.3 / 2.4.7 / 2.1.1): Fixes tabindex > 0, restores suppressed :focus-visible outlines, and removes keyboard traps.
  • Structure & Landmarks (3.1.1 / 2.4.2 / 1.3.1): Validates lang, page <title>, headings hierarchy, and skip-to-content landmarks.

It offers two interfaces:

  1. Interactive Web Studio (python -m cli.main ui): Full FastAPI SPA with Dark/Light modes, Visual Hotspot Inspector, Tab Focus Map, Colorblindness & Low-Vision Simulator (Protanopia, Deuteranopia, Tritanopia, Cataracts), Screen Reader Simulator, and side-by-side Live Preview.
  2. Rich CLI (scan, fix, demo, ui): Interactive terminal tool for developers and CI/CD pipelines.

🛠️ How we built it (Built with Kiro)

Accessibility Radar was designed and developed end-to-end using Kiro's Spec-Driven Development:

  • .kiro/specs/accessibility-radar/: Detailed EARS requirements (requirements.md), modular architecture specs (design.md), and atomic implementation checklists (tasks.md).
  • .kiro/steering/: Steering documents (product.md, tech.md, structure.md) that maintained strict architectural consistency throughout development.
  • Tech Stack:
    • Python 3.10+
    • Playwright Async + CDP (Accessibility.getFullAXTree) for real browser state extraction.
    • OpenAI Multimodal API (OpenRouter, OpenAI, Grok, Gemini, Ollama) + Zero-config deterministic Smart Mock engine.
    • BeautifulSoup4 & difflib for unified patch generation and DOM rewriting.
    • FastAPI, Uvicorn & Vanilla JS for the zero-dependency Web Studio.
    • Typer & Rich for terminal interactions.

🚧 Challenges we ran into

  • Accurately computing color contrast against complex DOM trees with layered transparent backgrounds and CSS inheritance.
  • Filtering out DOM noise while preserving 100% of accessibility context to achieve an 80%+ reduction in LLM token consumption.
  • Guaranteeing deterministic offline fallback so anyone can run comprehensive audits and auto-fixes without needing paid API keys.

🏆 Accomplishments that we're proud of

  • Closed-loop autonomous remediation: Moving from broken markup to WCAG 2.2 AA compliant code in seconds with real re-audit verification.
  • Dual Mode (AI + Smart Mock): 100% functionality straight out of the box with zero external configuration required.
  • Full Kiro Spec compliance: Clean, transparent, open-source architecture with complete .kiro footprints.

📚 What we learned

  • The power of Kiro's Spec-Driven Development: structuring requirements and steering documents upfront dramatically accelerated development velocity and prevented architectural drift.
  • Nuances of the W3C Accessibility Tree and why DOM-only static linters miss the majority of real-world user accessibility barriers.

🔮 What's next for Accessibility Radar

  • CI/CD GitHub Actions bot to automatically open pull requests with accessibility patches on every commit.
  • Real-time accessibility audio simulation engine.
  • Direct CMS / React component patcher integration.

Built With

Share this project:

Updates

Submission history