AccessGuard AI

Dashboard
score and test
what the solution could be

Inspiration

Web accessibility is often treated as a checklist rather than a development problem. Existing accessibility tools can detect violations, but many developers struggle to understand why an issue matters, who it affects, and how to fix it.

AccessGuard AI was created to bridge that gap by transforming accessibility auditing from a simple error report into a developer-focused assistant.

The goal was to build a tool that not only identifies accessibility problems but also explains their impact and provides actionable guidance developers can use immediately.

What it does

AccessGuard AI analyzes websites for common WCAG accessibility issues.

A developer enters a website URL, and the system:

Crawls the webpage using Playwright.
Extracts and analyzes the rendered HTML structure.
Parses semantic information using BeautifulSoup.
Applies accessibility rules based on WCAG guidelines.
Groups similar violations to reduce report noise.
Generates a detailed accessibility report with:
- Issue type
- Severity
- WCAG reference
- Affected elements
- User impact explanation
- Recommended fixes

The result is a developer-friendly dashboard that helps teams understand and improve website accessibility.

How we built it

AccessGuard AI was built using a full-stack architecture:

React + Vite + Tailwind CSS for the frontend dashboard.
FastAPI for backend APIs.
Playwright for browser-based website analysis.
BeautifulSoup for HTML semantic parsing.
A modular explanation layer designed for future LLM integration.

The project follows a deterministic-first architecture where accessibility validation is handled through reliable rules, while AI capabilities can be added as an enhancement layer without changing the core scanning pipeline.

Challenges

One of the biggest challenges was designing a reliable analysis pipeline that could handle real websites.

We worked through challenges including:

Extracting meaningful information from dynamic websites.
Handling inconsistent HTML structures.
Creating accurate accessibility checks.
Avoiding duplicate issues in reports.
Building a scoring system that reflects accessibility performance.
Designing the application so future AI models can enhance explanations without replacing the core logic.

What we learned

Through building AccessGuard AI, we learned the importance of separating reliable engineering foundations from AI augmentation.

Instead of relying entirely on an AI model, we created a structured accessibility analysis pipeline where AI can provide additional intelligence while the underlying system remains predictable and explainable.