AI-Powered Website Accessibility Tester

An AI-powered tool that scans websites for accessibility problems and provides instant, human-readable fixes with code suggestions.

Comment 2

Inspiration

As the digital world becomes increasingly complex, accessibility is still often overlooked in web development. Many developers struggle with interpreting WCAG standards or do not have tools that provide clear, actionable insights. We were inspired to create a tool that leverages AI to bridge this gap by not only identifying accessibility issues, but also explaining them in simple terms and suggesting code-level fixes — all with a modern, intuitive interface.

What it does

The AI-Powered Website Accessibility Tester allows users to input any public website URL and instantly receive an accessibility report. This report includes an accessibility score, categorized issues by severity (Critical, High, Medium, Low), AI-generated explanations, and suggested HTML fixes. It checks for common issues such as missing alt text, poor heading structure, unlabeled form elements, low color contrast, and more. The system uses Together.ai to generate explanations and fix suggestions, making the results understandable and actionable for developers at all skill levels.

How we built it

The project consists of a full-stack architecture built using:

Frontend:

  • React with TypeScript
  • Tailwind CSS for styling
  • Recharts for data visualization
  • Vite for build and development
  • Lucide React for UI icons

Backend:

  • Node.js with Express
  • Cheerio for HTML parsing
  • Together.ai API for AI-generated fixes and explanations
  • CORS configuration for frontend-backend communication

The frontend sends the URL input to the backend, which fetches the website content, parses the HTML with Cheerio, detects accessibility issues based on defined rules, and enhances the findings using AI. The frontend then visualizes the results and allows users to explore the issues in detail.

Challenges we ran into

  • Parsing inconsistent and non-standard HTML from real websites proved to be difficult
  • Handling asynchronous AI API calls while ensuring smooth frontend rendering
  • Managing CORS and cross-origin issues during development
  • Configuring deployment for both frontend (Netlify) and backend (local/hosted)
  • Ensuring accurate yet meaningful accessibility scoring and prioritization

Accomplishments that we're proud of

  • Built a fully functional AI-powered tool that detects and explains real accessibility issues
  • Designed an intuitive and responsive user interface with visual analytics
  • Integrated real-time Together.ai responses for generating fixes
  • Completed and deployed the full-stack application within the hackathon timeline
  • Ensured that the project itself practices accessibility in its design

What we learned

  • How to apply WCAG accessibility standards programmatically
  • Best practices for using Cheerio to analyze web page structure
  • Practical usage of Together.ai to generate context-aware text and code
  • How to streamline a full-stack app using Vite, TypeScript, and React
  • How to interpret raw HTML and generate helpful developer-friendly suggestions using AI

What's next for AI-Powered Website Accessibility Tester

  • Deploy the backend to a cloud platform for full production usage
  • Expand detection rules to cover ARIA roles, table semantics, and interactive elements
  • Enable PDF export of reports for audits and compliance documentation
  • Add browser extension support for one-click scanning of open tabs
  • Introduce multi-language support for global accessibility testing
  • Offer GitHub repository scanning for automated accessibility CI checks

Built With

Share this project:

Updates