- name
- ai-a11y-guardian
- description
- AI辅助无障碍合规守护者 — 自动化检测网页/移动端H5的无障碍问题，生成修复建议并出具合规报告
- category
- AI|开发|自动化
- triggers
- 无障碍检测, accessibility, a11y, WCAG合规, 网页无障碍, 移动端无障碍, 读屏兼容, 色盲友好, 合规报告
- version
- 1.0.0
- author
- OpenClaw Agent
- tags
- dependencies
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 页面
- 测试报告缺乏可操作的修复指导
- 合规认证需要第三方报告，手动整理费时费力
工作流程
[输入 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 小时
输出示例
📋 无障碍合规报告 - 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 风格，可通过参数切换赛博朋克风格