Accessibilitymcp

🚀 Web Accessibility Testing MCP Server (A11y MCP)

The Web Accessibility Testing MCP Server (A11y MCP) is a tool for web application accessibility testing, supporting interaction via the Model Context Protocol (MCP).

The Web Accessibility Testing MCP Server (A11y MCP) is a tool for web application accessibility testing, supporting interaction via the Model Context Protocol (MCP). This server is built on @modelcontextprotocol/sdk and combines libraries such as puppeteer and axe-core to provide comprehensive accessibility testing capabilities.

🚀 Quick Start

✨ Features

Core Features

• Accessibility Testing: Analyze web page content through axe-core to detect issues that do not meet WCAG 2.1 Level AAA.
• DOM Manipulation: Use the API provided by Puppeteer for element positioning, clicking, input, and other operations.
• Report Generation: Return detailed accessibility test results, including violations, passes, and inapplicable items.

Supported Features

1. Color Contrast Detection
   • Ensure that the contrast between text and background meets WCAG standards.
2. Form Validation
   • Check if form elements comply with accessibility specifications, such as label associations and input prompts.
3. Screen Reader Support
   • Verify that web page content can be correctly parsed and read by screen readers.
4. Keyboard Navigation Testing
   • Ensure that users can complete all interactive operations using the keyboard.

📦 Installation

Dependencies

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

Installation Steps

1. Use the Node.js package manager (npm) or yarn to download all dependencies:

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

2. Configure environment variables or specify Puppeteer's browser execution mode (e.g., headless or non-headless) in the code.

💻 Usage Examples

Basic Usage

const { createMcpServer } = require('@modelcontextprotocol/sdk');
const puppeteer = require('puppeteer');
const axe = require('axe-core');

// Initialize the Puppeteer browser instance
let browser;
async function initBrowser() {
  browser = await puppeteer.launch({
    headless: true,
    width: 1200,
    height: 800,
  });
}

// Create the MCP server
const server = createMcpServer({
  async getBrowser() {
    if (!browser) await initBrowser();
    return browser;
  },
});

// Example test case: Detect color contrast
async function testContrast(url) {
  const page = await browser.newPage();
  await page.goto(url);
  const result = await axe.run(page);
  return result;
}

// Start the server and begin testing
server.start(3000);

📚 Documentation

Response Format

The accessibility test results returned by the MCP server are in JSON format:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Ensure that the contrast between text and background meets the minimum requirements of WCAG 2 AA.",
      "help": "Elements must meet the minimum color contrast threshold.",
      "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 issues: The contrast of the element is 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal), which does not meet the minimum requirements."
        }
      ]
    }
  ],
  "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",
    "width": 1200,
    "height": 800
  }
}

Other Resources

• Official Documentation: Model Context Protocol
• Puppeteer Documentation: Puppeteer Official Documentation
• axe-core Documentation: axe-core Official Documentation