We were trying to find a gap in the tech world where a specific population was overlooked or excluded during the website development process. It was shocking to find out that not many laws and regulations enforced having accessible websites. Additionally, some who had accessible websites updated their website and they excluded accessibility, making their website only partially accessible. Because many websites aren’t accessible, it makes the life of those who rely on screen readers and braille machines much harder. Some websites make it impossible to shop, which then forces people who are blind or visually impaired to look elsewhere. We wanted to improve the internet navigation for those who are blind or visually impaired by providing an extension that would be for them and that would help them make an easier and faster decision on whether or not they should keep navigating a website that may or may not be accessible.

What it does

Révéler is a Chrome extension that grades websites based on criteria that people who are blind or visually impaired need when accessing websites online. There is a text-to-speech function as the automatic first option for people who use the extension, and it can read the extension out loud. Under the text-to-speech function is an accessibility test that users can run and a grade will be given for websites based on the criteria that we came up with. The criteria is a list of 5 basic accessibility needs for people who are blind or visually impaired: color contrast, large font, clear font, pictures, and text structure. Color contrast is important in order to distinguish between the background color and the text color for legibility. Large fonts are critical in order to locate the text and in order to identify the individual letters, numbers, characters for legibility. In addition to large fonts are clear fonts, where fonts must be clear in their letter, number, or character distinction, and is not in cursive or anything that can confuse one letter, number, or character with a different letter, number, or character. Pictures are also important, as visual representations can often portray more information than text. Lastly, we chose text structure, as text structure is important for understanding and processing information, i.e. bullet points are easier to read, understand, and process, compared to a large paragraph that says the same things.

How we built it

We used Figma to create wireframes and a prototype. Our focus was on the UI and UX of the prototype, to make sure it was easy to understand and easy for people who have accessibility needs on websites online. We researched the basic guidelines blind and visually impaired people need when accessing websites online and based our grading system on those guidelines.

Challenges we ran into

  • Understanding the needs of people with disabilities
  • Designing a new rubric to grade the websites that are simple and helpful for non-developers
  • Apply the text-to-speech function to a certain part of the content on the extension
  • Learning how to create a Chrome extension
  • Learning how to use an API with technologies currently unavailable

Accomplishments that we’re proud of

We are really proud that we were able to wireframe our entire extension on Figma with the animation/navigation and that we coded it. We made our own logo from scratch and were inspired by the word “reveal” and translated that in French. Our logo includes glasses that symbolize a closer look at something, aka “reveal,” and a “v” as well for the bridge of the glasses to emphasize the word. In our code, we were able to use two APIs and we used a lot of the document object model code to edit our CSS and HTML with Javascript.

What we learned

  • Project management and prioritization.
  • Ask for help when necessary.
  • How to design for accessibility.
  • How to create a Chrome extension.
  • How to use an API even if some of the commands are unavailable.
  • Teamwork on Figma and Git.
  • How to stay awake on a virtual hackathon.

What’s next for Révéler

While we did accomplish a lot of our original goal, there are a couple of things we would like to do next. We would like to play around with the Google Chrome accessibility audit API where we can filter the errors. Instead of having warnings and different severity levels, we can categorize the errors into easy-to-understand categories and live update it depending on the site. Another thing would be to put our Chrome extension in the Chrome extension store. We’d also love to add more features to our extension such as being a way to directly connect with the website administrator to inform them of accessibility issues. This extension is to make it easier for people who are blind or visually impaired and that includes helping them communicate with developers of accessibility gaps.

Built With

Share this project: