AccessMe

AccessMe Logo

Inspiration

A few of us took a Computer-Human Interaction course this summer where we had to evaluate websites and one of the criteria was based on universal accessibility. While brainstorming for an idea that would help people, we thought of how a large number of websites were lacking accessibility functions and many different people would struggle to use certain websites. We hope to provide access and equal opportunity to people with diverse abilities to surf the web through just a few clicks of a button including people with disabilities like vision impairments and dyslexia and try to create a relaxing environment for those with stress and anxiety.

What it does

AccessMe is a chrome extension that provides an all-in-one solution to personalize your browsing experience and takes us one step closer to universal accessibility on the web.

Our favorite features include:

Text to speech: allows users to highlight text and have it be read to them. To accommodate different user needs there are also options to change the voice, speed, and pitch of the audio. This acts as a built-in screen reader for the visually impaired. We used WebSpeechApi to accomplish this.
Content warnings/censoring: censors words or gives pop-up alerts based on a list of words the user provides letting users of all ages feel safe on the internet and alerts users. Translations: lets users search for the definition of words from their current tab. This lets users get the most meaning out of their browsing experience.
Font style/size: allows changing of page fonts to certified web-safe fonts, as well as customize the font size for better viewing. This is beneficial for those with dyslexia, low-vision, and more.
Dark/light mode saturation/brightness: allows users to toggle between dark and light mode and changing the saturation and brightness, to help make text more legible for people with color blindness and to help with eye strain.
Ambient sounds: creates a relaxing nature background sound as browsing through the web which allows them to increase concentration. The volume of each nature sound can be customized.

How we built it

We used html and css to structure and style our chrome extension popup and had multiple javascript files that provide the functionality. Web Speech API was used to implement the text-to-speech feature and word definitions come from Free Dictionary API.

Challenges we ran into

It was our first time creating a chrome extension so it was a challenge figuring out how the extension popup would communicate with web pages and manipulate it so we could implement dark mode and change font style and size. We also had to keep in mind that as it’s a chrome extension, the features should work universally for all sites.

Accomplishments that we're proud of

Learning to use APIs Communicating between pop-up, content, and background scripts Saving users’ choices, such as dark more enabled on or the words that warrant a content warnings, so that if the user reloads or comes back to the page, their settings are saved

What we learned

Developing a chrome extension was something none of us had done before. Some things we learned along the way are:

Calling APIs
Embedding audio and playing it in the background when clicking out of the popup
Sending messages between background, content, and popup scripts
Using LocalStorage to store information

What's next for AccessMe

In the limited time, we only implemented a few accessibility features in our extension so for the future, we would look at cleaning up the code and fixing any bugs as well as adding any more features that might be useful.