AI无障碍合规守护者

AI辅助无障碍合规守护者 — 自动化检测网页/移动端H5的无障碍问题，生成修复建议并出具合规报告

Security Scan

该 Skill 的声明、运行说明和依赖（agent-browser、summarize、card-renderer）在功能上是一致的——它是一个纯说明型的无障碍检测/报告编排器，没有要求额外凭据或下载可执行代码。

Purpose & Capability

名称和描述都说明了对网页/H5 进行渲染、DOM 提取、按 WCAG 分析并生成可视化报告；所列依赖（agent-browser 用于 Chromium 渲染，summarize 用于 AI 分析，card-renderer 用于生成图片卡片）与目标一致，未请求与功能不相关的凭据或系统访问。

Instruction Scope

SKILL.md 明确要求完整渲染页面（含 JS、Shadow DOM、iframe）、提取 DOM、截图并将结果传给 summarize 和 card-renderer。总体在边界内，但需要注意两点：1) 完整渲染会在目标页面执行任意 JavaScript（这是为检测动态内容所必需的），对扫描恶意页面或未知第三方时有风险；2) 若需要检测登录态或内部页面，用户需要提供 HTML 源或测试账户，可能导致敏感数据暴露；文档并未自动处理凭据或凭据加密，依赖用户/组织自行管理。

Install Mechanism

这是一个 instruction-only Skill（无安装说明、无代码文件、无外部下载）。因此不会在代理宿主上写入或执行新二进制文件，安装风险低。

Credentials

不要求任何环境变量、凭据或配置路径；所有必要的上下文（URL、HTML、截图路径）由用户提供，所需权限与功能相符。

Persistence & Privilege

flags 显示 always:false 且允许用户调用/代理调用为默认行为，不请求长期驻留或提升平台权限。没有修改其他技能或系统配置的指示。

Scan Findings in Context

[no_code_files] expected: 正如预期，该 Skill 是纯说明文档（instruction-only），静态正则扫描无代码可供分析，因此没有可疑正则匹配。

Assessment

该 Skill 本身在说明层面是自洽且低风险的，但在使用前请注意：1) 在检测需要登录或内网页面时，不要将真实敏感凭据直接贴入普通对话，优先用临时/测试账号或提供脱敏的 HTML 源；2) 渲染目标页面会执行其 JavaScript，避免在未信任或可疑站点上运行以免触发恶意脚本；3) 验证 agent-browser、summarize、card-renderer 这三个依赖技能的来源和权限（确认它们不会将抓取的数据发送到未知外部端点）；4) 若要在企业环境中使用，先与安全/合规团队确认数据处理和报告存储策略。总体可在受控条件下使用（例如先在公开示例页或经批准的测试页面上验证功能）。

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 风格，可通过参数切换赛博朋克风格