Lusent.js

Inspiration

In essence our goal is to provide dyslexic people a seamless experience on the web, where they can enjoy the extensive beauty of web design, without unfriendly practices making information illegible for them. We want minimum modification to the website so that it is both user-friendly to our target population and maintains the integrity of the intended design.

What it does

To make information ledgible for people with dyslexia, we could simply change every font type and colour to OpenDyslexic and Black, every background to white and make sure the minimum font size is above 12. But we wanted to make sure that the experience of browsing the web wasn't compromised. So we make minimum modifications as necessary to ensure that people with dyslexia have no trouble browsing the web and provide a Help Panel that can assist them on particular segments that may be difficult to read. Most of the work is done in the background as the web page loads in order to insure that the user experience is not compromised by our product.

How we built it

We used Google Chrome API and JQuery to create a Chrome extension that evaluated the portions of webpages that could pose trouble to dyslexic people. We made small modifications where ever necessary. For example, modifying colour combinations, changing troublesome fonts, Left-aligning the text and changing all italics and underlines to other identifiers. However we recognise that the extent of dyslexia varies amongst those affected, so we added a Help Panel to allow people to customise their personal preferences and make temporary modifications to particular paragraphs when required. Finally we used the Google Text2Speech API to allow people to hear highlighted segments in a single click.

Challenges we ran into

Figuring out what is "message passing" in google chrome. How asynchronous programming works, why we need callbacks, the roles of background.js and contents.js, how to use git and github for version control, and researching JQuery functions and events, and also including jquery before other scripts that use its functions

Creating a general extension that works on all webpages, irrespective of design. Figuring out how to get the background color of a particular piece of text, since the color may have been that of a parent tag.

Accomplishments that we're proud of

We finished all primary functions we aimed to achieve. We were also pleasantly surprised by the user-friendliness of Google Text2Speech API. We are proud that we have learned so much about Google Chrome API and using JQuery in the past 24 hours, while still managing to create a minimum viable product.

We are also far more aware of the problems dyslexic people face on the web, even though research shows that good design practices can eliminate most of these. We are proud that we were able to leverage existing research to create something that could potentially help a sizeable section of the population have access to the web and be able to achieve their goals and dreams.

What's next for Us

Developing our Chrome Extension product further so that attention can be given to minute details for more and more elements on web pages. Adding additional features into the Help Panel to make user experience much better. Implementing features from other research papers and projects on the use of the internet by people with similar challenges.