webflow/webflow-skills

无障碍审计

适用于 Webflow 页面的全面 WCAG 2.1 无障碍审计，提供详细问题检测和可行的修复方案。

重要说明

始终使用 Webflow MCP 工具进行所有操作：

• 使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
• 使用 Webflow MCP 的 data_sites_tool（操作：list_sites）识别可用站点
• 使用 Webflow MCP 的 data_sites_tool（操作：get_site）获取站点详情
• 使用 Webflow MCP 的 data_pages_tool（操作：list_pages）获取所有页面及其 ID
• 使用 Webflow MCP 的 data_element_tool（操作：get_all_elements，直接传入页面 ID）获取详细的元素信息
• 使用 Webflow MCP 的 data_element_tool（操作：set_attributes）修复无障碍问题
• 使用 Webflow MCP 的 element_snapshot_tool 获取元素的视觉预览——这是一个 Designer 工具，使用时需要 Designer 连接
• 不要使用任何其他工具或方法进行 Webflow 操作
• 所有工具调用必须包含必需的 context 参数（15-25 个词，第三人称视角）
• 审计或修复不需要 Designer 连接。 data_element_tool 可对 list_pages 返回的任何页面 ID 进行无头操作。仅在选择使用 element_snapshot_tool 进行可选的视觉预览时才需要 Designer。

操作说明

阶段 1：站点与页面选择

1. 获取站点信息：使用 Webflow MCP 的 data_sites_tool（操作：list_sites）识别目标站点
2. 请求选择页面：
   • 如果用户提供了页面 ID，直接使用
   • 否则，使用 data_pages_tool（操作：list_pages）显示可用页面
   • 让用户选择要审计的页面
3. 确认审计范围：询问用户要检查的内容：
   • 完整审计（所有无障碍检查）
   • 仅关键问题（WCAG A 级）
   • 特定类别（表单、按钮、导航等）

阶段 2：元素提取与分析

4. 提取所有元素：使用 data_element_tool（操作：get_all_elements），传入阶段 1 中目标页面的 ID 进行详细分析——无需 Designer 连接
   • 设置 include_style_properties: true 以检查焦点样式
   • 设置 include_all_breakpoint_styles: false 以最小化数据量
5. 解析元素数据：识别交互和内容元素：
   • 按钮（Button、具有按钮角色的 LinkBlock）
   • 链接（TextLink、Link、LinkBlock）
   • 表单输入（Input、Select、Textarea）
   • 标题（带有级别的 Heading 元素）
   • 交互式 div/span（检查 onClick 或交互角色）
   • 图片（Image 元素）——本次审计跳过
6. 提取每个元素的属性：
   • ARIA 属性（aria-label、aria-describedby、role、tabIndex）
   • DOM 属性（id、domId、href、type、placeholder）
   • 文本内容
   • 样式属性（用于焦点状态的 outline、border）
   • 元素元数据（canHaveAttributes、标签名称）

阶段 3：无障碍检查

关键问题（必须修复——WCAG A 级）

7. 无标签的纯图标按钮（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="button"、tabIndex="0"，建议使用真正的 <button>

10. 无目标的链接（WCAG 2.1.1）

    • 查找：没有 href 属性的 Link 元素
    • 检查：链接仅使用 onClick 而无 href
    • 影响：键盘无法访问，破坏浏览器功能
    • 修复：添加正确的 href 或转换为按钮

严重问题（应修复——WCAG AA 级）

11. 焦点轮廓被移除且无替代（WCAG 2.4.7）

    • 查找：带有 outline: none 样式的元素
    • 检查：没有可见的替代焦点指示器
    • 影响：键盘用户无法看到焦点
    • 修复：添加可见的焦点样式（border、box-shadow、背景变化）

12. 缺少键盘处理器（WCAG 2.1.1）

    • 查找：带有 onClick 处理器的元素
    • 检查：缺少 Enter/Space 键的 onKeyDown
    • 影响：仅靠键盘无法使用
    • 修复：添加键盘事件处理器

13. 触摸目标太小（WCAG 2.5.5）

    • 查找：可点击元素（按钮、链接）
    • 检查：宽度或高度小于 44px
    • 影响：在移动设备上难以点击
    • 修复：增加内边距或将 min-width/min-height 设置为 44px

中等问题（考虑修复）

14. 标题层级问题（WCAG 1.3.1）

    • 查找：标题元素（h1-h6）
    • 检查：跳过的级别（h1 → h3，跳过 h2）
    • 影响：文档结构混乱
    • 修复：使用正确的顺序标题级别

