mcpField
A
Aether WCAG Scanner

Aether WCAG Scanner

本地服务
allchemylabs.ai开发工具11 周前更新

关于 Aether WCAG Scanner

Aether WCAG Scanner 是供编码 Agent 使用的 MCP 服务,可扫描网页中的 WCAG 2.1 AA 问题,并返回经真实浏览器检查的修复建议。它通过 Playwright 和 axe-core 检查桌面、平板及移动视口,提供离线模板,也可选用托管引擎生成上下文修复建议。

主要功能

  1. 01用 Playwright 和 axe-core 扫描渲染页面
  2. 02检查桌面、平板和移动视口
  3. 03提供基于 WCAG 的修复建议
  4. 04复查修复并报告回归问题
  5. 05无需浏览器即可检查 HTML 片段
  6. 06扫描单页应用路由

适用场景

  1. 01发现在线页面的无障碍问题
  2. 02在编码工作流中审查并应用修复
  3. 03验证修复是否消除违规项
  4. 04无需在线 URL 检查 HTML 片段

MCP 相关

向 stdio MCP 客户端提供五种工具,用于扫描、获取修复建议、验证更改、检查 HTML 和提交反馈。没有 API 密钥时,扫描和模板修复在本地运行;配置密钥后可从托管引擎获取上下文修复建议。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"allchemylabs-aether-wcag-scanner": {
"command": "npx",
"args": [
"-y",
"@allchemylabs/aether-wcag-scanner"
],
"env": {
"ALLCHEMY_API_KEY": "<ALLCHEMY_API_KEY>"
}
}
}
}
启动命令npx -y @allchemylabs/aether-wcag-scanner
需要配置的环境变量
ALLCHEMY_API_KEY密钥Beta API key from https://beta.allchemylabs.ai/?src=registry (optional: without it the scanner runs fully offline with template fixes)

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npm@allchemylabs/aether-wcag-scanner1.0.8

工具

5

收录的工具列表 · 更新于 1 周前

