Better Web

Proud to share BetterWeb, a Chrome extension we built during Canada's largest hackathon GenAI Genesis that empowers users with disabilities to take control of their web experience

What it does:

BetterWeb is a customizable AI-powered accessibility toolkit for people with:

• • ADHD
• • Dyslexia
• • Color blindness
• • Sensory sensitivities
• • Cognitive impairments
• • Visual impairments

Startup Page:

From soft-tone theming to real-time text-to-speech and layout adjustments, BetterWeb adapts the web to you — not the other way around.

How we implemented AI:

To enable real-time, AI-powered web customization via natural language, we integrated Cohere’s Command R+ model and then fine-tuned a custom variant using structured prompt-completion data focused specifically on web accessibility tasks.

The objective was to allow users to input natural language commands (e.g. "increase font size of all paragraphs") and dynamically generate JavaScript that modifies the page's DOM in a meaningful, safe, and context-aware way — without ever touching the code.

We used Cohere’s v2 endpoint and their fine-tuning pipeline. Our dataset contained hundreds of paired samples in JSONL format, like:

• "prompt": "Make all links red and underlined", "completion": "document.querySelectorAll('a').forEach(el => el.style.color = 'red'; el.style.textDecoration = 'underline';);"

This model was fine-tuned to specialize in generating vanilla JS DOM manipulation code directly from accessibility-related user instructions.

• • Targeting elements via tag/class/role
• • Applying multiple style rules per element
• • Scoping modifications to avoid breaking layout
• • Avoiding redundant or unsafe operations (e.g., mass deletes, script injections)

Tech Stack:

• HTML/CSS/JavaScript: Core front-end technologies for building the Chrome extension interface.
• Chrome Extensions API (Manifest V3): Browser integration for popup, content, and background scripts.
• Cohere API (v2): Fine-tuned LLM for generating DOM manipulation code from natural language.
• Google Text-to-Speech (TTS): For reading highlighted text aloud to support blind/low-vision users.
• DOM Manipulation: Dynamic accessibility changes based on AI instructions.
• JSONL Dataset: Custom structured training data for model fine-tuning.
• Chrome Storage API: Used to persist user accessibility preferences and settings locally in the browser.

Want to try it for yourself? Clone the repo here.

Let’s build a better, more inclusive web — together.

Huge thanks to everyone who contributed to BetterWeb: Vansh Anand, Warrick Tsui, Sawaab Anas and Suhaana Khullar.