- Home
- MCP servers
- WCAG
WCAG
- typescript
0
GitHub Stars
typescript
Language
6 months ago
First Indexed
3 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
Installation
Add the following to your MCP client configuration file.
Configuration
View docs{
"mcpServers": {
"joe-watkins-wcag-mcp": {
"command": "npx",
"args": [
"mcp-remote@next",
"https://your-site.netlify.app/mcp"
]
}
}
}You can access WCAG 2.2 coverage, complete Understanding documentation, techniques, and glossary data through a Model Context Protocol (MCP) server. This setup lets you query WCAG criteria, read detailed explanations, and experiment with accessibility guidance directly from your environment or remote hosting, all via MCP clients.
How to use
You interact with the WCAG MCP server from an MCP client. Start by configuring your client to point to the remote MCP endpoint when you prefer a hosted solution, or run a local instance for offline or private use. You can request full criteria details, browse guidelines, and pull the complete Understanding documentation for each success criterion. Use the provided tools to search, filter, and retrieve specific criterion text, context, or related resources.
Key usage patterns you can perform include: querying the list of WCAG principles and guidelines, retrieving all success criteria with optional filters, obtaining detailed criterion context including techniques, and looking up glossary terms. You can also access the 9 new WCAG 2.2 criteria and explore a library of techniques and failure patterns. The remote server configuration uses a standard MCP setup so you can integrate it with your existing MCP tooling.
How to install
Prerequisites: Node.js is installed on your machine. You may also need npm or npx for local execution and dependency management.
Step 1: Clone the project repository with submodules to ensure WCAG data and Understanding docs are included.
Step 2: Install dependencies and fetch data.
Step 3: Build and start the MCP server locally or deploy to a remote host.
Step 4: Configure your MCP client to point to the local server or the remote endpoint.
# Clone with submodules
git clone --recurse-submodules https://github.com/joe-watkins/wcag-mcp.git
cd wcag-mcp
# Install dependencies and build data (fetches WCAG data and Understanding docs)
npm install
# If you need to update data and Understanding docs later
npm run build
# Start the local MCP server (example; exact command may vary by setup)
npm run start
# If you plan to deploy to Netlify or another host, follow your deployment steps after building data.
Deployment and remote access
You can run a remote MCP endpoint and connect your MCP client to it. The recommended remote setup uses an MCP client to access a pre-built endpoint via Netlify Function hosting. The following example shows an MCP JSON configuration for a remote-access setup.
{
"mcpServers": {
"wcag_mcp": {
"type": "stdio",
"command": "npx",
"args": ["mcp-remote@next", "https://your-site.netlify.app/mcp"]
}
}
}
Notes about configuration, security, and troubleshooting
Configure MCP clients in your development environment by adding the server entry to your client settings. If you use a remote endpoint, ensure the URL is reachable from your network and that any required authentication or tokens are configured as environment variables in your MCP client.
If you encounter connectivity issues, verify that the remote endpoint is up, the MCP server is reachable, and your network allows traffic to the endpoint. For local runs, confirm that Node.js is installed and that dependencies were built successfully using the npm install and npm run build steps.
Available tools
list-principles
Lists all four WCAG 2.2 principles (Perceivable, Operable, Understandable, Robust)
list-guidelines
Lists WCAG 2.2 guidelines, optionally filtered by principle number (1-4)
list-success-criteria
Lists success criteria with optional filters by level (A/AA/AAA), guideline, or principle
get-success-criteria-detail
Gets just the normative success criterion text and exceptions without Understanding docs
get-criterion
Gets comprehensive details including full Understanding documentation (intent, benefits, examples)
get-guideline
Gets full details for a specific guideline including all its success criteria
search-wcag
Searches success criteria by keyword in titles and descriptions
get-criteria-by-level
Gets all criteria for a conformance level, optionally including lower levels
count-criteria
Returns counts of success criteria grouped by level, principle, or guideline
list-techniques
Lists techniques, filter by technology (html, aria, css, pdf, general) or type
get-technique
Gets details for a specific technique by ID (e.g., "H37", "ARIA1", "G94")
get-techniques-for-criterion
Gets all techniques (sufficient, advisory, failure) for a success criterion
search-techniques
Searches techniques by keyword
get-failures-for-criterion
Gets failure patterns (common mistakes) for a success criterion
get-glossary-term
Gets the definition of a WCAG term (e.g., "programmatically determined")
list-glossary-terms
Lists all 101 WCAG glossary terms
search-glossary
Searches the glossary by keyword
whats-new-in-wcag22
Lists all 9 success criteria added in WCAG 2.2
get-full-criterion-context
Gets comprehensive context: SC + techniques
get-server-info
Returns server information and statistics