参数类型必填说明
spaobject否扫描单页应用的多个路由,而不是单个 URL。提供此块即选择 SPA 模式。不能与 `url` 同时使用。
spa.routesarray否手动指定要扫描的路由(最多 100 个)。留空 = 自动发现。
spa.entryUrlstring是SPA 入口 URL(例如 http://localhost:4200)
spa.frameworkenum否前端框架。如果为 "generic",则自动检测。angular | react | vue | generic
spa.maxRoutesinteger否自动发现的最大路由数(默认值为 20)
urlstring否单页目标 URL(例如 http://localhost:3000)。提供此项或 `spa`,不能同时提供。
maxFixesinteger否最多为多少个违规项生成修复方案(默认值为 10)。设为 0 则仅执行扫描(不调用 RAG)。
viewportenum否仅限单页模式:要报告的视口。"all" 会扫描桌面、平板电脑和移动设备。all | desktop | tablet | mobile
minSeverityenum否要纳入的最低严重级别(默认值为 "moderate")critical | serious | moderate | minor
verifyFixesboolean否对每个生成的修复方案重新运行真实的 axe(原始 HTML 与修复后的 HTML),以衡量修复是否有效(默认值为 true)

详细介绍

Aether WCAG 扫描器

为 Claude Code、Cursor、Codex 和其他编码 Agent 提供的 MCP 服务,可发现 WCAG 2.1 AA 无障碍违规并返回可直接应用的修复方案—— 而不只是列出问题。

它通过 Playwright + axe-core 在桌面、平板和移动设备视口中驱动真实浏览器, 然后为每项违规提供具体修复方案:修正后的 HTML、相关的 WCAG 成功标准和技术代码示例。

无需密钥即可免费使用。要获取质量更高、结合上下文的修复方案,请在 beta.allchemylabs.ai 申请 Beta 密钥(使用 GitHub 登录)。


与众不同之处

仅根据标记工作的 AI 编码 Agent 必须推断页面的功能。Aether 会在真实浏览器中运行页面, 使用 axe-core 测量页面,并让每条建议的修复方案都以 WCAG 规范为依据,因此 Agent 依据的是测量结果,而不是推断。

单独使用编码 AgentAether,离线使用Aether,使用 API 密钥
如何查看页面阅读提供给它的 HTML在 Chromium 中以桌面、平板和移动设备宽度渲染页面并运行 axe-core同左
可以测量什么标记中可见的结构axe 在渲染页面上测量的内容:对比度、无障碍名称、ARIA 用法、可聚焦区域、地标同左
修复建议根据模型的一般知识生成针对常见规则的确定性模板先使用模板,再使用 WCAG 语料库示例,最后使用模型;每项引用的技术都会通过依据核验
如何检查修复方案除非你自行设置,否则不会检查在已修复元素上重新运行 axe;报告已解决的问题和回归问题同左
每项修复方案引用什么模型记忆中的内容axe 规则及其严重程度WCAG 成功标准和技术,并显示被拒绝的候选项
网络取决于 Agent无;完全在你的计算机上运行修复请求发送到托管引擎;无法访问时回退到离线模板

安装

/plugin marketplace add https://github.com/allchemylabs/claude-plugins.git
/plugin install aether-wcag-scanner@allchemylabs

官方 Claude Code 市场页面上线后,你也可以直接从那里安装。

在 Claude Code 中使用 /plugin install 安装时,系统会提示输入你的 Allchemy Labs API 密钥;请粘贴你从 beta.allchemylabs.ai 获取的密钥。从终端安装(claude plugin install …),或让 Claude 为你运行安装,不会弹出提示,因此请在之后使用下面的命令设置密钥。稍后要更改密钥,也可运行同一条命令:

/plugin configure aether-wcag-scanner@allchemylabs

首次启动时会安装插件依赖(约需一分钟),首次扫描时会为 Playwright 下载 Chromium。如果安装后 /mcp 显示服务未连接,请稍等片刻,然后运行 /reload-plugins。

无密钥运行

插件在安装时会要求提供密钥,因为云端修复功能需要密钥。扫描器本身在本地运行,无需密钥也能正常使用(例如通过终端安装后或使用 npx):每项违规都会获得本地模板修复方案。Beta 密钥可通过托管的洞察引擎提供质量更高、结合上下文的修复方案;请前往 beta.allchemylabs.ai 获取(使用 GitHub 登录)。 通过上述提示设置密钥,或在正在扫描的项目的 .env 文件中添加 ALLCHEMY_API_KEY=<key>。


在 Claude Code 之外使用(任意 MCP 客户端)

同一服务也发布到了 npm 和 MCP Registry,名称为 @allchemylabs/aether-wcag-scanner。任何支持 stdio 的 MCP 客户端都可以运行它:

{
  "mcpServers": {
    "aether-wcag-scanner": {
      "command": "npx",
      "args": ["-y", "@allchemylabs/aether-wcag-scanner"],
      "env": { "ALLCHEMY_API_KEY": "<your beta key>" }
    }
  }
}

首次扫描时会下载 Playwright 的 Chromium(磁盘占用约 500 MB: 包括浏览器和无头 shell)。如果没有设置 ALLCHEMY_API_KEY, 扫描器仍会完全离线运行,并返回模板修复方案。

Claude Code 会获得 /wcag-scan 技能,用于驱动扫描 → 审查 → 修复 → 验证流程。其他 Agent 只能看到工具说明和服务在连接时发送的指令,因此若要实现相同行为,请将 AGENTS.md 复制到项目中(Codex 可原生读取;Cursor 和 Windsurf 可将其作为规则文件)。如果没有该文件,Agent 可能会获取页面 HTML 并猜测,而不是运行浏览器扫描。

5 个工具

工具功能
aether_scan_and_fix推荐。 扫描 URL,或通过 spa 区块扫描单页应用的多个路由;一次调用即可返回违规项及其修复方案,并在真实浏览器中逐一验证。将 maxFixes: 0 设为仅快速扫描。
aether_get_fix获取某个特定违规项的修复方案(在真实浏览器中验证)。省略 html 可改为获取规则级说明,包括 WCAG 成功标准和技术示例。
aether_verify_fix使用真实 Playwright + axe 确定性地验证修复——重新扫描 URL,或比较修复前后的 HTML。报告目标问题是否已解决、是否出现新的回归,以及合规性的净变化。
aether_check_html分析 HTML 片段中的问题——无需实时 URL 或浏览器。
aether_submit_feedback为修复方案评分(有用/无用),帮助指导引擎持续改进;你的反馈有助于提供更好的修复方案。

只需像平常一样向 Claude 提问,例如 “检查 localhost:3000 的无障碍问题并修复”——它会选择合适的工具。

/wcag-scan 技能

运行 /wcag-scan <url> 即可使用引导式工作流:扫描 → 审查违规项 → 应用修复 → 重新扫描以验证 → 汇总。该技能会协调上述工具,并直接修改你的文件。

钩子

该插件会向 Claude Code 添加两个钩子:

  • 会话开始时: 检查插件依赖项和 Chromium 是否已安装,并在首次运行时安装它们。
  • 每次编辑后: Claude 编辑 HTML、JSX、TSX、Vue 或 Svelte 文件时,会运行快速启发式检查(无需浏览器),并向 Claude 报告可能存在的无障碍问题。该检查绝不会阻止编辑,且结果可能出现误报。

如需在所有项目中关闭编辑后检查,请运行 /plugin configure aether-wcag-scanner@allchemylabs,并将编辑后无障碍检查 设为 false。如需在某个项目中关闭(或重新开启)检查,请将以下内容添加到该项目的 .claude/settings.local.json:

{ "env": { "AETHER_POSTEDIT_HOOK": "0" } }

在该项目中,将 "1" 用作重新开启检查的值。进行任一更改后,都请重启 Claude Code。


扫描单页应用

将 spa 区块传给 aether_scan_and_fix,而不是传入 url:

{ "spa": { "entryUrl": "http://localhost:4200", "framework": "angular", "maxRoutes": 10 } }
  • entryUrl — 应用启动地址。除非在 routes: [{ "path": "/settings", "name": "Settings" }] 中列出路由,否则会通过爬取客户端链接来发现路由。
  • framework — angular、react、vue,或省略以自动检测。
  • maxRoutes — 已发现路由的数量上限。

导航在客户端进行(各路由之间会保留浏览器上下文和应用状态),就绪状态由分层稳定性级联机制判定——包括 DOM 静默、Angular testability 等框架钩子以及待处理请求清空——绝不通过 Playwright 的 networkidle 判定,因为它会在长轮询或 WebSocket 应用中陷入死锁。因此,设置了 networkIdle 的配置会被拒绝。

要求

  • Node.js >= 20
  • Chromium(首次运行时自动安装)

免责声明

Aether 是一款无障碍分析与指导工具。使用该平台本身并不能使你的网站、应用程序或数字服务符合 WCAG、ADA(包括 Title II)、《欧洲无障碍法案》、Section 508、EN 301 549 或任何其他无障碍法律或标准。

自动扫描只能检测部分无障碍障碍。“零问题”结果表示扫描器在其检测范围内未发现任何问题,并不代表相关对象在法律上合规。

你仍需负责:

  • 与具备资质的人员一起审查发现的问题
  • 修复底层代码和内容中的问题
  • 根据需要进行或委托进行人工测试和审核
  • 随着产品变化持续维护无障碍体验
  • 就自身的具体义务寻求法律建议

Aether 不提供法律建议,也不能替代无障碍审核或由合格审核员编制的 VPAT/ACR。

许可证

客户端(此插件)采用 MIT 许可证。托管式分析引擎及 Allchemy Labs 的相关服务均为专有内容,详见 LICENSE 和 NOTICE。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。