Inspiration

With the DOJ's recent update to ADA Title II, public universities and K-12 schools are federally mandated to make all digital course materials accessible by April 24, 2026. Yet, students are still frequently handed materials, such as scanned worksheets, old textbook pages, and poorly formatted handouts, that are completely inaccessible. These documents break screen readers, lack alt-text for crucial diagrams, and fail to meet the required WCAG 2.1 AA standards. We were inspired to build Graceful to eliminate this learning barrier and help institutions meet this critical deadline. We wanted to give students and educators a direct, automated path to turn any inaccessible classroom resource into structured, readable, and speakable content in seconds.

What it does

Graceful is a platform that automatically remediates inaccessible course assets into polished, ADA-ready materials.

  • Instant Processing: Students or educators upload PDFs or scanned documents.
  • ADA-Aware Parsing: The platform uses Google Gemini to extract the document's semantic structure, catch contrast and heading issues, and automatically generate descriptive alt-text for any images or diagrams.
  • Remediation & Review: It outputs clean, WCAG-compliant Markdown and highlights accessibility issues for staff review.
  • Text-to-Speech: Once processed, Graceful utilizes ElevenLabs to generate natural-sounding audio narration for the entire document, allowing students to listen on any device.

How we built it

We built Graceful as a modern monorepo using Turborepo to manage our full-stack application.

  • Frontend: A highly responsive Next.js application styled with TailwindCSS and shadcn/ui for a clean, accessible user interface.
  • Backend & Database: We utilized Convex as our reactive backend-as-a-service to handle real-time data synchronization, file storage (for PDFs and audio), and database schema management.
  • Authentication: Secured user sessions and file uploads using Better-Auth.
  • AI Pipelines: We heavily leveraged the Vercel AI SDK. We use Google Gemini (Gemini 3 Flash) for high-quality PDF parsing, OCR, and accessibility checks. For conversational chat agent capabilities, we integrated an OpenAI-compatible endpoint via Featherless.ai (running Kimi-K2.5).
  • Audio Generation: We integrated the ElevenLabs API (eleven_v3 model) to handle the text-to-speech generation for remediated documents.

Challenges we ran into

Building a robust, AI-powered remediation pipeline introduced several technical hurdles:

  • Serverless PDF & Image Processing: We encountered constraints extracting and processing images from PDFs directly within Convex's serverless edge environment. To work around memory and runtime library limitations (like those with Node.js image libraries), we had to completely rethink our architecture to ensure PDF structures and figures were properly extracted without crashing our backend functions.
  • Storage Security: We had to carefully secure our PDF upload process, implementing authenticated URL issuance to prevent users from bypassing file size/type restrictions and clogging up Convex storage.
  • AI Tuning & API Constraints: Tuning ElevenLabs voice settings to resolve TTD stability errors on the eleven_v3 model took some experimentation. Similarly, prompting Gemini to reliably output perfectly structured, WCAG-compliant Markdown while parsing complex, messy textbooks required significant prompt engineering and edge-case handling.
  • Complex Data Syncing: Streaming AI-generated markdown while simultaneously managing background PDF processing, image extraction, and audio generation heavily tested our Convex real-time schemas.

Accomplishments that we're proud of

  • A Seamless Pipeline: We successfully unified OCR, semantic formatting, alt-text generation, and text-to-speech into a single, intuitive workflow.
  • High-Quality Output: We are incredibly proud of how accurately the Gemini pipeline recreates the structure of messy handouts into clean, screen-reader-friendly Markdown.
  • Modern Developer Experience: Setting up a highly optimized codebase leveraging Better-T-Stack (Next.js + Convex + Tailwind) that is fully type-safe from the database layer up to the client UI.

What we learned

  • We deepened our understanding of WCAG 2.1 AA guidelines and the technical nuance required to programmatically enforce accessibility standards (like proper heading hierarchies and robust alt-text).
  • We orchestrated multiple AI providers (Google, ElevenLabs) within the same application using the Vercel AI SDK.
  • We learned valuable lessons about serverless constraints, particularly around secure file handling and runtime limitations for media processing libraries.

What's next for Graceful

  • LMS Integrations: We want to build direct integrations with Canvas and Google Classroom so educators can auto-remediate assignments as they post them.
  • Human-in-the-Loop Tools: Enhancing the staff review dashboard to allow visual, side-by-side editing of AI-generated alt-text and semantic structure before publishing.

Built With

  • convex
  • elevenlabs
  • gemini
  • next.js
  • react
  • shadcn/ui
  • tailwind
  • turborepo
  • vercel
Share this project:

Updates