Inspiration
Vision-impaired users may struggle to use many web pages because of readability, navigation, or structural issues. Screen readers help, but many web pages are still designed without screen readers in mind, leading to an image only being described as "image."
What it does
Contrast Text below WCAG AA (or AAA) is darkened or lightened just enough to pass, keeping its hue.
Link names - "Read more", "Click here" and icon-only links get names from their card heading or sentence, e.g. "Read more about Q3 reports".
Image descriptions - Images with no alt, or alt like IMG_2041.png, are described by Gemini and labelled "Auto-described".
Form labels - Unlabelled fields are named from nearby text, table headers, autofill hints or field names.
Button names - con-only buttons (×, ☰, search icons) are named from their symbol, icon classes or form.
Focus ring - A visible keyboard focus ring, even where the site removes it.
Page language - A missing <html lang> is detected on-device and set, so screen readers use the right voice.
Readable text - Users are able to change the text font on the webpage to a more readable font.
How we built it
We have a Google Chrome extension built using Typescript, HTML and CSS that scrapes webpages and adds or replaces HTML code as necessary. We use Gemini to scan images and add alt text to its HTML to be read out by a screenreader.
Challenges we ran into
When text is on an image or gradient, the background color can't be detected, so initially, we tried creating a halo or box behind the text to ensure it was readable. However, this ended up looking even worse.
Accomplishments that we're proud of
Creating a working product! We are also proud of successfully integrating the Gemini API.
Log in or sign up for Devpost to join the conversation.