Labsco
karanshah229 logo

WCAG Aria patterns MCP

โ˜… 1

from karanshah229

MCP server for WCAG practices found at https://github.com/karanshah229/wcag-aria-practices-mcp-skill/tree/main

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅโœ“ VerifiedFreeQuick setup

WAI-ARIA: Authoring Practices Guide

This repository maintains the WAI-ARIA Authoring Practices Guide (APG).

Please do not provide commit access to this repository without coordination.

How the work is organized

  • Work is planned and prioritized in our milestones. Each milestone corresponds to a working draft or release published to w3.org.
  • Work is organized by topic in our projects. Each project corresponds to a type of design pattern or section of guidance.
  • The scope of work and roadmap are described in the project wiki.

MCP Server (AI and Chatbot Integration)

The repository includes a Model Context Protocol (MCP) server that exposes WAI-ARIA pattern documentation as on-demand resources. AI agents and chatbots can fetch pattern specs (keyboard interaction, ARIA roles, states, and properties) when helping developers build accessible components.

Prerequisites: Node.js and npm install.

Run from cloned repo:

npm run mcp

Use with Cursor: Add to your MCP settings (e.g. in Cursor settings or .cursor/mcp.json):

{
  "mcpServers": {
    "wai-aria-apg": {
      "command": "node",
      "args": ["/path/to/aria-practices/mcp-server/index.mjs"]
    }
  }
}

Replace /path/to/aria-practices with the actual path to your cloned repository. The AI can then fetch pattern specs via resources like apg://pattern/accordion or apg://pattern/combobox.

For other MCP-compatible clients, see the Model Context Protocol documentation.

Cursor Skill: Copy skill/wai-aria-apg to .cursor/skills/ in your project so the AI uses APG patterns when building accessible components. See skill/README.md.