Aluma [IN PERSON]

In-Person

Problem | Inspiration

This project was inspired by our desire to reimagine designing and developing frontend interfaces for universal design, not just in theory, but in practice. While ADA and WCAG 2 are standard web accessibility standards known by most developers, integrating them is an afterthought rather than an integral part of the design/development process due to its difficulty in learning, tedious implementation, and "cheap" solutions like accessibility overlay tools. Hence, we decided to make, Aluma, an all-in-one AI-powered web extension that integrates seamlessly with any browser and code editor to streamline inclusive development, while encouraging interactive learning about accessibility standards for developers.

Solution | What it does

With a simple one-click installation, Aluma will automatically integrate with your codebase and frontend interfaces. It scans your webpage in real-time and provides non-intrusive highlights on text, multimodal components, and code structure that violate or could be improved to fit ADA, WCAG 2, and other accessibility standards. For seamless accessibility code integration Aluma provides the following features:

1. Non-intrusive highlights: Highlights text, multimodal components, and code on the website that can be hovered for in-depth AI-generated reasoning on which accessibility standard and how it violates it. This includes tags in HTML like , video captions, images, and more,

2. Streamlined Code Fixing: Connects to GitHub source code and automatically pushes frontend changes in the click of a button.

3. Code analysis on Reading Order: Looks through HTML structure to validate screen reading (text-to-speech) accuracy seamlessly.

Beyond streamlining the development process for inclusive design, Aluma aims to tackle a larger, more pressing issue of the lack of accessibility education provided to developers. We hope to make accessible design/development a part of the innovation process, rather than an afterthought through the following features:

1. In-depth AI Reasoning: Each highlighted accessibility violation generated by fine-tuned AI agents, it provides in-depth reasoning, specific disabilities it impacts, and the code in your source code to fix it. This allows developers to learn hands-on and see practical solutions and reasons on how to implement best accessibility practices.

2. Real-time Disability Simulations: Real-time simulation on your site for color blindness (Red-Green, Blue, etc.), blurriness, dyslexia, partial loss of central vision, and more to allow developers to empathize.

3. Educational Conversational AI: Allows developers to ask specific, customized accessibility questions for deeper understanding (IE. Why does my navigation bar need to be...).

Design Process

This project started with intensive research based off of research papers, statistics regarding accessibility, and personal anecdotes/interviews from developers and UI/UX designers.

Research Document: Aluma Design Research Document

The research above includes detailed analysis on user pain points when incorporating accessible design, disabilities research, and more. This led to us discovering how inclusive design is more of an afterthought, rather than an integrated part of frontend development and the multiple "cheap" solutions like accessibility overlay through competitive analysis used to temporarily tackle the problem.

These discoveries led to Aluma, which aims to put inclusive design first and integrate it in the frontend development process, while educating developers through empathy and integrated AI-based education.

Built With

• figma
• github