Read Easy: Dyslexia-Friendly Browser Extension

Read Easy is a browser extension designed to make literature more accessible and enjoyable for everyone, especially for individuals with dyslexia. By leveraging dyslexia-friendly tools, such as the OpenDyslexic font and text-to-speech features, Read Easy aims to enhance the reading experience for users with dyslexia.

Features

• Dyslexia-Friendly Fonts: Utilize over 200+ fonts, including 6 OpenDyslexic fonts, specifically designed to increase readability for users with dyslexia.
• Text-to-Speech: Convert text into speech to assist users with dyslexia in reading and comprehending text more easily.
• Customizable Reading Experience: Customize font size, color schemes, and layouts to suit individual preferences and needs.
• Color and Contrast Adjustment: Options to modify background and text colors to reduce strain.
• Layout Optimization: Simplifies page layouts to enhance focus and understanding.

Inspiration

The inspiration for Read Easy came from a desire to improve accessibility in reading for individuals with dyslexia. As students, we often encounter text-heavy environments, and for people with dyslexia, this can create unnecessary challenges and stress. We wanted to build a tool that would not only make reading more inclusive but also create a customizable experience to help anyone enhance their reading comfort and focus.

What it does

Read Easy is a browser extension that enhances reading accessibility, especially for users with dyslexia. It includes features such as dyslexia-friendly fonts (like OpenDyslexic), text-to-speech conversion, and customizable settings for font size, spacing, color schemes, and layout optimization. This ensures that users can tailor their reading experience to reduce strain and improve comprehension.

How we built it

We built Read Easy using HTML, CSS, and JavaScript, focusing on a responsive and customizable user experience. The core functionality, such as font switching, color adjustments, and layout customization, is powered by JavaScript to dynamically manipulate the DOM. We used the Web Speech API for text-to-speech, allowing users to adjust voice speed, volume, and pitch. Preferences are stored using Chrome’s Storage API, ensuring settings persist across sessions. The UI was designed to be simple yet flexible, making it easy for users to modify their reading experience while maintaining cross-browser compatibility on Chrome and Firefox.

Challenges we ran into

One of the challenges we faced was ensuring that the text-to-speech feature worked consistently across different websites, especially in handling various types of content. Another challenge was optimizing the extension for different browsers, as each browser has its own way of handling extensions. We also had to ensure that the user interface was simple and intuitive for users to customize their settings without being overwhelmed.

Accomplishments that we're proud of

We’re proud of successfully integrating over 200+ font options, including multiple OpenDyslexic fonts, and creating a seamless text-to-speech feature that helps users with dyslexia. Another accomplishment was developing a highly customizable user interface that makes it easy for users to adjust font size, color schemes, and spacing in a way that suits their specific needs.

What we learned

We learned a lot about accessibility in web development and how small changes, such as font choice and spacing, can make a huge difference in user experience. Additionally, we learned the importance of user-centered design, especially when building tools for individuals with specific needs, like dyslexia. This project also gave us experience in developing browser extensions, which was new territory for our team.

What's next for Read Easy

Next, we plan to add support for more languages and extend the text-to-speech capabilities. We also aim to publish Read Easy in the Chrome Web Store and Firefox Add-ons Marketplace for easier access. We’re excited about gathering more user feedback to continuously improve the extension and potentially collaborate with accessibility experts to enhance its effectiveness even further.

Made with ❤️ by Sherwin

Built With

• css
• html
• javascript
• speechsynthesisapi