QualiBooth
简体中文

Agora 新功能 · MCP 服务器

您的 AI 编程智能体， 如今也是无障碍专家。

Agora 内置的 MCP 服务器为 Claude Code、Cursor、GitHub Copilot 以及任何支持 MCP 的智能体提供真正的无障碍测试工具。智能体会扫描刚刚构建的页面，准确了解哪里不合规、原因何在，随即修复代码并再次扫描加以验证——这一切都在拉取请求创建之前完成。

开始免费试用 预约演示
在您的电脑上运行
服务器仅限本地，扫描也在本地完成
一条命令
即可连接您的编程智能体

编程会话动画示例：一位开发者让 AI 智能体检查 localhost:3000/checkout 的无障碍问题并进行修复。智能体调用 Agora 的 scan_url 工具，得到 58 分（满分 100 分），并发现四个问题：一个没有名称的按钮、一张没有替代文本的图片、低对比度文本以及一个没有标签的输入框。它修改了三个文件中的代码，再次扫描后达到 100 分（满分 100 分）。

适用于

  • Claude Code
  • Cursor
  • VS Code + Copilot
  • Windsurf
  • Claude Desktop
  • Codex CLI
  • Gemini CLI

AI 编写界面的盲区

智能体编写界面的速度，远超任何人审查其无障碍性的速度。

编程智能体从网络中学习，而网络上的大多数内容并不具备无障碍性：仅有图标的按钮、缺失的标签、低对比度的文本。没有测试手段，智能体就无法判断刚生成的组件能否被键盘或屏幕阅读器用户正常使用。现在它可以自行检查了，使用的正是您的无障碍团队早已信赖的引擎。

没有 Agora

  • 智能体凭猜测使用 ARIA，只能听天由命。
  • 无障碍缺陷直到测试阶段、审计时或用户反馈时才暴露。
  • 修复往往在数周后进行，脱离上下文且成本高昂。
  • “我看着没问题”是唯一的验证。

使用 Agora MCP

  • 智能体在真实浏览器中审查自己的产出。
  • 每个问题都附带选择器、HTML 以及修复方法。
  • 趁上下文仍然清晰，修复在同一次变更中完成。
  • 在任何人审查代码之前，重新扫描即可证明修复有效。

一分钟完成设置

只需连接一次，其余交给智能体。

  1. 01

    启用

    MCP 服务器随 Agora 一同启动，且仅在您的电脑上监听。“AI 智能体”页面会显示其状态及要使用的地址。

  2. 02

    连接智能体

    从 Agora 复制一条命令或配置片段，或使用 Cursor 和 VS Code 的一键安装。

  3. 03

    直接提问

    “扫描 localhost:3000 并修复发现的问题。”智能体会调用 Agora，应用修复并加以验证。

工具调用内部一览

智能体实际收到的内容

没有含糊的分数。Agora 会返回每一项违规及其对应的 WCAG 准则、具体元素、元素的 HTML 和明确的修复方案，格式可供智能体立即据此行动。

智能体 → Agora

{  "method": "tools/call",  "params": {    "name": "scan_url",    "arguments": {      "url": "localhost:3000/checkout",      "selector": "#payment-form",      "viewports": ["desktop", "mobile"]    }  }}

Agora → 智能体

58

http://localhost:3000/checkout

