design-canvas-plugin-a11y-checker

Accessibility Checker plugin for Design Canvas.

Audit page accessibility against WCAG guidelines using axe-core, inspect individual elements, visualize focus order, and get AI-powered fix suggestions — all from within the Design Canvas panel.

Features

Page Scan

Run a full-page accessibility audit powered by axe-core (~90 WCAG rules). Results are categorized by severity:

• Critical — serious barriers that prevent access (e.g. missing alt text, empty buttons)
• Warning — issues that degrade the experience (e.g. insufficient color contrast)
• Info — minor or best-practice suggestions

Filter violations by severity, expand any issue to see its WCAG criterion, the affected element path, and a recommended fix. Use the Highlight button to scroll to and outline the offending element on the page.

Element Inspector

Use the element picker to select any element on the page and run a scoped axe-core audit on it and its children. Useful for checking a specific component without noise from the rest of the page.

Focus Order Visualizer

Analyze and visualize the keyboard tab order of all focusable elements:

• Numbered badges and dashed connecting lines are overlaid on the page showing the exact tab sequence
• Elements with tabindex > 0 are flagged with a warning (disrupts natural DOM order)
• Orphaned elements — interactive elements with tabindex="-1" that are unreachable by keyboard — are highlighted in red
• Expand any entry to scroll to it, focus it, or see its DOM path and tabindex value
• Toggle the overlay on/off without re-running the analysis

Copilot Integration

When GitHub Copilot is available, each violation card includes an Ask Copilot button that sends the violation details (WCAG rule, severity, element markup) and returns a context-aware code fix with corrected HTML.

Theming

The plugin automatically adapts to Design Canvas's light and dark themes.

Install

npm install design-canvas-plugin-a11y-checker

Peer Dependencies

• @design-canvas/toolbox >= 0.1.0

Runtime Dependencies

• axe-core ^4.11.3

Usage

Add to your .designcanvas.json:

{
  "plugins": {
    "a11y-checker": { "enabled": true }
  }
}

API

The plugin emits the following event after a page scan completes:

| Event | Payload | |---|---| | a11y:scan-complete | { total: number, critical: number, warning: number, info: number } |

The panel badge displays the count of critical + warning issues.

Plugin Commands (External Invocation)

The plugin registers commands on ctx.pluginCommands that can be invoked externally via the Design Canvas postMessage bridge or MCP server.

| Command | Args | Returns | |---|---|---| | a11y-checker:scan-page | — | { total, critical, warning, info, violations[] } | | a11y-checker:check-focus | — | { total, positiveTabindex, orphaned, entries[], orphanedElements[] } | | a11y-checker:check-element | { selector: string } | { selector, total, violations[] } |

MCP Server (Agent Access)

When the Design Canvas MCP server is running, these commands are available as MCP tools that any LLM agent can invoke from VS Code Chat or other MCP clients:

# Start the MCP server
npx design-canvas mcp --url http://localhost:5173

Or add to .vscode/mcp.json:

{
  "servers": {
    "design-canvas": {
      "command": "npx",
      "args": ["design-canvas", "mcp"],
      "env": {
        "DC_URL": "http://localhost:5173"
      }
    }
  }
}

Available MCP tools:

| Tool | Description | |---|---| | dc_list_commands | Discover all registered plugin commands | | dc_run_command | Run any plugin command by name | | dc_scan_a11y | Full-page axe-core accessibility audit | | dc_check_focus_order | Analyze keyboard tab order | | dc_check_element | Audit a specific element by CSS selector |

License

MIT