AccessMate

Empowering neurodiverse, visually impaired, and multilingual teams with real-time AI accessibility adapters in Slack.

Comment

Inspiration

Individuals with neurodivergence (such as ADHD or Autism), dyslexia, visual impairments, or motor control limitations are frequently left struggling to keep up with the sensory overload. Screen readers trip over endless emoji chains, long paragraphs of unformatted text cause cognitive exhaustion, and tiny navigation elements impede motor-impaired users. I wanted to build a bridge. AccessMate was inspired by a simple idea: What if the workspace could dynamically adapt to the human viewing it, rather than forcing the human to adapt to the workspace? I set out to build an intelligent, Gemini-powered Slack Agent and live diagnostic engine that intercepts, analyzes, and dynamically refactors workspace messages to match each individual user's unique cognitive and physical profile in real-time.

What it does

AccessMate is an AI-powered accessibility companion consisting of a live simulated Slack workspace, an active Slack Agent integration, and a comprehensive real-time Accessibility Diagnostics Dashboard.

  1. Dynamic User Profile Adaptations AccessMate allows users to select or customize their accessibility profiles. Instantly, the entire workspace, navigation, and text structures adapt: Neurodivergent / ADHD Profile: Collapses long-winded paragraphs into hyper-focused, scannable bullet points. It isolates core action items, highlights deadlines, and introduces visual structure to minimize cognitive fatigue. Dyslexia Profile: Dynamically swaps fonts to specialized dyslexia-friendly typefaces, increases letter-spacing, and uses Gemini to rephrase idioms and highly complex structures into simple, direct, high-readability language. Screen Reader Profile: Strips visual clutter, converts nested markdown and decorative elements into plainspoken semantic sentences, and translates emoji-dense text into descriptive narrations. Motor Impairment Profile: Increases the target size of all interactable UI components, optimizes tab key mappings, and exposes clean, simplified click actions to reduce physical navigation overhead. Visual / Color Blindness Profile: Integrates instant visual shaders (such as Deuteranopia, Protanopia, and Tritanopia correction filters) alongside a high-contrast theme, maintaining readability without sacrificing modern design.
  2. Live Diagnostics & Channels Scoring Engine The application continuously evaluates channels using a proprietary mathematical formulation. It scores channels based on readability index, visual contrast ratios, alt-text coverage, and noise indicators (e.g., emoji-to-text density). The Channel Accessibility Score ( ) is modeled as: Where: represents the measured visual contrast ratio of assets and text blocks. is the calculated Automated Readability Index (ARI), representing reading difficulty, normalized against a maximum scale . represents the emoji density ratio (number of consecutive or total emojis per 100 words of conversational context). represents the proportion of media files and code blocks equipped with descriptive alt-text or summaries. are normalization weights such that .
  3. The AccessMate Slack Agent Inside the simulator, the specialized AccessMate Agent (@AccessMate) listens to conversational channels. Whenever a team member posts complex information, users can click "Refactor with AccessMate" or call the agent to translate the active text stream into their specific, optimized visual and linguistic formats.

How we built it

Building AccessMate as a solo developer required a tightly integrated, full-stack architecture that blends high-performance client rendering with real-time server-side intelligence: Frontend Interface (React 19 & Tailwind CSS): I crafted a completely simulated, responsive Slack client workspace using modern functional components. I used Tailwind CSS utility variables to implement color filters, high-contrast states, layout density modifications, and specialized font spacing on the fly. Linguistic and Structural Shifting (Gemini API & Google GenAI SDK): The core intelligence relies on server-side Gemini integration. Using a clean Express API proxy (/api/chat), the server communicates securely with Gemini. I designed highly structured prompt engineering frameworks that direct Gemini to parse input messages, determine the semantic intent, and output refactored text formatted specifically for Dyslexia, ADHD, and Screen Reader profiles without losing the original meaning. Real-Time Channel Diagnostics: I implemented a custom analysis script that parses channel conversations, evaluates visual assets, and outputs real-time math metrics to drive the D3-powered dashboard telemetry graphs. Backend Architecture (Node.js & Express): I structured a custom full-stack dev server using tsx and compiled the production build using esbuild to produce a standalone CommonJS bundle.

Challenges we ran into

Handling the Gemini API Latency for Real-time Reading: During initial testing, refactoring an entire channel history on the fly caused noticeable UI lag. To overcome this, I developed a lightweight local caching strategy and batching pipeline on the client, ensuring only visible or newly highlighted messages are processed by the server-side Gemini API. Dynamic CSS Styling for Color-Blindness Filters: Applying real-time protanopia/deuteranopia filters directly to an active interface without destroying readability or visual performance was challenging. I resolved this by injecting custom CSS SVG color matrix matrices into the global Tailwind configuration, allowing smooth hardware-accelerated rendering transitions. Balancing Simplicity with Feature Richness: As a solo developer, scope creep is always a threat. I focused deeply on maintaining single-view integrity by embedding the main chat, profile switching, agent assistance, and channel telemetry into a cohesive, beautifully polished multi-pane layout rather than sprawling across separate, hard-to-maintain navigation sections.

Accomplishments that we're proud of

A Truly Universal UX: I successfully built an interface where a user can toggle between vastly different cognitive and visual states and immediately see the entire communication layout adapt. Seeing a chaotic, emoji-dense block of text instantly turn into clean, spaced, bulleted sentences is incredibly rewarding. Mathematical Precision: Integrating a rigorous scoring algorithm ( ) to quantify communication barriers provides teams with an actionable, objective metric to measure their internal communication accessibility. Bulletproof Compilation: Resolving build-time dependencies, TypeScript configurations, and Vite assets as a single developer to achieve a flawless production build on Cloud Run was a major milestone.

What we learned

Designing with Accessibility First: I learned that accessibility isn't just about adding alt tags—it is about visual hierarchy, information density, and customizable formats. An interface that is beautiful for one person can be an absolute barrier for another. Advanced Prompt Engineering for Formatting: I discovered how powerful Gemini is at stylistic and structural refactoring. Giving the model clear constraints (e.g., "Do not lose the emotional intent, do not introduce new facts, write using high-contrast short sentences, use dyslexia-friendly terminology") produced incredibly accurate and empathetic summaries. Optimizing Full-Stack Node Environments: Mastering Bundling via esbuild and managing clean environment variables taught me a lot about production-grade container builds.

What's next for AccessMate

Direct Slack API Production Integration: I plan to port this simulator engine into a production-ready Slack App manifest, bringing the actual @AccessMate slash commands and context menu shortcut actions to real corporate Slack instances. Voice and Multi-Modal Inputs: Integrating text-to-speech engines directly to automatically read refactored screen-reader text, and allowing spoken input shortcuts for users with motor impairments. Wider Platform Support: Expanding the diagnostic algorithms and agent engines to support adjacent collaborative platforms like Microsoft Teams, Discord, and Google Chat.

Built With

Share this project:

Updates