Web-for-All

Inspiration

Over 96% of the top million websites fail basic accessibility standards, leaving the web broken for over 216 million people. Current tools are slow, expensive, and only produce reports. We were inspired to make accessibility real-time, actionable, and AI-powered, shifting it from a final QA check to a core, seamless part of the development workflow.

What it does

Web-for-All is the first dual-mode Chrome extension providing full-spectrum accessibility support for both the developer and the end-user: Developer Mode: Scans against WCAG 2.2 standards in real-time. It uses Gemini AI to deliver one-click code refactoring to instantly fix complex issues like missing alt text and poor semantic HTML. It turns vague reports into instant code fixes. User Mode: Provides an inclusive experience for consumers on inaccessible sites via our "User Overlay." Features include a Semantic Jump Menu for quick navigation, AI-powered Text Simplification, and High-Contrast/Focus Overlays for enhanced readability.

How we built it

We prioritized speed and Manifest V3 compliance using Vanilla JavaScript and ESBuild. We integrated Motion.js for smooth visual highlighting and feedback. The core is the Gemini API, which we optimized to provide sub-second contextual code fixes directly within the DevTools panel, ensuring a lightning-fast, real-time developer experience.

Challenges we ran into

Gemini API Latency: Achieving instantaneous AI-powered fixes required careful optimization of prompts and restructuring background messaging to prevent blocking the main browser thread.

Manifest V3 Restrictions: We had to rework smooth UI animations and dynamic script injection to comply with new security requirements, maintaining performance despite strict limitations.

Real-time Highlighting: Accurately visually marking specific violation elements without disrupting the page layout or user interaction proved technically challenging.

Accomplishments that we're proud of

One-Click AI Refactoring: Successfully integrating the Gemini API to not just suggest, but actually programmatically apply fixes to the live DOM.

The Dual-Mode Experience: Creating a tool that serves both the developer (creator) and the user (consumer), powerfully linking code compliance to human impact.

WCAG 2.2 Coverage: Building a comprehensive checker that accounts for the latest accessibility standards, future-proofing the web.

What we learned

We gained mastery in building high-performance Chrome extensions and learned to leverage Generative AI for practical code analysis and contextual feedback. We also deepened our understanding of the latest WCAG 2.2 guidelines, specifically addressing cognitive and visual focus requirements.