对网页做 WCAG 2.1…

当需要检查网页是否符合 WCAG 2.1 无障碍标准、定位具体问题并批量修复时使用。

适用场景

解决思路

1. 先获取站点信息：用 Webflow MCP 的 data_sites_tool（action=list_sites）列出可用站点，再用 action=get_site 获取站点详情。
2. 确定审计页面：若用户已提供 page ID 则直接使用；否则用 data_pages_tool（action=list_pages）列出所有页面及其 page ID，让用户选择要审计的页面。
3. 确认审计范围：询问用户要执行完整审计（全部检查）、仅关键问题（WCAG Level A）还是特定类别（表单、按钮、导航等）。
4. 提取页面元素：用 data_element_tool（action=get_all_elements，直接传入 page ID，无需 Designer 连接），设置 include_style_properties: true 以检查焦点样式，设置 include_all_breakpoint_styles: false 以减少数据量。
5. 解析元素数据，识别交互与内容元素：按钮（Button、带 button role 的 LinkBlock）、链接（TextLink、Link、LinkBlock）、表单输入（Input、Select、Textarea）、标题（带层级的 Heading）、交互式 div/span（检查 onClick 或交互 role）；图片（Image）本次审计跳过。
6. 提取每个元素的属性：ARIA 属性（aria-label、aria-describedby、role、tabIndex）、DOM 属性（id、domId、href、type、placeholder）、文本内容、样式属性（outline、border 用于焦点状态）、元素元数据（canHaveAttributes、tag name）。
7. 检查关键问题（WCAG Level A）：图标按钮无标签（WCAG 4.1.2）——找出无文本内容的 Button，检查是否缺少 aria-label 或 aria-labelledby，修复方式是添加描述性 aria-label。
8. 检查表单输入无标签（WCAG 1.3.1）——找出 Input、Select、Textarea，检查是否缺少关联 label 或 aria-label，修复方式是添加 aria-label 或用 id 关联 <label>。
9. 检查非语义点击处理器（WCAG 2.1.1）——找出 Div 或 Span 元素，检查是否有交互行为但缺少正确 role/键盘支持，修复方式是添加 role="button"、tabIndex="0"，并建议改用真正的 <button>。
10. 检查无目标链接（WCAG 2.1.1）——找出没有 href 属性的 Link 元素，检查是否仅用 onClick 而无 href，修复方式是添加正确的 href 或转换为按钮。
11. 检查严重问题（WCAG Level AA）：焦点轮廓被移除且无替代（WCAG 2.4.7）——找出带 outline: none 样式的元素，检查是否有可见的替代焦点指示，修复方式是添加可见焦点样式（border、box-shadow、背景变化）。
12. 检查缺少键盘处理器（WCAG 2.1.1）——找出带 onClick 的元素，检查是否缺少 Enter/Space 键的 onKeyDown，修复方式是添加键盘事件处理器。
13. 检查触摸目标过小（WCAG 2.5.5）——找出可点击元素（按钮、链接），检查宽或高是否 < 44px，修复方式是增加 padding 或设置 min-width/min-height 为 44px。
14. 检查中等问题：标题层级问题（WCAG 1.3.1）——找出 Heading 元素（h1-h6），检查是否跳级（如 h1 → h3 跳过 h2），修复方式是使用正确的顺序标题层级。
15. 检查正 tabIndex（WCAG 2.4.3）——找出 tabIndex > 0 的元素，检查是否打乱自然 Tab 顺序，修复方式是仅用 tabIndex="0" 或 "-1"，让自然 DOM 顺序生效。
16. 检查 role 缺少必需属性（WCAG 4.1.2）——找出带 ARIA role 的元素，检查是否缺少必需的 ARIA 属性（如 role="button" 但无 tabIndex），修复方式是补充该 role 所需的属性。
17. 将发现分类：Critical（必须修复，阻断访问）、Serious（应当修复，显著影响可用性）、Moderate（考虑修复，改善体验）。
18. 计算无障碍评分（0-100）：从 100 开始，每个 Critical 扣 10 分，每个 Serious 扣 5 分，每个 Moderate 扣 2 分，最低为 0。
19. 生成严重程度摘要：问题总数、按严重程度分类、最常见问题类型、受影响最多的页面/区块。
20. 生成详细报告，格式包含：标题（ACCESSIBILITY AUDIT: [页面名]）、按 CRITICAL/SERIOUS/MODERATE 分组，每条含元素名、问题描述、位置（含元素 ID 如 {component: "abc", element: "xyz"}）、当前代码、修复建议、WCAG 条款；末尾 SUMMARY 含问题总数、各严重程度数量、无障碍评分、最常见问题 Top 3。
21. 提供可执行洞察：按优先级排序的修复清单（关键优先）、快速见效项（易修复且影响大）、设计模式建议、学习资源。
22. 可选：主动提出自动修复（修复不需要 Designer，可直接提供自动修复），展示修复预览，列出每个修复项、元素、修复内容、是否安全（如仅添加属性为安全，改标题层级可能影响视觉样式），让用户输入编号跳过、"all" 全选、"none" 取消。
23. 应用已批准的修复：用 data_element_tool（action=set_attributes），分批处理，大批量修复时显示进度，逐项报告成功/失败。
24. 生成修复后报告：已修复 X 个、剩余 Y 个、新无障碍评分 XX/100（从 YY/100 提升）。
25. 可选：提供导出格式（Markdown 可读文档、JSON 机器可读便于跟踪、CSV 电子表格便于团队评审）。
26. 可选：提供资源链接——WCAG 2.1 快速参考、Webflow 无障碍最佳实践、推荐测试工具（浏览器扩展、屏幕阅读器）。
27. 所有工具调用必须包含必需的 context 参数（15-25 词，第三人称视角）；所有 Webflow 操作必须使用 Webflow MCP 工具，不得使用其他工具或方法。
28. 安全规则：建议修复前始终展示详细问题列表，清晰标注严重程度，用通俗语言解释每个问题的影响，为每个发现提供具体 WCAG 引用；允许用户选择要修复的问题，警告可能影响视觉设计的修复，分批处理并报告每项结果；页面无法访问时清楚说明，元素无法修改时建议手动修复，将自动修复与需人工审查项分开；建议修复前验证元素类型、检查元素是否支持属性、测试修复对元素类型是否有效、若修复可能破坏现有功能则警告。
29. 输出格式规范：使用图标 🔍 发现/分析、🔄 处理中、✅ 通过/成功、❌ 失败/关键问题、⚠️ 警告/严重问题、💡 建议/中等问题、📊 报告/摘要、🎯 优先/行动项、🔴 关键优先、🟡 中优先、🟢 低优先；报告结构包含清晰的严重程度分类、带 ID 的具体元素标识、当前状态与建议修复对比、每个问题的 WCAG 引用、含可执行优先级的摘要、可衡量进度的评分；沟通使用清晰无术语的语言，解释为什么是问题（对用户的影响），提供具体可执行的修复，鼓励用真实辅助技术测试，强调自动检查只是起点。

适用边界 · 注意事项

• 不检查图片 alt 文本（应使用 asset-audit 技能）。
• 不检查颜色对比度、动画/动效偏好、屏幕阅读器实际行为、内容可读性等需要视觉分析或人工验证的项目。
• element_snapshot_tool 是 Designer 工具，仅在需要可选视觉预览时才需要 Designer 连接；审计和修复本身无需 Designer。