Automating Accessibility with AI in Spectrum Design

Introduction

Accessibility has always been a core principle of the Spectrum design system.
As Spectrum 2 continues to evolve, ensuring that every image meets the WCAG 2.1 accessibility standard has become a growing challenge.

In this post, I’ll share how we built an AI-powered workflow that automatically generates ALT text for documentation images — seamlessly integrating Figma, GitHub, GPT-4o, and CMS systems to make accessibility scalable and sustainable.

Watch the demo(2:57)

Below is a short video walkthrough of the workflow — from design export to the final accessible webpage.

The challenge

• Each documentation page in Spectrum contains multiple images.
  To ensure a high accessibility standard (WCAG 2.1), every image must have an ALT text.

• Designers and content strategists have been manually maintaining these images and captions.
  This process isn’t scalable — it’s hard to keep consistent, quickly becomes outdated, and often gets ignored during frequent content updates.

In practice, hundreds of images across multiple Spectrum sites require continuous updates whenever design or content changes occur. Maintaining accessibility manually under these conditions simply doesn’t scale.

The vision

“What if accessibility could be built into the content pipeline itself — not added at the end?”

Our goal was to make accessibility a default system behavior, not a manual task.
Using GPT-4o Multimodal Model, we wanted every image checked into GitHub to be automatically captioned and stored with its metadata in the CMS — ready to be used in Spectrum documentation builds.

The workflow needed to:

1. Integrate naturally with existing Spectrum content pipelines.
2. Require zero extra effort from designers or authors.
3. Guarantee every image meets accessibility standards automatically.

The solution workflow

The technical backbone

This workflow relies on simple but powerful integrations:

• GitHub Webhook + Node.js backend
  Detects asset changes and triggers AI captioning.

• GPT-4o Multimodal API
  Analyzes image content and generates concise, human-readable captions.

• CMS Integration
  Stores image metadata and synchronizes with Spectrum documentation builds.

• Site Build Pipeline
  Automatically injects ALT text from CMS metadata into rendered pages.

Accessibility is no longer a separate process — it’s built into the system.

Scaling up

The architecture is modular and ready to scale:

• Multi-language support: captions can be translated automatically via GPT-4o.
• Multiple sites: easily extended across Spectrum Contributions, Patterns, and internal documentation.
• Consistent governance: GitHub ensures transparent versioning and history tracking of every asset.

Related Reading

• Spectrum Documentation
• WCAG 2.1 Guidelines
• OpenAI GPT-4o Model Card