MagentaA11y

Provides MagentaA11y accessibility criteria via MCP, supporting local stdio and remote Netlify deployments.

javascript

2

GitHub Stars

javascript

Language

4 months ago

First Indexed

2 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-magentaa11y-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote@next",
        "https://your-site.netlify.app/mcp"
      ]
    }
  }
}

This MagentaA11y MCP Server provides accessibility criteria from MagentaA11y and can run locally via standard input/output or remotely through Netlify deployments. It exposes ready-to-use MCP endpoints for querying component criteria and formats the results for your MCP client, enabling automated accessibility checks and integration into your development workflow.

How to use

You use an MCP client to connect to the MagentaA11y MCP Server. Choose a connection method that fits your workflow: run the server locally for development or deploy it remotely to Netlify for shared access. Once connected, you can request accessibility criteria for components, list available components, search criteria by keywords, and obtain various formatted representations (for example, Gherkin or condensed formats). The server reads only from MagentaA11y data and does not collect user data.

How to install

Prerequisites: ensure you have Node.js installed on your machine. You can verify by running node -v and npm -v. You will also need npm or npx to install or run MCP configurations.

# Local development installation example (stdio transport)
{
  "mcpServers": {
    "magentaa11y": {
      "command": "node",
      "args": ["/path/to/src/index.js"]
    }
  }
}

# Remote (Netlify) deployment configuration example (stdio transport)
{
  "mcpServers": {
    "magentaa11y_remote": {
      "command": "npx",
      "args": ["mcp-remote@next", "https://your-site.netlify.app/mcp"]
    }
  }
}

You can also add a local installation using npm or npx in a project scope, depending on your workflow. For example, you can install as a user-wide tool or for a specific project scope using the included commands in the configuration snippet.

## Additional setup and notes

If you plan to run the Netlify-hosted version, clone the repository, build it, and deploy to Netlify. Then you can use the remote MCP URL shown in the configuration example to connect from your MCP client.

## Available tools

### list\_web\_components

List web accessibility components available in MagentaA11y and retrieve their basic information.

### get\_web\_component

Get detailed criteria for a specific web component, including accessibility rules and how to apply them.

### search\_web\_criteria

Search web accessibility criteria by keyword to find relevant rules and patterns.

### list\_native\_components

List native iOS/Android components and their accessibility criteria.

### get\_native\_component

Get detailed criteria for a native component, including platform-specific notes.

### search\_native\_criteria

Search native accessibility criteria by keyword.

### get\_component\_gherkin

Provide Gherkin-style acceptance criteria for a component.

### get\_component\_condensed

Return condensed acceptance criteria for quick review.

### get\_component\_developer\_notes

Supply developer notes for implementing accessibility criteria.

### get\_component\_native\_notes

Provide iOS or Android specific notes for native components.

### list\_component\_formats

List available formats for presenting component criteria (e.g., Markdown, Gherkin).