Read4Me

Inspiration

Reading can be challenging for people with visual impairments, dyslexia, ADHD, or those who simply prefer auditory learning. Many existing tools require accounts, uploads, or subscriptions, which creates barriers. We wanted a zero-cost, privacy-first solution that works instantly in any browser—even offline.

What it does

Read4Me is a web app that: Converts text to speech in real time using your device’s built-in voices. Highlights words as they are spoken and auto-scrolls for easy following. Lets users adjust voice, speed, pitch, and volume. Offers keyboard shortcuts, high-contrast mode, and offline PWA support. Works entirely in the browser—no data leaves your device.

How we built it

HTML, CSS, JavaScript for a lightweight, dependency-free app. Web Speech API for text-to-speech. Service Worker + Web App Manifest for offline capability and PWA install. Accessibility-first design: semantic HTML, ARIA roles, WCAG-compliant colors, keyboard navigation.

Challenges we ran into

Handling voice availability delays across browsers (added polling fallback). Ensuring word-by-word highlighting works despite inconsistent onboundary event support. Maintaining zero dependencies while adding rich features like auto-scroll and high-contrast mode.

Accomplishments that we're proud of

Built a fully functional, installable PWA with no server and no cost. Delivered real-time highlighting and keyboard shortcuts for accessibility. Created a solution that is privacy-first and works offline.

What we learned

The quirks of the Web Speech API and how to handle cross-browser differences. How to design for accessibility and privacy by default. The importance of progressive enhancement for inclusive design.

What's next for Read4Me

Add OCR support for reading text from images or PDFs. Enable audio export for offline listening. Expand language support and add voice presets. Explore AI-powered summarization for long texts.

Built With

• api
• app
• css
• html
• javascript
• service
• speech
• web
• worker