AI 无障碍合规守护者 (AI A11y Guardian)#

一键检测网页 / H5 页面的无障碍（Accessibility）问题，对照 WCAG 2.1 / 2.2 标准出具修复建议，并生成可视化合规报告。

业务场景#

政务平台、教育类应用、电商购物车、银行保险等涉及公共服务的 Web / H5 产品，必须满足国家《信息技术 无障碍设计规范》与 WCAG 国际标准。传统人工审查效率低、覆盖窄，且难以覆盖动态渲染的 SPA 页面。

本 Combo 编排 agent-browser、summarize、card-renderer 三个专业 Skill，一次完成页面扫描 → AI 分析 → 报告生成的全链路。

痛点#

• 开发者不了解 WCAG 细节，代码埋下无障碍隐患
• 人工审查无法覆盖动态渲染的 JavaScript SPA 页面
• 测试报告缺乏可操作的修复指导
• 合规认证需要第三方报告，手动整理费时费力

工作流程#

text

[输入 URL / HTML 源码 / 截图]
      ↓
agent-browser    → 深度渲染页面（含 JS 执行），截图 + 提取 DOM 结构
      ↓
summarize         → AI 对照 WCAG 2.1 AA 标准逐一分析，输出结构化问题清单
      ↓
card-renderer     → 将严重问题渲染为可视化违规卡片，生成合规摘要图
      ↓
[交付物] 问题清单 + 修复建议 + 合规报告卡片

核心功能#

• 全自动页面渲染：使用真实 Chromium 浏览器完整执行 JS，捕获 Shadow DOM、懒加载内容
• 多层级问题识别：色彩对比度不足（AA/AAA）、键盘陷阱、缺少 ARIA 标签、图片缺少 alt、表单标签缺失、焦点顺序混乱等
• 可操作的修复建议：每个问题附修复代码片段（HTML/CSS/ARIA），无需猜测
• 可视化合规报告：生成违规卡片图，适合提交给合规团队或客户
• 批量 URL 扫描：支持多个页面一次性检测，汇总成综合报告

使用方法#

触发词#

• 无障碍检测 <URL>
• a11y 检查 <URL>
• WCAG 合规报告 <URL>
• 网页无障碍问题
• 生成无障碍报告

输入#

提供以下任一：

• URL：完整网页地址（自动渲染）
• HTML 源码：粘贴 HTML 内容（静态分析）
• 截图文件路径：已有页面截图（辅助分析）

可选参数#

• --level AA|AAA 指定合规等级（默认 AA）
• --format card|list 报告格式（默认 card）

示例对话#

用户： 检测 https://example.com 的无障碍问题

AI：

🧩 Step 1: 渲染页面中... 🔍 Step 2: WCAG 分析中... 📊 Step 3: 生成合规报告中...

检测结果示例：

问题严重性WCAG条款修复难度图片缺少 alt 属性🔴 高1.1.1 Non-text Content🟢 易按钮缺少可访问名称🔴 高4.1.2 Name, Role, Value🟢 易色彩对比度不足 (5.2:1)🟡 中1.4.3 Contrast🟡 中键盘无法聚焦模态框🔴 高2.1.2 No Keyboard Trap🟡 中表单缺少 label 标签🟡 中3.3.2 Labels or Instructions🟢 易

合规摘要：

• 总体评分：68/100
• 致命问题：2 项 | 中等问题：3 项 | 提示：7 项
• 预估修复时间：2 小时

输出示例#

text

📋 无障碍合规报告 - example.com
生成时间：2026-04-24 19:40 UTC

🚨 致命问题 (2)
  ❌ 图片 logo.png 缺少 alt 属性 → WCAG 1.1.1
     修复：<img src="logo.png" alt="公司Logo">

  ❌ 登录按钮无名称 → WCAG 4.1.2
     修复：<button aria-label="登录">

⚠️ 中等问题 (3)
  ⚡ 搜索框对比度 3.2:1（需≥4.5:1）→ WCAG 1.4.3
  ⚡ 弹出框无法键盘关闭 → WCAG 2.1.2
  ⚡ 表单缺少必填项标记 → WCAG 3.3.2

💡 优化提示 (7)
  建议为所有图标按钮添加 aria-label...
  建议为日期选择器添加 aria-describedby...

🖼️ [合规报告卡片图片]

依赖说明#

agent-browser#

用于完整渲染页面（含 JavaScript 执行）。支持等待动态内容加载，捕获 Shadow DOM、iframe 内内容，提取完整 DOM 树用于分析。

summarize#

调用 AI（MiniMax）对照 WCAG 2.1 / 2.2 标准条款，对提取的 DOM 结构进行逐条分析，输出带严重性评级的结构化问题清单，并附修复建议。

card-renderer#

将严重问题列表和高评分问题渲染为知识卡片风格的违规汇总图，图片可分享给团队或用于合规存档。

注意事项#

• 页面需要公开可访问（内网页面请提供 HTML 源码）
• 检测基于截图 + DOM 结构，无法替代真实读屏软件测试
• 涉及登录态页面的检测请提前告知 AI 以获取测试账号
• 合规报告图片默认使用 Mac Pro 风格，可通过参数切换赛博朋克风格