金大哥 - a11ymcp MCP 详情

article

README

🚀 网页可访问性测试 MCP 服务器（A11y MCP）

A11y MCP 服务器是一款用于网页可访问性测试的工具，支持多种实用功能，能帮助开发者全面检测网页的可访问性问题。

🚀 快速开始

若要使用 A11y MCP 服务器，可按以下步骤进行配置：

1. 安装 Node.js 和 npm

确保已安装 Node.js 和 npm。你可以通过访问 Node.js 官网下载并安装最新版本。

2. 安装依赖项

在项目目录中运行以下命令以安装所需的依赖项：

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

3. 配置 MCP 服务器

使用 MCP 服务器 SDK 初始化你的项目，并配置相关的测试参数。

✨ 主要特性

网页可访问性测试：借助 axe - core 和 Puppeteer 提供全面的网页可访问性检查。
多平台支持：适用于 Windows、macOS 和 Linux 系统。
详细的测试报告：返回结构化的 JSON 格式结果，包含 violations（违规项）、passes（通过项）等信息。

💻 使用示例

基础用法

test_accessibility

描述：用于检查网页内容的可访问性问题。
参数：
- url：需要测试的网页地址。
- config： axe - core 的配置选项，如忽略特定规则等。

test_html_string

描述：直接传入 HTML 字符串进行可访问性测试。
参数：
- htmlString：包含 HTML 内容的字符串。
- config： axe - core 配置选项。

📚 详细文档

响应格式

服务器返回以下结构化的 JSON 格式结果：

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "确保前景色和背景色的对比度符合 WCAG 2 AA 最低对比度比率要求",
      "help": "元素必须满足最低颜色对比度比率要求",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">低对比度文本</div>",
          "target": ["div"],
          "failureSummary": "修复以下任意一个：元素的对比度不足，前景色为 #aaa，背景色为 #eee，字体大小为 12.0pt，字体加粗为正常"
        }
      ]
    }
  ],
  "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"
  }
}

依赖项

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

a11ymcp