Accessibilitymcp

A11y MCP是一个为LLM提供网页无障碍测试能力的MCP服务器，通过集成Deque Axe-core API和Puppeteer实现WCAG合规性检测

开发者工具法律与合规 #无障碍测试 #WCAG检测 #网页可访问性本地 .JavaScript

评分 : 2分

下载量 : 6.5K

更新时间 : 2025-04-29

打开站点

什么是A11y MCP？

A11y MCP是一个用于通过自动化方式检查网页和HTML内容是否符合Web可访问性标准的工具。它利用了Deque Labs的axe-core引擎来执行详细的可访问性测试，并提供详细的违规报告。

如何使用A11y MCP？

用户可以通过发送包含特定参数的请求到此服务器，指定要测试的内容（例如URL或HTML字符串）以及所需的可访问性标准。服务器将返回详细的测试结果和改进建议。

使用场景

适用于需要自动化检查网页或组件是否符合Web可访问性标准的开发者、测试人员和团队。特别适合CI/CD管道集成，以确保代码更改不会引入新的可访问性问题。

支持的可访问性标准

支持WCAG 2.0、2.1和2.2标准，并允许指定具体版本进行测试。

网页URL测试

可以通过提供公开可访问的URL来检查整个网页的可访问性问题。

HTML片段测试

可以直接提供HTML代码片段进行可访问性检查，适用于局部内容验证。

颜色对比检查

专门用于验证文本和背景的颜色对比是否符合WCAG标准。

支持哪些可访问性标准？

能否测试受密码保护的页面？

测试结果的准确性如何？

这是Deque的官方产品吗？

Smithery徽章

服务器状态徽章

GLAM.AI服务器页面

查看有关此MCP服务器的更多信息和文档。

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

Web 可访问性测试 MCP 服务器（A11y MCP） 是一款用于 Web 应用程序可访问性测试的工具。它支持通过 Model Context Protocol (MCP) 进行交互，基于 @modelcontextprotocol/sdk 搭建，结合 puppeteer 和 axe-core 等库，提供全面的可访问性测试功能。

🚀 快速开始

Web 可访问性测试 MCP 服务器（A11y MCP）能帮助你对 Web 应用进行可访问性测试。以下将为你介绍安装、配置及使用的相关内容。

✨ 主要特性

核心功能

可访问性测试：借助 axe-core 分析网页内容，检测不符合 WCAG 2.1 级别 AAA 的问题。
DOM 操作：利用 Puppeteer 提供的 API 进行元素定位、点击、输入等操作。
报告生成：返回详细的可访问性测试结果，涵盖违规项、通过项和不适用项。

支持的功能

颜色对比检测：确保文本与背景之间的对比度符合 WCAG 标准。
表单验证：检查表单元素是否符合可访问性规范，如标签关联、输入提示等。
屏幕阅读器支持：验证网页内容是否能够被屏幕阅读器正确解析和朗读。
键盘导航测试：确保用户可以通过键盘完成所有交互操作。

📦 安装指南

依赖项

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

安装步骤

使用 Node.js 包管理器 (npm) 或 yarn 下载所有依赖：

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

配置环境变量或在代码中指定 Puppeteer 的浏览器执行模式（如 headless 或 non-headless）。

💻 使用示例

基础用法

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

// 初始化 Puppeteer 浏览器实例
let browser;
async function initBrowser() {
  browser = await puppeteer.launch({
    headless: true,
    width: 1200,
    height: 800,
  });
}

// 创建 MCP 服务器
const server = createMcpServer({
  async getBrowser() {
    if (!browser) await initBrowser();
    return browser;
  },
});

// 示例测试用例：检测颜色对比
async function testContrast(url) {
  const page = await browser.newPage();
  await page.goto(url);
  const result = await axe.run(page);
  return result;
}

// 启动服务器并开始测试
server.start(3000);

📚 详细文档

响应格式

MCP 服务器返回的可访问性测试结果采用 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": "修复以下任一问题：元素的对比度为 1.98（前景色：#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",
    "width": 1200,
    "height": 800
  }
}