Accessibility Focused Web-Page Redesigner

Our model will transform any website into an accessible, user-friendly experience in order to enhance web content for individuals with varying mobility, visual, and cognitive needs.

Comment 1

Inspiration

Our inspiration for this project came from our teammates’ recent exposure to accessibility issues and the potential that AI possesses (when applied properly) to enhance user experiences for people with various disabilities.

What it does

  • Our project utilizes Google’s Gemini AI model to redesign websites in order to make them more accessible.
  • It will take a URL of a website as an input, analyze the accessibility of the website by many different metrics (such as how difficult it is for individuals with mobility, visual, and cognitive impairments to navigate the website), and re-design the website to make it easier for those users to access the web content.
  • It does this by allocating the tasks to different AI “specialists” in order to make the process as efficient and consistent as possible.

How we built it

  • We utilized Breadboard to create personas of various AI “specialists” that would view the website we input. The formed circuit of AI components would create a spec for the next specialist to follow when performing its task. For example, the Web Developer would perform its task providing adjustments to a site according to the evaluations from the Accessibility Evaluator and Mobility Specialist.
  • We tested with a handful of inaccessible websites to fine-tune specialist personas to aid our project in creating more consistent desirable outputs.
  • We created additional components to focus on more specific needs such as mobility accessibility.

Challenges we ran into

  • We had to consider and test multiple AI models to generate the redesigned web pages to see which one had the most consistent and best quality outputs. Some had only given basic and mundane HTMLs that weren’t uniquely stylized.
  • We had to add AI personas that looked into specific accessibility categories, such as mobility and visual, when the outputs didn’t consider all WCAG guidelines, like larger buttons for easier mobility access.

Accomplishments that we're proud of

  • We were able to run some iterations using our Breadboard to create more accessible websites for existing websites that had major accessibility issues, and based on the recommendations outputted by each “specialist”, we could see which accessibility issue was being resolved.
  • We addressed an issue that affects a large part of our population and goes largely unnoticed - Over 96% of the world’s top one million web pages are not accessible.

What we learned

  • We all learned how to use Google Breadboard, a technology none of us had previous experience with.
  • We learned more about various accessibility issues and standards for websites, as well as how to improve these. For example, having an appropriate color contrast ratio for visual disabilities as well as larger button sizes and keyboard navigation options for motor disabilities

What's next for Accessibility Web-Page Re-designer

  • To add more user-interactive prompts that allows for the user to only make changes based on their specific needs, like if they only want different color schemes but not different font styles or asking if they have a certain color-blindness or mobility impairment (ex. Parkinson’s.
  • Translating it into a browser extension format.

Built With

Share this project:

Updates