Inspiration
We researched existing accessibility issues on a variety of websites. This included those which were highly stylized and visually appealing, but not accessible to dyslexic users due to use of complex fonts.
Hence, we were inspired to build a solution that allows users to change a webpage's font to a dyslexic-friendly one.
What It Does
“FontShift” is a Chrome extension with dyslexia-friendly design that aims to reduce the struggles faced by dyslexic people in their online browsing experience. It does so by allowing them to change the webpage’s original font to dyslexia-friendly fonts, such as Open Dyslexic and Arial.
How We Built It
FontShift was built using HTML, CSS, and JavaScript, with React and TypeScript for the frontend, Vite for bundling, and the Chrome Extension API for browser integration.
Challenges We Ran Into
Challenges included managing GitHub merges, handling font differences across devices, and styling buttons so they look presentable while supporting multiple fonts.
Accomplishments That We're Proud Of
We finished our first-ever hackathon project using newly-learnt languages! Overall we have developed our frontend and backend skills.
What We Learned
We learnt a lot together as first-time hackathon participants. For all members, this was the first Vite + TypeScript app we have made. Rather notably, our proficiency with git for collaboration purposes has also improved immensely.
What's Next for FontShift
Additional functionality might allow users to adjust line and letter spacing, and modify background and text colours to create a high-contrast, accessible view of webpages. We may also implement more font options.
For the line spacing adjustment, the recommended 1.5px spacing could be provided for the user to toggle. Whilst for the letter spacing adjustment, the recommended 3.5px (aprox. 35% of the letter's width) could be provided. Both may have an option for the user to adjust the number to their needs.
As for achieving high contrast between background and text, we may try to generate accessible colour combinations given the low-contrast colours, and allow users to toggle those styles on.
Log in or sign up for Devpost to join the conversation.