A11ymcp

🚀 Web Accessibility Testing MCP Server (A11y MCP)

A tool for web accessibility testing with multiple functional features.

🚀 Quick Start

A11y MCP Server is a tool for web accessibility testing, supporting a variety of functional features.

✨ Features

• Web Accessibility Testing: Provide comprehensive web accessibility checks through axe - core and Puppeteer.
• Multi - platform Support: Suitable for Windows, macOS, and Linux systems.
• Detailed Test Reports: Return structured JSON results, including information such as violations and passes.

📦 Installation

To use the A11y MCP Server, please configure it according to the following steps:

1. Install Node.js and npm

Ensure that Node.js and npm are installed. You can download and install the latest version by visiting the Node.js official website.

2. Install Dependencies

Run the following command in the project directory to install the required dependencies:

npm install @modelcontextprotocol/sdk puppeteer @axe-core/puppeteer axe-core

3. Configure the MCP Server

Use the MCP Server SDK to initialize your project and configure relevant test parameters.

📚 Documentation

Available Tools

test_accessibility

• Description: Used to check the accessibility issues of web page content.
• Parameters:
  • url: The address of the web page to be tested.
  • config: Configuration options for axe - core, such as ignoring specific rules.

test_html_string

• Description: Directly pass in an HTML string for accessibility testing.
• Parameters:
  • htmlString: A string containing HTML content.
  • config: Axe - core configuration options.

Response Format

The server returns the following structured JSON results:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Ensure that the contrast between the foreground color and the background color meets the minimum contrast ratio requirements of WCAG 2 AA",
      "help": "Elements must meet the minimum color contrast ratio requirements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
          "target": ["div"],
          "failureSummary": "Fix any of the following: The element has insufficient contrast, with a foreground color of #aaa, a background color of #eee, a font size of 12.0pt, and normal font weight"
        }
      ]
    }
  ],
  "passes": 1,
  "incomplete": 0,
  "inapplicable": 2,
  "timestamp": "2025-04-25T16:45:33.655Z",
  "url": "about:blank",
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.3"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
    "windowWidth": 800,
    "windowHeight": 600,
    "orientationAngle": 0,
    "orientationType": "portrait-primary"
  }
}

Dependencies

• @modelcontextprotocol/sdk
• puppeteer
• @axe-core/puppeteer
• axe-core