WCAG in Practice

Dev tools

Dev tools for accessibility

WCAG Lens is live on the VS Code Marketplace - real-time diagnostics as you type. Install wcag-kit MCP in Cursor, Claude Desktop, and other editors for plain-English WCAG help, broken examples, and accessible fixes.

Dev tools

FreeOpen source

Use wcag-kit in your AI editor

wcag-kit is a free MCP server that brings wcaginpractice.com patterns into any MCP-compatible AI editor. Ask accessibility questions in plain English and get WCAG references, broken patterns, and accessible fixes without leaving your editor.

Example prompt

“I'm building a notification that pops up after a user saves a form. Any accessibility concerns?”

View on npm (opens in a new tab)GitHub source (opens in a new tab)

MCP configuration (JSON)

{
  "mcpServers": {
    "wcag-kit": {
      "command": "npx",
      "args": ["wcag-kit"]
    }
  }
}
  • Cursor: ~/.cursor/mcp.json
  • Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Other editors: Check your editor's MCP documentation

Dev tools

FreeLive on Marketplace

WCAG Lens for VS Code

Real-time accessibility diagnostics as you type. Violations appear as red underlines in the editor. Hover to see the WCAG rule and a fix suggestion - before code ships.

Install from Marketplace (opens in a new tab)

How it helps

  • Real-time diagnostics as you type in VS Code
  • Violations show as red underlines in the editor
  • Hover to see the WCAG rule and a fix suggestion

Works alongside wcag-kit: Lens flags issues in the editor; wcag-kit answers deeper questions in your AI assistant.

Contribute

wcag-kit is open source. If you use an accessibility pattern that is not covered here, suggest it for the playground. Strong ideas are often added to wcag-kit as well.

Suggest a pattern
Back to top