Communitygithub.com

alty-oss/dev-design

在审查UI键盘访问、焦点、可访问名称、结构、对比度和动效行为时使用。

dev-design 是什么?

该技能旨在系统性地审查UI组件的可访问性,确保其符合WCAG标准。它详细指导如何评估语义结构(如landmarks和标题)、有意义的名字、标签/输入和错误关联、焦点可见性、焦点顺序/恢复、键盘激活和退出行为、对比度、缩放/重排以及减少动效行为。技能强调使用真实的浏览器操作(如原生键盘输入)来验证焦点和激活变化,而非依赖脚本化事件或截图。对于对比度计算,要求从实际计算的前景色/背景色中推导,包括透明度、继承和合成效果,并在复杂背景时使用像素分析。该技能支持任何基于浏览器的UI审查工作流,通常与Claude Code、Cursor或Codex等AI代理工具结合使用,帮助开发者高效发现并分类可访问性问题为阻塞、主要或次要级别,并提供修复建议。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/accessibility-review

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

可访问性审查

Português (Brasil) 使用 浏览器验证契约 审查已实现的主流程和相关的恢复状态。 检查语义化的 landmarks/标题、有意义的名称、标签/输入和错误关联、焦点可见性、焦点顺序/恢复、键盘激活和退出行为、对比度、缩放/重排以及减少动效行为。 将支持的原生键盘输入与可观察到的焦点/激活变化进行校准。仅提供命名的 press_key API 而无行为变更是不够的。当有文档记录的原生替代方案时,尝试使用;如果失败,则标记为不支持;dispatchEvent 和脚本化焦点不可作为受信任的键盘证据。对键盘相关断言应使用实际的浏览器操作。检查覆盖层和验证。仅凭截图无法证明焦点顺序或辅助技术行为。 对于纯色背景,从实际计算的前景色/背景色中计算对比度,包括透明度、继承和合成效果;在复杂背景需要时使用像素分析。记录方法、颜色、比率和范围。 在可用时运行现有的可访问性自动化测试;记录其范围和结果。不要仅仅为了声明覆盖率而添加工具依赖。 将问题分类为阻止/主要/次要,并附上证据和修复建议;修复后重新测试受影响的行为。 将未支持的检查记录为待定。自动化扫描和有限的手动检查并不能确立完整的 WCAG 合规性。在未达到所需审计范围时,不得声明全局合规性。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能