Alt-access

• 

  Logo

Inspiration

Not enough attention is given to accessibility in web development. Many key aspects of accessibility are overlooked by web devs in trying to push their latest build to production. Additionally, developers often opt for aesthetics over accessibility, and this imposes a problem for visually impaired users.

Research is compiled by Sergio Luján-Mora addressing this topic. His work emphatically showed that webpages are frequently missing alt-text, and this can severly limit their usability. Alt-text is often flat forgotten or ignored.

What it does

• Take in a website URL and a set of boolean options that concern the users needs (i.e., visual impairedness, color blindness, etc.)
• Scrapes the site for header, paragraph, and image data. Reformats data with the same header and paragraph, and adds alt-text to the image(s) according to what Microsoft's Azure Computer Vision library suggests is in the image.
• Renders a new, simplified version of the image on the same page with the new alt-text.

How we built it

We used React to develop the front-end user interface. We integrated our web-scraper and Microsoft Azure’s CV library together, with Node.js.

Challenges we ran into

Our team is new to JavaScript development using React.js and Node.js, and we spent a lot of time familiarizing ourselves with the different aspects of it, as we ran into various nasty bugs along the way.

We also faced a lot of difficulty in trying to make the three difficult components of our program talk to eachother. We build a front-end which took form data, a web scraper which formatted data from a URL, and a way of getting suggested alt-text for an image, but taking them all together took the support of Build Day's mentors. We finally got it working in the end and it was quite rewarding.

Accomplishments that we are proud of

We gained solid progress on the idea we brainstormed. Each member worked productively on their respective tasks, and despite this being the first hackathon for most of us, our project came together slowly, with a functional front-end and a back-end that yields satisfactory results.

What we learned

We familiarized ourselves with the general workflow of hackathons along with tools and software required in these kinds of competitions.

We definitely learned a lot regarding web development using Node and React. More importantly, we grasped how to plan the development process effectively so that each module can come together timely.

What's next for Alt-access

-Implementing new features for re-rendering the webpage, such as correcting text for dyslexia.

-Research more into specific types of color-blindness, and develop relevant contrasting options.

-Integrated screen-reader

-Chrome extension

Built With

• azure
• cv
• node.js
• react