git-together_WebEase

Making every website accessible in one click.

Comment

🌍 Inspiration

Accessibility is often treated as a checkbox: something a website either has or doesn’t. However, in reality, it exists on a spectrum.

People may experience a wide range of needs, such as:

  • Permanent low vision
  • Temporary eye strain
  • A broken arm
  • Difficulty focusing in high-stimulation environments
    As such, accessibility is not one-size-fits-all.

We were inspired by the idea that accessibility should not require expensive assistive tools or depend entirely on website developers.

Instead, accessibility should be something that users can control instantly, based on their current needs.

Rather than building another standalone accessibility app, we asked ourselves: What if accessibility was a layer that could adapt any website in real time?

🧩 What It Does

WebEase is a Chrome extension that applies an adaptive accessibility layer on top of any webpage. Users can instantly toggle modes that transform how they experience content:

  • High Contrast Mode
    Improves readability for low-vision users by altering the website's colour palette.

  • Reading Mode
    Applies dyslexia-friendly typography and optimized spacing.

  • Focus Mode
    Reduces visual clutter and highlights active reading areas.

  • Motor Mode
    Enhances keyboard navigation and improves interaction visibility.

Rather than assuming a single default experience works for everyone, WebEase lets users customize the webpage to suit their needs.

🛠 How We Built It

WebEase is built as a Chrome Extension using:

  • Manifest V3 architecture
  • Content scripts for real-time DOM manipulation
  • Modular mode handlers
    (contrastMode, readingMode, focusMode, motorMode, seizureSafe)
  • Utility wrappers for safe document access
  • Locally embedded accessibility fonts (OpenDyslexic, Lexend)
  • Popup UI for user-controlled toggles

Each accessibility mode exists in its own isolated module.

A centralized orchestrator listens for state changes from the popup interface and applies transformations to the active webpage in real time.

We intentionally designed the system to:

  • Avoid external APIs
  • Avoid backend dependencies
  • Operate entirely client-side
  • Apply and remove styles safely without permanently altering pages

This modular architecture allows modes to run independently or simultaneously without conflict.

⚙️ Challenges We Faced

One major challenge was safely modifying web pages without breaking layout or functionality.

Because we inject styles dynamically, we had to ensure:

  • Styles could be reversed cleanly
  • Multiple modes could run together without unintended stacking effects

Another challenge was ensuring the WebEase extension UI met its own accessibility standards. To tackle this, we ensured:

  • All toggles are keyboard navigable
  • Enabled/disabled focus states are clearly visible
  • Buttons are properly labelled

📚 What We Learned

Through this project, we gained hands-on experience with:

  • WCAG accessibility principles
  • Semantic HTML validation
  • Keyboard operability design
  • Dynamic DOM manipulation
  • Designing adaptive systems instead of enforcing defaults

Ultimately, we learned that accessibility is not a one-size-fits-all solution, but rather a collection of thoughtful decisions that adapt to diverse needs. Most importantly, accessibility improves the experience for everyone, not just individuals with permanent disabilities.

🚀 What’s Next for WebEase

With more time, we would:

  • Introduce GrayScale Mode for users with colour sensitivity needs
  • Launch Seizure Safe Mode which disables animations and pauses videos to prevent flashing triggers.
  • Support theme customization for Contrast Mode
  • Publish WebEase publicly on the Chrome Web Store

In the long term, we hope to make adaptive accessibility the default rather than an afterthought by incorporating as many accessibility modes as possible.

Built With

Share this project:

Updates