MCP 可访问性扫描器 🔍

这是一个使用Playwright和Axe-core提供自动化网页可访问性扫描的模型上下文协议（MCP）服务器。该服务器使LLMs能够执行WCAG合规性检查，捕获带注释的截图，并生成详细的可访问性报告。 一个强大的模型上下文协议（MCP）服务器，使用Playwright和Axe-core提供自动化网页可访问性扫描和浏览器自动化。此服务器使LLMs能够执行WCAG合规性检查，与网页交互，管理持久的浏览器会话，并生成带有视觉注释的详细可访问性报告。

功能

可访问性扫描

✅ 全面的WCAG 2.0/2.1/2.2合规性检查（A、AA、AAA级别） 🖼️ 自动捕获带有违规高亮显示的截图 📄 详细的JSON报告，附有修复建议 🎯 支持特定的违规类别（颜色对比度、ARIA、表单、键盘导航等）

浏览器自动化

🖱️ 使用可访问性快照点击、悬停和拖动元素 ⌨️ 输入文本并处理键盘输入 🔍 捕获页面快照以发现所有交互元素 📸 拍摄屏幕截图并保存PDF 🎯 支持基于元素和基于坐标的交互

高级功能

📑 多页工作流的标签管理 🌐 监控控制台消息和网络请求 ⏱️ 等待动态内容加载 📁 处理文件上传和浏览器对话框 🔄 在浏览器历史中导航

安装

您可以使用以下任一方法安装该包：

使用npm：

npm install -g mcp-accessibility-scanner

在VS Code中的安装

使用VS Code CLI在VS Code中安装可访问性扫描器：

对于VS Code：

code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

对于VS Code Insiders：

code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

配置

这里是Claude Desktop的配置：

{
  "mcpServers": {
    "accessibility-scanner": {
      "command": "npx",
      "args": ["-y", "mcp-accessibility-scanner"]
    }
  }
}

可用工具

MCP服务器提供了全面的浏览器自动化和可访问性扫描工具：

核心可访问性工具

scan_page

对当前页面进行全面的可访问性扫描，使用Axe-core。

参数：

• violationsTag: 要检查的WCAG/违规标签数组

支持的违规标签：

• WCAG标准：wcag2a, wcag2aa, wcag2aaa, wcag21a, wcag21aa, wcag21aaa, wcag22a, wcag22aa, wcag22aaa
• 第508节：section508
• 类别：cat.aria, cat.color, cat.forms, cat.keyboard, cat.language, cat.name-role-value, cat.parsing, cat.semantics, cat.sensory-and-visual-cues, cat.structure, cat.tables, cat.text-alternatives, cat.time-and-media

导航工具

browser_navigate

导航到URL。

• 参数：url (字符串)

browser_navigate_back

返回上一页。

browser_navigate_forward

前进到下一页。

页面交互工具

browser_snapshot

捕获当前页面的可访问性快照（比截图更适合分析）。

browser_click

在网页元素上执行点击操作。

• 参数：element (描述)，ref (元素引用)，doubleClick (可选)

browser_type

向可编辑元素输入文本。

• 参数：element, ref, text, submit (可选), slowly (可选)

browser_hover

在页面上的元素上悬停。

• 参数：element, ref

browser_drag

在两个元素之间执行拖放操作。

• 参数：startElement, startRef, endElement, endRef

browser_select_option

选择下拉菜单中的选项。

• 参数：element, ref, values (数组)

browser_press_key

按下键盘上的键。

• 参数：key (例如，'ArrowLeft' 或 'a')

屏幕截图及视觉工具

browser_take_screenshot

拍摄当前页面的屏幕截图。

• 参数：raw (可选), filename (可选), element (可选), ref (可选)

browser_pdf_save

将页面保存为PDF。

• 参数：filename (可选，默认为 page-{timestamp}.pdf)

浏览器管理

browser_close

关闭页面。

browser_resize

调整浏览器窗口大小。

• 参数：width, height

标签管理

browser_tab_list

列出所有打开的浏览器标签。

browser_tab_new

打开一个新的标签。

• 参数：url (可选)

browser_tab_select

通过索引选择一个标签。

• 参数：index

browser_tab_close

关闭一个标签。

• 参数：index (可选，如果没有提供则关闭当前标签)

信息及监控工具

browser_console_messages

返回页面的所有控制台消息。

browser_network_requests

返回自加载页面以来的所有网络请求。

实用工具

browser_wait_for

等待文本出现/消失或时间流逝。

• 参数：time (可选), text (可选), textGone (可选)

browser_handle_dialog

处理浏览器对话框（警告、确认、提示）。

• 参数：accept (布尔值), promptText (可选)

browser_file_upload

将文件上传到页面。

• 参数：paths (绝对文件路径数组)

视觉模式工具（基于坐标的交互）

browser_screen_capture

拍摄用于基于坐标交互的屏幕截图。

browser_screen_move_mouse

将鼠标移动到特定坐标。

• 参数：element, x, y

browser_screen_click

在特定坐标处点击。

• 参数：element, x, y

browser_screen_drag

从一个坐标拖动到另一个坐标。

• 参数：element, startX, startY, endX, endY

browser_screen_type

输入文本（与坐标无关）。

• 参数：text, submit (可选)

使用示例

基本可访问性扫描

1. 使用browser_navigate导航到example.com
2. 运行scan_page，设置violationsTag: ["wcag21aa"]

颜色对比度检查

1. 使用browser_navigate导航到example.com
2. 运行scan_page，设置violationsTag: ["cat.color"]

多步骤工作流

1. 使用browser_navigate导航到example.com
2. 使用browser_snapshot捕获可用元素
3. 使用browser_click点击“登录”按钮
4. 使用browser_type输入"user@example.com"
5. 对登录页面运行scan_page
6. 使用browser_take_screenshot捕获最终状态

页面分析

1. 导航到example.com
2. 使用browser_snapshot捕获所有交互元素
3. 使用browser_console_messages查看控制台消息
4. 使用browser_network_requests检查网络活动

标签管理

1. 使用browser_tab_new打开一个新标签
2. 在每个标签中导航到不同的页面
3. 使用browser_tab_select在标签之间切换
4. 使用browser_tab_list列出所有标签

等待动态内容

1. 导航到一个页面
2. 使用browser_wait_for等待特定文本出现
3. 与动态加载的内容进行交互

注意： 大多数交互工具需要来自browser_snapshot的元素引用。在尝试与页面元素交互之前，请始终捕获快照。

开发

克隆并设置项目：

git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install

许可证

MIT