User Dashboard
User Dashboard - Issue List
User Dashboard - Settings Page
Landing Page

Building Accessible4u: Enhancing Web Accessibility with AI

What Inspired Us

The 2024 Year-End Report by UsabilityNet revealed that over 4,000 digital accessibility lawsuits were filed in the U.S. last year, with eCommerce websites making up 77% of cases. A striking 41% of federal lawsuits targeted companies with prior ADA violations, highlighting recurring accessibility issues. These statistics underscored the urgent need for an efficient tool to help businesses proactively address accessibility concerns.

With this in mind, we built Accessible4u—an AI-powered accessibility analyzer that detects WCAG violations and provides actionable fixes. We wanted to create a solution that enables developers and business owners to ensure compliance without relying on ineffective accessibility overlays, which themselves were cited in 1,023 lawsuits.

What We Learned

Throughout the development process, we gained valuable insights into:
✅ The importance of automated accessibility testing using tools like axe-core.
✅ How AI models like LLaMA can assist in generating meaningful accessibility fixes.
✅ The legal implications of web accessibility and how businesses can mitigate risks.
✅ The complexities of translating complex Figma Designs to Real Frontend Code

How We Built Accessible4u

We designed Accessible4u to be intuitive and developer-friendly, integrating key technologies:

Tech Stack

Frontend: React.js (UI framework), Figma (design).
Backend: Node.js, Express.js.
Accessibility Analysis: axe-core (by Deque Labs).
AI-Powered Fixes: LLaMA 3.3-70B (via OpenRouter API).
Website Content Extraction: Puppeteer.

Key Features

✅ Scans websites for WCAG violations using axe-core.
✅ Categorizes issues by severity (Critical, Serious, Moderate, Minor).
✅ Highlights affected elements with code snippets for easy fixes.
✅ Provides AI-generated accessibility recommendations via LLaMA.
✅ Helps businesses achieve compliance and avoid lawsuits.

Challenges We Faced

🔹 Data Extraction Complexity: Websites with dynamic content posed challenges in accurately capturing accessibility issues. We optimized Puppeteer’s crawling capabilities to improve accuracy.
🔹 Generating Meaningful Fixes: AI-generated suggestions needed refinement to ensure they aligned with WCAG guidelines. We iterated on prompt engineering to improve results.
🔹 Frontend Creation: Given that we spent a lot of time switching between frameworks and programs for accessibility scanning. We didn't leave enough time for translating our ideas and thoughts into deployable code.

Conclusion

Building Accessible4u at DevFest 2025 (Columbia University Hackathon) was an eye-opening experience. Accessibility is not just about compliance—it’s about inclusivity. By empowering businesses with an AI-driven accessibility solution, we aim to make the web a more accessible place for everyone. 🚀

📌 GitHub Repo: Accessible4u
👥 Team: