Read Assist

“ReadAssist: Karaoke-style highlighting for focused, accessible web reading.”

Comment

Inspiration

Online reading can be tough—especially for those with ADHD, dyslexia, or who just struggle to stay focused on dense paragraphs. We wanted to create a tool that makes reading interactive and enjoyable by visually guiding users word-by-word, turning any web page into a more accessible experience.

What it does

ReadAssist is a Chrome extension that highlights each word in real time as you read aloud or as it’s read via high-quality text-to-speech. With karaoke-style highlighting, customizable colors, and professional voices, ReadAssist makes following along with online content effortless and engaging.

How we built it

We built ReadAssist using Kiro IDE's Spec Mode to structure requirements, design, and tasks. Vanilla JavaScript powers the extension, with Chrome APIs for interaction and the Web Speech API for real-time speech recognition and synthesis. Premium voices are enabled via ElevenLabs, and everything is wrapped in a modular, accessible design—driven by AI-guided specs and hooks.

Challenges we ran into

  • Accurate word matching for highlighting without false positives elsewhere on a page.
  • Managing DOM manipulation for clean, in-order karaoke-style effects.
  • Integrating and gracefully handling errors with premium TTS services.
  • Implementing robust accessibility features and ensuring cross-browser reliability.

Accomplishments that we're proud of

  • Seamless, synchronized word-by-word highlighting for both TTS and live reading.
  • User-friendly interface with real-time customization and accessibility compliance.
  • Zero runtime errors and smooth performance across diverse websites.
  • Fully spec-driven workflow with Kiro, enabling rapid, error-resistant development.

What we learned

  • How AI-powered spec tools can accelerate and organize complex development from idea to deployment.
  • The importance of accessibility design in user experience.
  • Effective strategies for speech recognition and TTS integration in browser extensions.
  • How small UX details, like animation and keyboard shortcuts, make a big difference.

What's next for ReadAssist

  • Adding support for more languages and extended TTS provider integrations.
  • Introducing real-time reading analytics and comprehension tracking.
  • Expanding customization options for visual highlighting and voices.
  • Collaborating with educators and accessibility advocates to maximize impact.

Built With

Share this project:

Updates