visable

VISABLE - "making the invisible, visible."
1st popup
customization configuration example 1
generate alt text for images: "long"
customization configuration example 2
generate alt text for images: "short"
generate alt text for images: "medium"

Inspiration

In today's digital era, the internet is a gateway to information, opportunities, and connections. Yet, for visually impaired users, this gateway is often obstructed by websites that fail to prioritize accessibility. Many sites merely check the minimum boxes for ADA compliance, while others overlook inclusivity altogether. We were inspired by the need to bridge this gap, to amplify the voices of those who feel invisible online. Our mission became clear: increase visibility and empower visually impaired users to access the web seamlessly.

What it does

visAble is a Chrome extension designed to enhance web accessibility for visually impaired users. It transforms websites by generating accurate alt text using the OpenAI GPT-4 model, producing precise and descriptive alt text for images lacking proper descriptions. The extension allows users to customize text options, enabling them to standardize font styles, adjust sizes, and improve readability. It includes a color contrast converter that modifies color schemes to ensure optimal contrast and visibility. Additionally, visAble offers dynamic summarization, simplifying complex text to provide summaries that aid those with cognitive disabilities. It also enhances navigation by offering dynamic button styling and navigation adjustments for a more intuitive browsing experience.

How we built it

We developed visAble using a combination of modern technologies. The backend was built with Flask to handle extension functionalities and server requests. We leveraged the OpenAI GPT-4 model to generate alt text and text summaries, integrating AI seamlessly into the extension. For the frontend, we created a user-friendly interface using HTML, CSS, and JavaScript to ensure seamless interaction. We employed the Chrome Extension API to integrate the extension directly into the user's browser, enabling real-time webpage modifications.

Challenges we ran into

One significant hurdle was establishing a reliable connection with the OpenAI API. Ensuring fast and accurate responses required optimizing our requests and handling potential latency issues. Additionally, integrating the AI model within the constraints of a Chrome extension posed unique challenges, particularly in maintaining user privacy and managing API usage limits.

Accomplishments that we're proud of

We're proud to have developed a comprehensive MVP, successfully building all core features with a focus on customizability and user enhancement. We achieved high accuracy by providing exceptionally accurate image descriptions and text summaries, greatly improving user experience. Moreover, we enhanced accessibility features, going beyond basic requirements to include functionalities that address various aspects of web accessibility.

What we learned

This project was a profound learning experience. We gained insights into web accessibility standards, deepening our understanding of the needs of visually impaired users. We learned how to use Flask and effectively incorporate AI models into practical applications, enhancing our skills in AI integration. Additionally, we recognized the importance of designing with empathy and accessibility at the forefront, reinforcing the value of user-centered design.

What's next for visAble

Looking ahead, we plan to integrate text-to-speech functionality, incorporating existing tools to further aid users with auditory feedback. We aim to expand compatibility by adapting visAble for other browsers and platforms. Furthermore, we intend to engage with the community by collaborating with the visually impaired community to gather feedback and continuously improve the extension.