AccessAble

• 

  Home page for the project

Inspiration

Many websites lack proper accessibility features, making it hard for people with disabilities to use them effectively. We wanted to create a simple tool that empowers users to customize and improve accessibility in real time, helping bridge the digital divide.

What it does

AccessAble allows users to instantly adjust web content for better accessibility — including text-to-speech, font size control, color contrast adjustments, and keyboard navigation support. It also provides an accessibility audit score to highlight issues on any website.

How we built it

We used React for a dynamic frontend that applies accessibility settings live on the page. The backend is built with Node.js and Express, managing user profiles and storing preferences. We integrated Web Speech API for text-to-speech and used contrast-checking libraries to ensure color accessibility. Firebase handles authentication and data storage.

Challenges we ran into

Implementing real-time changes without page reloads was complex, especially ensuring compatibility across different website layouts. Integrating text-to-speech smoothly and managing asynchronous backend calls without affecting user experience also took time to optimize.

Accomplishments that we're proud of

We created an intuitive interface that even non-tech users can navigate easily. Our app effectively improves accessibility without requiring website owners to make changes, empowering users directly. The accessibility audit tool also raises awareness of common issues users face.

What we learned

We gained deep experience in web accessibility standards and real-time React state management. Integrating third-party APIs like Web Speech API taught us how to enhance UX while maintaining performance. We also improved our backend design to handle user data securely and efficiently.

What's next for AccessAble

We plan to develop a browser extension for seamless integration with any site, expand accessibility options (e.g., sign language avatars), and incorporate AI-driven suggestions for users to better customize their experience. We're also exploring partnerships with advocacy groups to scale impact.

Built With

• css
• css3
• framer
• html5
• markdown
• mongodb
• motion
• node.js
• react
• react.js
• router
• smooth
• supabase
• tailwind
• ui