3 个问题 · 5 个元素 · WCAG 2.2 AA

  • Critical button-name WCAG 4.1.2

    Buttons must have discernible text

    button.pay-apple

    <button class="pay-apple"><svg …/></button>

    修复方法: Element does not have inner text that is visible to screen readers; aria-label attribute does not exist or is empty

  • Critical label WCAG 4.1.2

    Form elements must have labels

    #card-cvc

    <input id="card-cvc" placeholder="CVC">

    修复方法: Element does not have an explicit <label>; aria-label attribute does not exist or is empty

  • High color-contrast WCAG 1.4.3

    Elements must meet minimum color contrast ratio thresholds

    .total__hint

    <p class="total__hint">Taxes included</p>

    修复方法: Element has insufficient color contrast of 2.9 (foreground color: #a3a3a3, background color: #ffffff). Expected contrast ratio of 4.5:1

四款工具，覆盖所有工作流

测试正在运行的页面，或刚刚写好的标记代码

扫描任意 URL

scan_url

本地开发服务器、预发布环境、生产环境或磁盘上的文件。

  • 使用 CSS 选择器聚焦单个组件
  • 等待客户端渲染的内容加载完成
  • 桌面端和移动端视口
  • 可选：对扫描区域截图

扫描原始 HTML

scan_html

在组件接入页面之前即可审查，无需服务器。

  • 在真实 Chrome 中于内存内渲染
  • 组件模式会跳过页面级规则
  • 从基础 URL 加载您的 CSS，确保对比度检测准确
  • 与 scan_url 相同的详细报告

验证属性

validate_attributes

扫描器能发现缺失的名称，此工具则检查现有名称是否真正有意义。

  • 检查 aria-label、alt、title、标签和链接文本
  • AI 标记“图片”“点击这里”等含糊的值
  • 发现文件名和语言错误的标签
  • 每个被标记值的选择器、HTML 和原因

模拟屏幕阅读器

simulate_screen_reader

直接基于 Chrome 无障碍树，像盲人用户一样“聆听”页面或组件。

  • 按阅读顺序列出每条播报
  • 标题、地标、链接、表单、图片和表格
  • AI 审查阅读顺序和标题结构
  • 支持 URL 或 HTML

默认即无障碍

无障碍成为智能体工作方式的一部分

无需在数周后单独审计，测试就在智能体本已执行类型检查、测试和代码规范检查的同一循环中进行。

  1. 01

    构建

    智能体编写或修改界面。

  2. 02

    扫描

    针对页面或组件调用 Agora。

  3. 03

    修复

    应用 Agora 指出的修复方案。

  4. 04

    验证

    再次扫描，直到问题全部消除。

团队选择它的理由

专为开发者打造，深受无障碍团队信赖

4
款工具：两款扫描器、标签检查和屏幕阅读器
7+
款 AI 助手提供引导式设置
WCAG 2.2
A 级和 AA 级规则，另含 AAA 级检查
0
字节代码被发送到云端

常见问题

什么是 MCP？
Model Context Protocol（模型上下文协议）是一项开放标准，允许 AI 助手使用外部工具。Agora 内置 MCP 服务器，任何支持 MCP 的助手都可以通过它运行无障碍扫描。
支持哪些 AI 助手？
任何支持 MCP 的客户端。Agora 为 Claude Code、Cursor、搭配 GitHub Copilot 的 VS Code、Windsurf、Claude Desktop、Codex CLI 和 Gemini CLI 提供分步设置指南。
我的代码会离开我的电脑吗？
不会。MCP 服务器仅接受来自您本机的连接，Agora 在本地渲染并扫描页面。只有 validate_attributes 和 simulate_screen_reader 中的 AI 检查会将收集到的标签和播报内容（绝不是整个页面）发送到 QualiBooth API。
能测试 localhost 上的页面吗？
可以，这正是它的设计初衷。只需将智能体指向您的开发服务器、预发布站点或本地文件。
能测试尚未放入页面的组件吗？
可以。scan_html 工具无需服务器，即可在内存中渲染标记代码。组件片段会跳过文档标题、地标等页面级规则，使报告聚焦于组件本身。
开始使用需要什么？
安装 Agora，并使用拥有桌面版许可证的 QualiBooth 账户登录。MCP 服务器会自动启动，“AI 智能体”页面将引导您连接助手。
它能取代人工无障碍测试吗？
不能。自动化检查能及早发现大部分问题，但键盘操作、焦点和屏幕阅读器行为仍需人工测试。Agora MCP 确保在有人审查之前，基础问题已经解决。

以 AI 的速度交付无障碍界面

开始免费试用 Agora，一分钟内连接您的编程智能体，看着它在代码审查之前修复无障碍问题。

开始免费试用 预约演示