WCAG in Practice

Dev tools

Dev tools for accessibility

Install wcag-kit MCP in Cursor, Claude Desktop, and other editors for plain-English WCAG help. Download the Claude Skill for any Claude Project. WCAG Lens is live on the VS Code Marketplace with real-time diagnostics as you type.

Browse dev toolsCheck your page

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

Claude

Claude Skill

Bring WCAG pattern knowledge into any Claude Project. Install this skill and Claude gains accessibility-aware context for code review, component guidance, and WCAG questions across nine reference areas.

Download skill (opens in a new tab)View on GitHub (opens in a new tab)

What you get

  • WCAG 2.1 and 2.2 AA coverage
  • Nine reference areas (forms, keyboard, ARIA, navigation, and more)
  • Works in any Claude Project - no editor setup required
  • Pairs with wcag-kit and WCAG Lens for a full accessibility workflow

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 and the Claude Skill: Lens flags issues in the editor; wcag-kit and Claude answer deeper questions in your AI assistant.

Contribute

Suggest a pattern

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