Accessible Web Transformer

Transform the modern browser into an accessible experience for everyone.

Comment

Inspiration

Over 1 billion people worldwide live with some form of disability, and yet the web—a resource meant to be universally accessible—often fails them.

  • Around 10–15% of the population is dyslexic.
  • 1 in 12 men and 1 in 200 women are color blind.
  • Millions live with low vision or visual impairments.

As students, professionals, and everyday users, they struggle to read, navigate, and engage with digital content that wasn’t designed to accommodate their special needs. We wanted to build a tool that levels the playing field and makes the internet a place where everyone can participate fully, without barriers.

That’s why we created Accessible Web Transformer—a one-click Chrome extension that empowers users with disabilities to customize the web to their needs.

What it does

Accessible Web Transformer is a comprehensive accessibility toolkit inside your browser.

✨ Features:

  • Text & Reading Support: Dyslexic-friendly font, high-contrast mode, adjustable text size
  • Color Vision Assistance: Filters for protanopia, deuteranopia, tritanopia, and general enhancements
  • Audio Tools: Text-to-speech for selected content or full page, with playback control and adjustable speed
  • Reader Mode: Distraction-free reading by stripping away ads, sidebars, and clutter to help user focus on content
  • Smart Preferences: Save settings globally or per site for a personalized experience and convenient usage of assistance
  • Quick Access: Keyboard shortcut for instant activation of popup page

In short, it transforms any website into a more inclusive, readable, and accessible experience.

How we built it

  • Chrome Extension (Manifest V3) to integrate directly into the browser
  • Content Scripts for injecting custom accessibility styles (fonts, spacing, contrast)
  • Web Speech API for text-to-speech functionality
  • Mozilla Readability for reader mode parsing
  • JavaScript, HTML, CSS for core features and UI
  • Storage API for per-site and global settings persistence
  • OpenDyslexic Font to improve readability for users with dyslexia

We designed the extension to be modular, so users can toggle features independently and customize their browsing experience.

Challenges we ran into

  • CSS Overrides: Some sites had aggressive styling that resisted or clashed with injected accessibility CSS. We solved this by layering styles intelligently without breaking layouts.
  • Color Blind Filters: Preserving site usability while applying the color aid filters required careful balance.
  • Text-to-Speech Reliability: Ensuring smooth playback across languages and handling large pages was tricky.
  • Per-Site Preferences: Syncing and saving preferences per domain while also supporting global settings was a technical hurdle, as the states initially conflicted and required intensive debugging to ensure compatibility.

Accomplishments that we're proud of

  • Built a working prototype that can be used right now to make the web more accessible.
  • Integrated multiple accessibility tools into one extension, instead of forcing users to install separate ones.
  • Created a distraction-free Reader Mode that works seamlessly on most article-style pages.
  • Designed the tool to be user-first—simple, intuitive, and customizable to fit potential users' needs.
  • Contributed toward digital inclusion for people who are often excluded from mainstream web experiences.

What we learned

  • Accessibility is complex but crucial: every disability type requires different solutions, and there’s no one-size-fits-all.
  • Human-centered design matters: technical functionality means little without usability and clarity for the people who need it.
  • Small details make big impacts: adjusting line spacing or contrast ratios can drastically change someone’s ability to read comfortably.
  • How to balance technical constraints (like browser APIs and site CSS) with accessibility goals.

What's next for Accessible Web Transformer

We’re excited to expand the project with more powerful features:

  • 🔍 OCR for Images: Extract text from images and make them readable with TTS
  • 🧠 AI-Powered Text Simplification: Summarize and rewrite complex text into simpler language for readers with cognitive disabilities
  • 🎨 Custom Font Uploads: Let users bring their own accessible fonts
  • 📊 Reading Progress Tracking: Help users pace their reading and scroll the page for them
  • 🌍 Cross-Browser & Mobile Support: Bring accessibility tools to Firefox, Edge, and mobile browsers

Built With

  • javascript
  • manifestv3
  • mozilla/readability
  • opendyslexic
Share this project:

Updates