Eqlec.tech

Inspiration

Everyone has different needs. Yet, many websites remain inaccessible for individuals needing more support to access their content. Thus, we wanted to incentivize developers to create accessible code by offering them an easy solution built on one line of HTML code.

What it does

We built an npm package that exports a custom HTML tag alongside JavaScript scripts to serve accessible web content to users who may struggle to navigate without it. Users can then log into our system, and we will dynamically serve them accessible content based on their specifications.

How we built it

We created a custom HTML tag that works alongside scripts to serve accessible content rendered by Google Gemini. When properties such as 'enable-large-font' are appended to the tag, our scripts call the Gemini API and serve the resulting HTML content.

The user requiring accessible web content directly controls the properties appended to our tag. When developers include our tag, a button pops up on the bottom of their page where the user can configure their accessibility settings. When done, their preferences are saved to a MongoDB database, and the page is updated. After that, the HTML is cached so that when they return, they do not have to wait for a model response and can see their content instantly.

Challenges we ran into

When building the express.js and passport.js backend for our website to handle authentication and session management, we encountered many issues with cookies being improperly sent. Thus, user authentication would often fail, and data would not be saved properly.

Accomplishments that we're proud of

We are proud of our team's ability to publish an npm package and create a full-stack website in one hackathon. We also did a lot of coding and managed to work through bugs quickly.

What we learned

We learned how to create npm packages, use express.js and passport.js, and just a lot more in general about using JavaScript outside of a React environment, given that most of our scripting for our HTML element was in vanilla JavaScript.

What's next for Eqlec.tech

We want to expand and include closed captioning of any audio playing in a tab, offer voice interaction with our UI, and include more accessibility options we did not have time to include during this hackathon. We also want to find more time-efficient solutions and direct DOM manipulation for rendering to give users the best experience using our tool.

Built With

• express-session
• express.js
• gemini
• javascript
• mongodb
• nextjs
• npm
• passport
• typescript