关于 accessibility-compliance
面向实现和评估无障碍界面的开发者与设计师，提供 WCAG 指引、交互模式、常见问题及测试方法。
主要功能
- 01WCAG 2.2 AA 与 AAA 指引
- 02键盘操作与焦点管理
- 03无障碍表单与屏幕阅读器
- 04减少动态效果与对比度偏好
- 05自动化和手动测试工具
适用场景
- 01审查界面的无障碍性
- 02为控件添加键盘导航
- 03构建无障碍表单
- 04检查移动端屏幕阅读器支持
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/accessibility-compliance确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/aria-patterns.mddetails.mdmobile-accessibility.mdwcag-guidelines.md详细介绍
无障碍合规
掌握无障碍实现，打造对所有人都可用、包括残障用户的包容性体验。
何时使用此技能
- 实现 WCAG 2.2 AA 或 AAA 级合规
- 构建屏幕阅读器可访问的界面
- 为交互组件添加键盘导航
- 实现焦点管理和焦点陷阱
- 创建带有正确标签的无障碍表单
- 支持减少动态效果和高对比度偏好
- 构建移动端无障碍功能（iOS VoiceOver、Android TalkBack）
- 开展无障碍审计并修复违规问题
详细模式与完整示例
详细的模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。
最佳实践
- 使用语义化 HTML：尽可能优先使用原生元素而非 ARIA
- 与真实用户一起测试：在用户测试中纳入残障人士
- 键盘优先：设计无需鼠标即可操作的交互
- 不要禁用焦点样式：为它们设置样式，而不是移除它们
- 提供文本替代方案：所有非文本内容都需要描述
- 支持缩放：内容应能在 200% 缩放下正常使用
- 播报变更：对动态内容使用实时区域
- 尊重偏好：遵循 prefers-reduced-motion 和 prefers-contrast
常见问题
- 缺少替代文本：图片没有描述
- 颜色对比度差：文本在背景上难以阅读
- 键盘陷阱：焦点卡在组件中
- 缺少标签：表单输入没有关联的标签
- 自动播放媒体：内容在用户未主动触发的情况下播放
- 无法访问的自定义控件：糟糕地重新实现原生功能
- 缺少跳转链接：无法绕过重复内容
- 焦点顺序问题：Tab 顺序与视觉顺序不一致
测试工具
- 自动化：axe DevTools、WAVE、Lighthouse
- 手动：VoiceOver（macOS/iOS）、NVDA/JAWS（Windows）、TalkBack（Android）
- 模拟器：NoCoffee（视觉）、Silktide（各类残障）
评论
支持 Markdown