15. 正的 tabIndex（WCAG 2.4.3）

    • 查找：tabIndex > 0 的元素
    • 检查：破坏自然的 Tab 键顺序
    • 影响：键盘导航混乱
    • 修复：仅使用 tabIndex="0" 或 "-1"，让自然 DOM 顺序工作

16. 角色缺少必需属性（WCAG 4.1.2）

    • 查找：具有 ARIA 角色的元素
    • 检查：缺少必需的 ARIA 属性（例如，role="button" 缺少 tabIndex）
    • 影响：无障碍语义不完整
    • 修复：添加角色所需的属性

阶段 4：问题分类与评分

17. 对所有发现进行分类：

    • 关键：必须修复（阻碍访问）
    • 严重：应修复（显著影响可用性）
    • 中等：考虑修复（改善体验）

18. 计算无障碍评分（0-100）：

    • 从 100 开始
    • 关键问题：每个 -10 分
    • 严重问题：每个 -5 分
    • 中等问题：每个 -2 分
    • 最低评分：0

19. 生成严重性摘要：

    • 发现的问题总数
    • 按严重程度细分
    • 最常见的问题类型
    • 受影响最大的页面/部分

阶段 5：报告生成

20. 创建详细报告，格式如下：

    ═══════════════════════════════════════════════════
    无障碍审计：[页面名称]
    ═══════════════════════════════════════════════════
    
    关键（X 个问题）
    ───────────────────
    [A11Y] 元素：按钮 "提交"
      问题：按钮缺少可访问名称
      位置：表单区域，元素 ID：{component: "abc", element: "xyz"}
      当前：<button><CloseIcon /></button>
      修复：添加 aria-label="关闭"
      WCAG：4.1.2 名称、角色、值
    
    [A11Y] 元素：输入字段
      问题：表单输入无标签
      位置：联系表单，元素 ID：{component: "def", element: "uvw"}
      当前：<input type="email" />
      修复：添加 aria-label="电子邮件地址" 或关联到 <label>
      WCAG：1.3.1 信息和关系
    
    严重（X 个问题）
    ──────────────────
    [A11Y] 元素：链接 "了解更多"
      问题：焦点轮廓被移除且无可见替代
      位置：博客部分
      当前：outline: none
      修复：添加可见的焦点样式（例如，border: 2px solid blue）
      WCAG：2.4.7 焦点可见
    
    中等（X 个问题）
    ───────────────────
    [A11Y] 元素：标题
      问题：标题层级跳过（h1 → h3）
      位置：文章部分
      当前：<h3>小节</h3> 后跟 <h1>标题</h1>
      修复：改为 <h2> 或添加中间的 h2
      WCAG：1.3.1 信息和关系
    
    ═══════════════════════════════════════════════════
    摘要
    ───────────────────────────────────────────────────
    问题总数：X
    - 关键：X 个问题
    - 严重：X 个问题
    - 中等：X 个问题
    
    无障碍评分：XX/100
    
    最常见问题：
    1. [问题类型] - X 次出现
    2. [问题类型] - X 次出现
    3. [问题类型] - X 次出现
    ═══════════════════════════════════════════════════
    

21. 提供可操作的见解：

    • 优先级修复列表（关键优先）
    • 快速胜利（影响大、易修复的问题）
    • 设计模式建议
    • 学习资源

阶段 6：修复建议与批准（可选）

22. 提供自动修复问题选项：修复不需要 Designer，因此直接提供自动修复

23. 显示修复预览：

    您想修复哪些问题？
    
    [1] ✓ 为“提交”按钮添加 aria-label
        元素：联系表单中的按钮
        修复：添加 aria-label="提交联系表单"
        安全：是（仅添加属性）
    
    [2] ✓ 为电子邮件输入添加 aria-label
        元素：联系表单中的输入
        修复：添加 aria-label="电子邮件地址"
        安全：是
    
    [3] ⚠️ 修复标题层级
        元素：文章部分中的 h3
        修复：将标题级别从 h3 改为 h2
        安全：可能影响视觉样式
    
    输入要跳过的编号（例如 "3"），"全部" 表示全部修复，"无" 表示取消
    

24. 应用批准的修复：使用 data_element_tool（操作：set_attributes）

    • 分批处理
    • 显示大型修复集的进度
    • 报告每个修复的成功/失败

25. 生成修复后报告：

    • 已修复的问题：X
    • 剩余问题：Y
    • 新的无障碍评分：XX/100（从 YY/100 提升）

阶段 7：导出与资源（可选）

26. 提供导出格式：

    • Markdown（可读文档）
    • JSON（机器可读，用于追踪）
    • CSV（电子表格，用于团队评审）

