Reactive Reader

A lightweight and powerful browser extension designed to make the web more readable for users with dyslexia, or ADHD. With one click, it transforms any webpage using proven readability improvements.

Comment

Reactive Reader

Inspiration

Our inspiration came from a simple observation: the web is not designed for everyone. Standard fonts, tight spacing, and pure black-on-white contrast—while fine for many—can create significant barriers for users with dyslexia, ADHD, or visual stress. We were inspired by the principles of inclusive design and wanted to create a tool that wouldn't just adapt the user to the technology, but would adapt the technology to empower the user. Our goal was to build a lightweight, instant solution that could make the vast expanse of the internet more accessible and less exhausting to navigate for everyone.

What it does

Reactive Reader is a browser extension that acts as an instant accessibility overlay for any website. With a single click, it transforms webpage text to drastically improve readability. Its key features include:

  • Applying Dyslexia-Friendly Fonts: It switches the default font to more readable options like Comic Sans.
  • Enhancing Text Spacing: It increases line height, letter spacing, and word spacing to reduce visual crowding, a major hurdle for readers with dyslexia.
  • Reducing Visual Glare: It adds a subtle, colored overlay to the background (a light peach or yellow tint) to soften harsh contrasts and make reading more comfortable.
  • Smart Toggling: Users can easily enable or disable the transformation on any site. The extension remembers the user's choice per tab, so the state persists even if the popup is closed and reopened.
  • Non-Destructive Design: It's carefully engineered to avoid breaking website functionality. Crucially, it preserves the original formatting of code blocks and pre-formatted text.

How we built it

Reactive Reader was built as a Chrome Extension using Manifest V3 for a modern, secure, and performant foundation. The tech stack is elegantly simple:

  • Frontend (Popup): Vanilla HTML, CSS, and JavaScript for the extension's popup interface.
  • Content Script: A core JavaScript file (content.js) that is injected into every webpage. This script dynamically adds or removes a <style> tag containing our powerful accessibility CSS rules to transform the page.
  • Chrome APIs: We leveraged several Chrome Extension APIs:
    • scripting and activeTab permissions to inject and modify page content.
    • storage API to locally save the on/off state of the extension for each individual tab, creating a seamless user experience.
  • CSS: The magic happens here. We wrote robust CSS rules using !important declarations to override existing site styles, targeted a wide range of HTML elements, and used techniques like ::before pseudo-elements with pointer-events: none to ensure our overlay didn't interfere with clicking buttons or links.

Challenges we ran into

  • CSS Specificity and Overrides: The biggest challenge was making our styles apply consistently across vastly different websites, all with their own highly specific and complex CSS. We spent significant time testing and refining our rules to be both powerful and non-destructive.
  • Preserving Functionality: Initially, our background overlay blocked all clicks on the page. Figuring out the pointer-events: none solution was a critical "aha!" moment that unlocked the extension's usability.
  • State Management per Tab: Implementing a logic where each browser tab could independently remember whether the extension was on or off was tricky. We had to learn the Chrome storage API and structure our data around unique tab IDs.
  • Testing Across Sites: Ensuring the extension worked on a simple blog was easy. Making it work reasonably well on complex web apps like GitHub or Gmail without breaking their UI required careful testing and targeted CSS exclusions (like for code blocks).

Accomplishments that we're proud of

  • Creating a Tangible Impact: We built a tool that genuinely improves the daily web experience for a real group of users. The visual transformation is immediate and impactful.
  • Excellent User Experience: We're proud of the polished popup UI, the intuitive toggle mechanic, and the persistent state per tab. It feels like a native browser feature, not a clunky add-on.
  • Robustness: After rigorous testing and iteration, the extension works reliably on a huge variety of websites, from news articles and documentation to complex social media feeds.
  • Learning and Applying New Tech: We successfully went from a basic idea to a fully functional product using the Chrome Extensions platform, which was a new area for us.

What we learned

This project was a deep dive into practical web accessibility. We learned:

  • The principles of inclusive design and how small changes in typography and layout can have an outsized impact on usability.
  • The intricacies of the Chrome Extensions API, particularly working with Manifest V3, content scripts, and message passing between different extension components.
  • Advanced CSS techniques for overriding existing styles and using pseudo-elements to create overlays.
  • The importance of thorough, cross-platform testing to ensure a consistent and reliable user experience.

What's next for Reactive Reader

  • Customization Suite: The biggest next step is a settings page where users can customize the extension to their specific needs: choosing their preferred font, adjusting the spacing values, and picking their background tint color and opacity.
  • Firefox & Edge Support: Porting the extension to be compatible with other major browsers that support the WebExtensions API.
  • Smarter Presets: Creating tailored presets for different needs (e.g., "Dyslexia," "ADHD," "Low Vision").
  • Text-to-Speech Integration: Adding a button to read selected text aloud, further aiding users who benefit from multi-sensory input.
  • Community-Driven Rules: Building a system to allow users to submit and share CSS overrides for specific sites that are particularly tricky to format.

Built With

Share this project:

Updates