AI4All

Empowering Accessibility, Enhancing Inclusion

Comment

AI4All: Our Hack4Health Journey

🧠 Inspiration

The inspiration for AI4All: Empowering Accessibility, Enhancing Inclusion stemmed from a deep commitment to bridging the digital accessibility gap. We were moved by the challenges faced by millions with disabilities—visually impaired users struggling with inaccessible web content, dyslexic individuals grappling with text-heavy interfaces, and non-native speakers or elderly users excluded by complex navigation.

The UN’s Sustainable Development Goal 3, “Good Health and Well-Being,” particularly its focus on equitable access to health resources, sparked our vision to create a tool that enhances digital inclusion. Personal stories from friends and family with disabilities further fueled our passion to build a solution that empowers everyone to engage with digital content effortlessly, fostering mental health and social equity.

📚 What We Learned

Participating in the CS Base Hack4Health hackathon was a transformative experience. We deepened our technical expertise and gained valuable insights:

  • Technical Skills:
    We honed our skills in Next.js and Tailwind CSS for building a responsive browser extension, Python Flask for backend development, and integrated AI models like YOLOv5 for image-to-text and Hugging Face NLP for text summarization. We also explored Google TTS and OpenAI’s Whisper for text-to-speech and voice input processing.

  • Accessibility Standards:
    We learned about Web Content Accessibility Guidelines (WCAG) and ADA compliance, ensuring our tool meets real-world accessibility needs, such as high-contrast modes and dyslexia-friendly fonts.

  • Team Collaboration:
    Coordinating across frontend, backend, and AI components taught us the importance of clear communication and modular development to integrate diverse technologies seamlessly.

  • User-Centric Design:
    Engaging with potential users (e.g., visually impaired or dyslexic individuals) via mock feedback sessions helped us prioritize features like voice navigation and multilingual support.

  • Time Management:
    Balancing feature development within the hackathon’s tight timeline pushed us to prioritize a Minimum Viable Product (MVP) while planning for future scalability.

🔧 How We Built AI4All

AI4All is a multifaceted accessibility tool comprising a browser extension, a conversational AI chatbot, and a content converter, designed to make digital content accessible to all.

🛠️ Technical Stack

  • Frontend:

    • Next.js for a fast, responsive interface
    • Tailwind CSS for accessibility-focused design (e.g., high-contrast mode)
    • TypeScript for type safety

  • Backend:

    • Python Flask to handle API requests for chatbot and content conversion

  • AI Models:

    • YOLOv5 for image-to-text descriptions
    • Hugging Face NLP for text summarization
    • Google TTS and OpenAI Whisper for text-to-speech and voice input

  • Deployment:

    • Frontend: Vercel
    • Backend: Render

⚙️ Development Process

1. Ideation

We brainstormed digital accessibility solutions focusing on real-time enhancements and multilingual support. Inspired by tools like screen readers, we aimed to integrate AI for a more interactive and inclusive experience.

2. Prototyping

Using Figma, we designed intuitive wireframes for the extension and mapped the chatbot’s flow for both text and voice input.

3. Implementation

  • Browser Extension:

    • Built with Next.js
    • Features: hover-to-speech, dyslexia-friendly fonts, high-contrast mode, voice command navigation (e.g., “scroll down”)

  • Chatbot:

    • Flask + Hugging Face NLP integration
    • Supported multilingual input and generated sarcasm-infused responses to keep users engaged

  • Content Converter:

    • YOLOv5 for image-to-text
    • Hugging Face for summarization
    • Output in dyslexia-friendly and braille-compatible formats (prototype)

4. Testing

We ran simulated user scenarios (e.g., a visually impaired user reading news) and improved usability based on feedback.

5. Deployment

  • Frontend deployed on Vercel
  • Backend deployed on Render
  • Live demo + GitHub shared for evaluation

🚧 Challenges We Faced

  • Peer Dependency Conflicts:
    Encountered npm issues with peer dependencies (Next.js, Tailwind, AI libs). Resolved using npm install --legacy-peer-deps.

  • AI Model Integration:
    Handling large AI models like YOLOv5 was complex. We used lightweight variants and cached responses to improve performance.

  • Multilingual Support:
    Testing speech accuracy across languages (English, Spanish, Hindi) was tough. Some languages had inconsistent audio quality.

  • Time Constraints:
    We focused MVP around the extension and chatbot, leaving the braille feature as a future goal.

  • User Testing:
    Without direct access to differently-abled users, we relied on simulators and WCAG guidelines to design features.

✅ Submission

We submitted:

  • Source code
  • Architecture diagrams
  • UI screenshots (in a single PDF)
  • demo video explaining the problem, showing key features, and highlighting impact
  • GitHub repo for transparency

🌟 Conclusion

The Hack4Health experience was a whirlwind of learning, collaboration, and innovation.
AI4All reflects our commitment to digital inclusion, leveraging AI to empower users with disabilities.

Despite challenges, we built a functional prototype that:

  • Solves real-world accessibility issues
  • Can scale into education, corporate compliance, and social equity sectors

We’re proud of our journey and excited to continue refining AI4All to make the digital world truly accessible for all.

Built With

Share this project:

Updates