27. 提供资源：

    • WCAG 2.1 快速参考链接
    • Webflow 无障碍最佳实践
    • 推荐的测试工具（浏览器扩展、屏幕阅读器）

重要注意事项

此技能检查的内容

✅ 按钮无障碍（标签、角色） ✅ 表单输入标签和关联 ✅ 链接语义和键盘访问 ✅ 焦点可见性和键盘导航 ✅ 标题层级和结构 ✅ ARIA 角色和属性 ✅ 触摸目标大小 ✅ 交互元素语义

此技能不检查的内容

❌ 图片替代文本（请改用 asset-audit 技能） ❌ 颜色对比度（需要视觉分析） ❌ 动画/动效偏好 ❌ 屏幕阅读器测试（需要手动验证） ❌ 内容可读性（语言水平、清晰度）

局限性

• 无法检测纯视觉问题（颜色对比度、小文本）
• 无法测试实际的屏幕阅读器行为
• 无法验证内容质量或清晰度
• 仅依赖于元素属性和结构

示例

示例 1：完整页面审计

用户提示：

对我的首页进行无障碍审计

步骤 1：站点与页面选择

🔍 无障碍审计：页面选择

我将帮您对首页进行无障碍问题审计。

首先，让我获取您的站点信息...

可用站点：
1. 公司网站
2. 作品集网站

选择哪个站点？（1/2）

用户响应： 1

步骤 2：页面选择

公司网站中的可用页面：
1. 首页 (/)
2. 关于 (/about)
3. 联系 (/contact)
4. 博客 (/blog)

您想审计哪个页面？（输入 1 选择首页）

用户响应： 1

步骤 3：审计范围

您想要哪种级别的审计？

1. 完整审计（所有 WCAG 检查）- 推荐
2. 仅关键问题（A 级合规）
3. 特定类别（按钮、表单、导航）

您的选择：（1/2/3）

用户响应： 1

步骤 4：审计进度

🔄 正在运行无障碍审计...

进度：
✅ 已提取页面内容（45 个元素）
✅ 正在分析按钮和交互元素
✅ 正在检查表单输入和标签
✅ 正在验证标题层级
✅ 正在检查键盘导航
🔄 正在分析焦点状态...

分析完成！

步骤 5：报告

═══════════════════════════════════════════════════
无障碍审计：首页
═══════════════════════════════════════════════════

关键（3 个问题）
───────────────────
[A11Y] 元素：按钮（导航切换）
  问题：纯图标按钮缺少可访问名称
  位置：页眉导航
  元素 ID：{component: "nav-01", element: "btn-menu"}
  当前：<button><MenuIcon /></button>
  修复：添加 aria-label="打开导航菜单"
  WCAG：4.1.2 名称、角色、值

[A11Y] 元素：输入（电子邮件订阅）
  问题：表单输入无标签
  位置：页脚，新闻通讯注册
  元素 ID：{component: "footer-01", element: "email-input"}
  当前：<input type="email" placeholder="输入电子邮件" />
  修复：添加 aria-label="用于新闻通讯的电子邮件地址"
  WCAG：1.3.1 信息和关系

[A11Y] 元素：Div（可点击卡片）
  问题：非语义化的交互元素
  位置：服务部分，卡片 2
  元素 ID：{component: "services-01", element: "card-02"}
  当前：<div onClick={...}>服务卡片</div>
  修复：转换为 <button> 或添加 role="button" + tabIndex="0"
  WCAG：2.1.1 键盘

严重（5 个问题）
──────────────────
[A11Y] 元素：链接 "了解更多"
  问题：焦点轮廓被移除且无可见替代
  位置：英雄区域
  元素 ID：{component: "hero-01", element: "cta-link"}
  当前：outline: none
  修复：添加焦点样式 - border: 2px solid #0066cc 或 box-shadow
  WCAG：2.4.7 焦点可见

[A11Y] 元素：按钮 "订阅"
  问题：触摸目标太小（30px × 36px）
  位置：页脚新闻通讯表单
  元素 ID：{component: "footer-01", element: "submit-btn"}
  当前：小按钮
  修复：增加内边距或设置 min-height: 44px
  WCAG：2.5.5 目标大小

[继续显示另外 3 个严重问题...]

中等（4 个问题）
───────────────────
[A11Y] 元素：标题 "我们的服务"
  问题：标题层级跳过（h1 → h3）
  位置：服务部分
  元素 ID：{component: "services-01", element: "heading"}
  当前：<h3>我们的服务</h3> 后跟 <h1>