Accessible Design
ShopiVi: Voice-Assisted Shopping
Accessibility-first Chrome extension for online shopping
ShopiVi is a Google Chrome extension that makes online shopping accessible for visually impaired users. At the click of a button, it scrapes product details - name, price, features, and fit - and reads them aloud using the Web Speech API. Built in 24 hours at the Girlcode x Aritzia Hackathon, it won 3rd Place.
Online shopping interfaces rely almost entirely on visual cues - product images, text layouts, color swatches, and interactive elements. For visually impaired users, navigating these experiences is frustrating and often impossible. Screen readers struggle with inconsistent product page structures, and most e-commerce sites lack meaningful alt text or audio descriptions.
2.2B
People with vision impairment worldwide
98%
E-commerce sites with accessibility gaps
0
Built-in audio product descriptions on major retailers
Inspiration
Inspiration
A teammate's friend's brother is mute, blind, and deaf - he has never been able to easily shop online. This personal connection drove our motivation.
Ideation
Ideation
Brainstormed accessibility solutions for e-commerce. Settled on a Chrome extension that could overlay on any shopping site without requiring retailer cooperation.
Architecture
Architecture
Designed the extension to scrape product page DOM elements (title, price, description, features) and pipe them through the Web Speech API.
Development
Development
Built the Chrome extension manifest, content scripts for web scraping, and the speech synthesis pipeline in JavaScript.
Testing
Testing
Tested on Aritzia's website and other major retailers. Iterated on scraping selectors to handle different page structures.
Pitch
Pitch
Presented the working prototype and accessibility vision to hackathon judges. Won 3rd Place.
ShopiVi works as a content script injected into shopping pages. It identifies product information through DOM traversal, extracts structured data into a JSON format, and uses the browser's built-in Web Speech API to convert text to natural-sounding audio. The extension activates with a single button click, requiring zero configuration from the user.
One-click activation - minimal interaction needed for accessibility
Browser-native speech synthesis - no external API dependencies or costs
DOM scraping approach - works on any retailer without their cooperation
Structured audio output - reads product name, then price, then features in logical order
Web Scraping
Different retailers structure their product pages differently. We built flexible selectors that could adapt to various DOM structures.
JSON Parsing
Converting scraped HTML into clean, readable JSON was the biggest technical challenge - handling inconsistent formatting and missing fields.
Speech Quality
Tuned speech rate, pitch, and pauses between sections so the audio output felt natural and easy to follow.
Extension UX
Designed the extension popup to be minimal and keyboard-accessible, consistent with our accessibility-first philosophy.
Accessibility as innovation
Designing for the most constrained users often produces solutions that benefit everyone - the audio descriptions were useful for multitasking shoppers too.
24-hour product development
The hackathon format forced rapid prioritization. We shipped a working product by focusing on one flow done well rather than multiple incomplete features.
Browser APIs are powerful
The Web Speech API eliminated the need for server infrastructure, making the extension lightweight and privacy-respecting - no data leaves the browser.
Personal motivation drives impact
Starting from a real person's experience rather than abstract problem statements kept the team focused and energized throughout the build.