Open-Accessibility

Project Overview

First place winner at MadHacks, one of the largest hackathons in the Midwest. Open-Accessibility is a browser extension that adds powerful accessibility features into any website, making the web more inclusive for users with disabilities.

Developed in 24 hours during an intense hackathon environment, this project combines React and browser extension APIs to deliver real-time accessibility enhancements that work on any website.

Tech Stack:

• React (extension UI)
• Browser Extension APIs (Chrome/Firefox)
• CSS injection for style modifications
• Local storage for user preferences

Achievement:

• 🏆 1st Place Overall at MadHacks
• Competed against 50+ teams
• Built in 24 hours
• Working prototype with live demonstration

The Problem

Web Accessibility Gap

Millions of users with visual, cognitive, or motor impairments struggle with websites that weren't built with accessibility in mind. While WCAG guidelines exist, adoption is inconsistent:

• 70% of websites fail basic accessibility checks
• Existing solutions are limited to specific platforms
• Built-in browser tools offer minimal customization
• Users must adapt to each site's implementation

Our Solution: A universal extension that brings accessibility features to ANY website, regardless of how it was built.

Hackathon Development Process

24-Hour Timeline

Hour 0-2: Ideation & Planning

• Identified accessibility as impactful problem
• Researched existing solutions and gaps
• Defined MVP feature set
• Divided tasks among team

Hour 2-8: Core Development

• Set up extension boilerplate
• Implemented text style modification
• Built React UI component library
• Tested on various websites

Hour 8-16: Advanced Features

• Developed color scheme system
• Added settings persistence
• Cross-browser compatibility testing

Hour 16-22: Polish & Demo Prep

• UI/UX refinements
• Bug fixes and edge cases
• Created demo presentation
• Prepared live demonstration

Hour 22-24: Final Testing

• End-to-end testing on popular sites
• Performance optimization
• Last-minute fixes
• Rehearsed pitch

Team Collaboration

Roles:

• Frontend: React UI development
• Extension Logic: Content scripts and background service
• Design: UI/UX and visual design
• Presentation: Demo and pitch preparation

Tools:

• Git for version control
• Discord for communication
• Google Slides for presentation

Future Enhancements

Planned Features:

1. Voice control: Navigate and configure via speech
2. Reading mode: Distraction-free article view
3. Translation: Built-in language translation
4. Speed reading: RSVP (Rapid Serial Visual Presentation)
5. Keyboard shortcuts: Power user features
6. Sync settings: Across devices via account

Technical Improvements:

• Move AI model to TensorFlow.js for better accuracy
• Add more color schemes (solarized, gruvbox, etc.)
• Support for Safari and Edge
• Accessibility API integration

Key Takeaways

Technical Lessons

1. Browser Extensions Are Powerful: Access to modify any site opens endless possibilities
2. React Works Great: Component-based UI perfect for extension popups
3. Testing Is Critical: Edge cases abound when dealing with arbitrary HTML
4. Performance Matters: Users won't tolerate slow extensions
5. Privacy Is Paramount: Users rightfully scrutinize extension permissions

Hackathon Lessons

1. Scope Appropriately: MVP must be achievable in time limit
2. Demo Everything: Working prototype beats slides every time
3. Impact Wins: Judges favor projects solving real problems
4. Team Coordination: Clear roles prevent duplicate work
5. Practice Presentation: Delivery matters as much as content

Social Impact

Accessibility isn't optional—it's a fundamental right. This project reinforced that inclusive design benefits everyone:

• Dyslexia-friendly fonts help all readers
• High contrast helps in bright sunlight
• Content highlighting aids focus for everyone

Building Open-Accessibility wasn't just about winning—it was about making the web better for millions of users who deserve equal access to information.

Conclusion

Winning first place at MadHacks validated that accessibility is both important and achievable. Open-Accessibility proves that a small team with the right focus can build tools that make a real difference in people's lives.

The project showcases:

• Rapid development skills: 24-hour MVP to working product
• Technical breadth: React, browser APIs, AI/ML integration
• Design thinking: User-centered problem solving
• Social awareness: Building for inclusivity
• Competitive success: Beating 100+ teams More importantly, it demonstrates that great engineering serves human needs. The best technology isn't just technically impressive, it makes life better for real people. Open-Accessibility does both.