With the constant evolution of the internet and web technologies, web developers are spread thinner than ever. Accessibility is often overlooked. We wanted to make a tool which would provide an accessibility layer on top of webpages -- providing users with accessibility automatically without developers having to spend painstaking hours on such a thing.

What it does

The project is a Google Chrome Extension which provides an accessibility layer on top of web pages in two important ways

  • Automatically generate and add alt tags to images without them
  • Automatically make texts contrast with their backgrounds with a contrast ratio of at least 4.5:1

How we built it

The project is a Google Chrome Extension with a server-less architecture. We utilized AWS's API Gateway to communicate with our AWS Lambda computational unit. The Lambda function is responsible for generating the alt text for the image. This utilizes Azure's Computer Vision API to do so. Although computationally expensive, our software is heavily optimized and implements a 2-layer cache system, with the 1st layer as warm Lambda storage and the 2nd layer as AWS DynamoDB. In this way, once a page's alt texts have been generated and cached once, any users of the page will effectively instantly have access to them. Very little data is passed between the client & API Gateway (only a URL and a dictionary of alt texts), meaning that alt texts will (generally) be available before the images actually load. Thus, it also benefits people with limited internet access. Lastly, the automatic text contrasting is done in the frontend by "hacking" the mathematics of RGB coloring.

We also built a static site hosted by Amazon S3 for testing purposes.

Challenges we ran into

Web accessibility is an enormously difficult problem. There is a reason a tool like this doesn't exist already. The standards aren't clear cut from a programmatic perspective, making automated testing difficult. Specifically, automatically fixing the issues is a huge undertaking. Thankfully, with the help of our Microsoft Mentor -- Morgan, we discovered Accessibility Insights. We used this to test our extension's components to ensure they were working correctly.

Technical Challenges

  • utilizing CORS within a Chrome Extension; it requires a background thread, message sharing with that thread, and explicit permissions to make such requests
  • identifying the background color of a generic HTML tag; we ended up traversing the DOM upwards until we could safely identify a background color

Accomplishments that we're proud of

  • Integrating many different complex technologies together including 4 AWS Services, Microsoft's Computer Vision Azure API, and a Google Chrome Extension
  • Implementing a 2-layered caching system for optimized usage of our extension
  • Tackling an extremely important issue and being able to create a usable product in 24 hours

What we learned

  • By using Accessibility Insights, we learned many websites don't comply with the Web Content Accessibility Guidelines (WCAG); this was shocking and motivated us to help make a difference
  • A lot of amazing tech tools exist nowadays, but it's still up to us to use them and make an impact
  • It's quite motivating and fun to hack Assistive Tech

What's next for Extend a H.A.N.D.

  1. We plan to implement more features in order to make websites automatically more compliant with the WCA Standards.
  2. We'd like to build extensions for other browsers.
  3. We'd like to make a developer tool so that developers can easily and automatically make their sites accessible in the future.

Built With

Share this project: