MCP可访问性扫描仪🔍
](https://mseep.ai/app/justasmonkev-mcp-accessibility-scanner)
一种模型上下文协议（MCP）服务器，使用Playwright和Axe核心提供自动web可访问性扫描。此服务器使LLM能够执行WCAG合规性检查，捕获带注释的屏幕截图，并生成详细的可访问性报告。 一个强大的模型上下文协议（MCP）服务器，使用Playwright和Axe内核提供自动web可访问性扫描和浏览器自动化。此服务器使LLM能够执行WCAG合规性检查，与网页交互，管理持久浏览器会话，并生成带有视觉注释的详细可访问性报告。
特性
辅助功能扫描
✅ 全面的WCAG 2.0/2.1/2.2合规性检查（A级、AA级、AAA级）\ 🖼️ 自动截图并突出显示违规行为\ 📄 详细的JSON报告和补救指南\ 🎯 支持特定的违规类别（颜色对比、ARIA、表单、键盘导航等）
浏览器自动化
🖱️ 使用辅助功能快照单击、悬停和拖动元素\ ⌨️ 键入文本并处理键盘输入\ 🔍 捕获页面快照以发现所有交互元素\ 📸 截图并保存PDF\ 🎯 支持基于元素和基于坐标的交互
高级功能
📑 多页工作流的选项卡管理\ 🌐 监控控制台消息和网络请求\ ⏱️ 等待动态内容加载\ 📁 处理文件上传和浏览器对话框\ 🔄 浏览浏览器历史记录
安装
您可以使用以下任何方法安装该软件包：
使用npm：
npm install -g mcp-accessibility-scanner在VS代码中安装
使用VS Code CLI在VS Code中安装辅助功能扫描程序：
对于VS代码：
code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'对于VS代码内部人士：
code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'配置
以下是Claude桌面配置：
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}可用工具
MCP服务器提供全面的浏览器自动化和可访问性扫描工具：
核心可访问性工具
scan_page
使用Axe核心对当前页面执行全面的可访问性扫描。
参数：
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（例如，“左箭头”或“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. Navigate to example.com using browser_navigate
2. Run scan_page with violationsTag: ["wcag21aa"]颜色对比度检查
1. Use browser_navigate to go to example.com
2. Run scan_page with violationsTag: ["cat.color"]多步骤工作流
1. Navigate to example.com with browser_navigate
2. Take a browser_snapshot to see available elements
3. Click the "Sign In" button using browser_click
4. Type "user@example.com" using browser_type
5. Run scan_page on the login page
6. Take a browser_take_screenshot to capture the final state页面分析
1. Navigate to example.com
2. Use browser_snapshot to capture all interactive elements
3. Review console messages with browser_console_messages
4. Check network activity with browser_network_requests选项卡管理
1. Open a new tab with browser_tab_new
2. Navigate to different pages in each tab
3. Switch between tabs using browser_tab_select
4. List all tabs with browser_tab_list等待动态内容
1. Navigate to a page
2. Use browser_wait_for to wait for specific text to appear
3. Interact with the dynamically loaded content注： 大多数交互工具都需要来自browser_snapshot的元素引用。在尝试与页面元素交互之前，始终捕获快照。
发展
克隆并设置项目：
git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install许可证
麻省理工学院
