WebAble

Inspiration

The internet should be inclusive, yet many websites unknowingly create barriers for users with disabilities. Inspired by this idea, we set out to build WebAble, a Chrome extension that not only identifies accessibility issues but also makes fixing them intuitive. By integrating AI, we aimed to provide deeper insights and actionable solutions, making web accessibility effortless for developers and designers.

What it does

WebAble scans web pages for accessibility issues and highlights problem areas in real time. It detects issues such as WCAG violations, missing or broken links, color contrast issues, and buttons with no text. Additionally, we leverage Google's Gemini API to generate a concise accessibility summary, providing users with a high-level overview of the site's accessibility score, key issues, and improvement recommendations. This AI-driven analysis helps developers prioritize fixes and gain a better understanding of their website’s accessibility compliance.

How we built it

While building WebAble, we read through the WCAG documentation and designed a variety of flags to facilitate our extension. Inserting these many elements into a website can become performance-heavy very quickly, so we also had to be mindful of how efficient our code was to make the usage of our extension viable. For the front-end, we designed a sidebar that gives users an at-a-glance view of all the errors on their webpage, a description of all the various flags and what they mean, and an AI summary powered by Gemini of the website that provides meaningful recommendations rather than just issue detection.

Challenges we ran into

Integrating the Gemini API for the first time brought several challenges, from understanding how to structure API requests to ensuring that the responses were both relevant and actionable. Communicating between the backend and frontend also proved to be tricky, as we initially struggled with data flow and synchronization, leading to delays in rendering accessibility summaries. Additionally, we had to navigate Chrome’s Content Security Policies (CSP), which restricted how we could load external scripts and handle API calls. To comply with these security policies, we had to refactor parts of our architecture, ensuring that all requests were properly routed through the extension’s background service while maintaining efficiency. Overcoming these hurdles made WebAble more robust and secure, ensuring seamless performance without violating browser security protocols.

Accomplishments that we're proud of

We successfully built a lightweight yet powerful Chrome extension that combines real-time accessibility scanning with AI-powered summaries, making it easier for developers to understand and act on issues. Our intuitive UI visually marks accessibility violations and provides clear, step-by-step recommendations. By integrating AI, WebAble goes beyond simple issue detection and offers meaningful insights, helping developers improve inclusivity in their designs.

What we learned

Through building WebAble, we gained hands-on experience in developing Chrome extensions, from understanding how to interact with the Chrome extension API to optimizing real-time page analysis without affecting performance. We also learned how to effectively integrate the Gemini API, refining AI-generated insights to provide meaningful and actionable feedback. Additionally, diving deep into web accessibility standards exposed us to many overlooked WCAG violations, such as improper ARIA attributes, focus order issues, and subtle color contrast problems that significantly impact users with disabilities. This project not only expanded our technical skills but also deepened our understanding of how small accessibility improvements can make a big difference in creating a more inclusive web.