这个 GitHub 爆火的 WCAG 无障碍 Skill 到底能干嘛？实测来了

1. POUR 四大原则贯穿始终#

这个 Skill 不是简单地列几条规则，而是基于 WCAG 的底层哲学——POUR 原则来组织的：

• Perceivable（可感知）：信息必须能被用户感知到
• Operable（可操作）：用户界面必须可操作
• Understandable（可理解）：信息和操作必须可理解
• Robust（鲁棒）：内容必须足够鲁棒，能被各种辅助技术解释

2. 跨平台三端映射#

最实用的部分莫过于跨平台映射表——同一个无障碍需求，在 Web、iOS、Android 上分别怎么实现，一目了然：

3. 反模式清单（千万别踩坑）#

这个 Skill 特别贴心的地方是列出了常见的无障碍反模式：

• Div 当按钮用：用 <div> 处理点击事件却不加角色和键盘支持——这是最常见的无障碍漏洞
• 仅用颜色传达信息：把边框变红表示错误，色盲用户根本看不到
• 模态框不锁焦点：键盘用户会在弹窗打开时”穿越”到背景内容中
• 冗余 Alt 文本：写”……的图片”——屏幕阅读器自己会说”图片”

4. 最佳实践清单（Checklist）#

提供了一份可直接使用的检查清单，从交互元素尺寸（24×24px Web / 44×44pt 原生）到焦点管理、表单错误提示，逐项核对即可。

作为 AI Agent Skill 使用#

如果你使用的是 OpenClaw、Claude Code 等支持 Skill 的 AI Agent 框架：

1. 将 SKILL.md 放入你的 skills 目录
2. 在需要生成无障碍代码时，Agent 会自动加载此 Skill
3. Agent 会根据 Skill 中的规则生成符合 WCAG 2.2 标准的代码

作为开发参考直接使用#

即使不接入 AI Agent，这份文档本身也是一份极佳的开发参考：

1. 设计阶段：参考”核心概念”和”跨平台映射”定义组件规范
2. 开发阶段：按照”工作流程”五步法实现无障碍
3. 审计阶段：对照”最佳实践清单”逐项检查
4. 代码 Review：对照”反模式清单”排查常见问题

实战示例#

Web 无障碍搜索框：

1
<form role="search">
2
  <label for="search-input" class="sr-only">搜索商品</label>
3
  <input type="search" id="search-input" placeholder="搜索..." />
4
  <button type="submit" aria-label="提交搜索">
5
    <svg aria-hidden="true">...</svg>
6
  </button>
7
</form>

关键点：

• <form role="search"> 明确表单功能
• sr-only 类让标签只对屏幕阅读器可见
• aria-label 让 SVG 图标按钮有了可读描述

iOS 无障碍按钮：

1
Button(action: deleteItem) {
2
    Image(systemName: "trash")
3
}
4
.accessibilityLabel("删除项目")
5
.accessibilityHint("从列表中永久移除此项目")
6
.accessibilityAddTraits(.isButton)

Android 无障碍开关：

1
Switch(
2
    checked = isEnabled,
3
    onCheckedChange = { onToggle() },
4
    modifier = Modifier.semantics {
5
        contentDescription = "启用通知"
6
    }
7
)