A11y Guard - Shift Accessibility Left Powered by GitHub Copilot CLI

This is a submission for the GitHub Copilot CLI Challenge

What I Built

A11y Guard is an AI-powered accessibility testing CLI that shifts accessibility left - catching WCAG violations during development, not after deployment.

The Problem

Every accessibility tool today (Lighthouse, axe-core, WAVE) runs after you build. By then:

• Your feature is "complete"


• Fixing issues means rework and delays


• It's like a spell-checker that only runs after you publish your book 📖

The Solution

A11y Guard brings 6 specialized AI agents powered by GitHub Copilot CLI directly into your development workflow:

┌─────────────────────────────────────────────┐

│           🧠 Orchestrator Agent             │

│         (Coordinates all subagents)         │

└─────────────────┬───────────────────────────┘

                  │

    ┌─────────────┼─────────────┐

    ▼             ▼             ▼

┌────────┐  ┌────────┐   ┌────────┐

│Scanner │  │History │   │  Fix   │

│ Agent  │  │ Agent  │   │ Agent  │

└────────┘  └────────┘   └────────┘

    ▼             ▼             ▼

┌────────┐  ┌────────┐   ┌────────┐

│Educator│  │  Risk  │   │ GitHub │

│ Agent  │  │ Agent  │   │ Agent  │

└────────┘  └────────┘   └────────┘

Key Features:

• 🔍 Multi-mode scanning (static, smart, live)


• 🤖 AI-powered fix suggestions with confidence scores


• 🧠 Knowledge base that learns from your team's fixes


• 🔗 Git hooks for pre-commit blocking and auto-learning


• 💬 Interactive Q&A - ask anything about WCAG

Install the Copilot CLI:

• Follow the Copilot CLI installation guide to install the CLI, or ensure copilot is available in your PATH
  

# Install

npm install -g @democratize-quality/a11y-guard



# Initialize

a11y-guard init



# Check your code

a11y-guard check



# Get AI-powered fixes

a11y-guard fix src/components/Button.tsx



# Ask questions

a11y-guard ask "How do I make modals accessible?"

Demo

GitHub Repository: github.com/uppadhyayraj/a11y-guard

NPM Package: @democratize-quality/a11y-guard

📖 Full Walkthrough: Complete Demo with Screenshots

Quick Preview

My Experience with GitHub Copilot CLI

🚀 Why GitHub Copilot CLI?

When I set out to build an accessibility testing tool, I had one goal: bring AI-powered assistance directly into the developer's terminal - where we spend most of our time.

GitHub Copilot CLI was the perfect foundation because:

• 
  Terminal-native: No context switching to browser or IDE


• 
  Natural language: Ask questions, get code - right in your shell


• 
  Programmable via SDK: Build custom CLI tools powered by the same AI
  

# The power of Copilot CLI - AI in your terminal

$ a11y-guard ask "How do I fix missing alt text on images?"



🎓 Educator Agent Response:

Add descriptive alt text that conveys the image's purpose...

🏗️ Bringing GitHub Copilot CLI to Its Full Potential

GitHub Copilot CLI is powerful on its own - but what if you could multiply that power for a specific domain?

The @github/copilot-sdk lets you build custom CLI tools that inherit all of Copilot CLI's intelligence while adding domain-specific superpowers. Think of it as extending Copilot CLI's brain with specialized knowledge.

Architecture

GitHub Copilot SDK communicate with the Copilot CLI server via JSON-RPC:

   A11y-Guard (My Application)

              ↑

              ↓

       Copilot SDK Client

              ↑

              | [JSON-RPC]

              ↓

     Copilot CLI (server mode)

A11y Guard = Copilot CLI + Accessibility Expertise

What makes this special:

• ⚡ Same speed as Copilot CLI - responses in seconds


• 🧠 Same intelligence - powered by the same AI models


• 🎯 Laser-focused - 6 agents, each expert in one accessibility task


• 🔧 Tool-augmented - agents can read files, query databases, analyze git

Instead of asking Copilot CLI general questions, A11y Guard gives you 6 specialized Copilot CLIs working together - each one fast, focused, and terminal-native.

💡 The CLI-First Philosophy

Every A11y Guard command is designed for terminal workflows:

No GUI needed. Everything works in your terminal, CI/CD pipelines, and git hooks.

🤝 Team Learning with learn Command

One of A11y Guard's most powerful features is team knowledge sharing:

# Learn from your team's commits

a11y-guard learn --commits 100

How it works:

1. Developer A fixes an accessibility issue and commits


2. Developer B runs git pull
   


3. Post-merge hook triggers a11y-guard learn --incremental
   


4. Knowledge base updates with the new fix pattern


5. Next time anyone runs a11y-guard fix, the AI suggests solutions based on your team's actual fixes
   

Developer A                     Developer B

    │                               │

    ├─ Fixes violation              │

    ├─ Commits & pushes             │

    │                               │

    │                           ├─ git pull

    │                           ├─ post-merge hook runs

    │                           ├─ KB learns from A's fix

    │                           └─ Better suggestions! ✨

No CI/CD infrastructure needed - just git hooks and your existing workflow.

🔧 What Made This Possible

1. Persistent Sessions

Agents maintain context across interactions - like having a conversation with Copilot:

$ a11y-guard fix src/Button.tsx

# Agent remembers previous violations, your codebase patterns, team fixes

2. Tool Definitions

The SDK's defineTool() lets agents interact with the real world:

• Read/write files


• Query SQLite knowledge base


• Analyze git history


• Run ESLint checks

3. Streaming Responses

Real-time feedback during long scans - users see progress, not frozen terminals.

🎯 Key Learning: CLI Tools Need Concise AI

Building CLI tools taught me that terminal users expect speed. Verbose AI responses don't work here.

// What works for CLI tools:

systemMessage: "Fix accessibility issues. Be concise. Code only, minimal explanation."



// vs IDE/chat where users expect detail

The result? A11y Guard responses are fast, actionable, and terminal-friendly.

Why This Matters

1.3 billion people worldwide live with disabilities. Accessibility isn't optional - it's essential.

But here's the thing: A11y Guard makes YOU a better developer too.

🚀 Productivity:

• Catch early, fix cheap - minutes during coding vs hours in production


• No context switching - learn WCAG without leaving your terminal


• One dev's fix becomes everyone's knowledge via learn
  

📚 Learn While You Code:

# Stuck? Ask without leaving your terminal

$ a11y-guard ask "Why is aria-hidden problematic on focusable elements?"

Every fix suggestion teaches you the why, not just the what. You ship accessible code AND level up your skills.

Make accessibility a first-class citizen, not an afterthought. 🛡️

Built with ❤️ for inclusive web development by Democratize-Quality

Links:

• 📦 NPM Package
  


• 🐙 GitHub Repository
  


• 📚 Documentation