关于 superior-accessibility
用于指导界面无障碍改进的技能，同时保留原有产品行为。内容涵盖语义、键盘与焦点、视觉可读性、动态状态及验证方法。
主要功能
- 01原生语义与无障碍名称
- 02键盘操作与焦点管理
- 03对比度及非颜色提示
- 04动态状态的无障碍处理
- 05缩放、动效与触控指导
- 06手动及自动化验证
适用场景
- 01检查变更后的界面流程
- 02实现无障碍表单控件
- 03检查键盘操作和焦点
- 04验证响应式及缩放布局
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/superior-accessibility确认已加载。
附带文件references/interaction-and-assistive-technology.mdscripts/contrast_check.py
详细介绍
卓越的无障碍体验
保留用户感知、理解、浏览和操作已更改界面的能力。优先采用原生语义和可观察到的行为，而非大量依赖 ARIA 的补丁。
在选择修复方案前，先明确受影响的使用流程、交互模型、支持的平台和可用的验证工具。除非必须更改无障碍交互约定，否则应保留产品行为。
结构和名称
- 使用行为与控件相匹配的原生元素。
- 为控件提供与可见标签一致或包含可见标签的无障碍名称。
- 保持标题顺序、地标、列表、表格和表单关联的语义清晰。
- 为信息性图片提供替代文本；不要让装饰性图片进入无障碍树。
- 只有在原生 HTML 无法表达必要的关系或状态时才添加 ARIA，并确保其保持同步。
键盘和焦点
- 确保所有必要操作都无需指针即可访问和执行。
- 保持符合阅读和交互顺序的逻辑焦点顺序。
- 确保焦点指示器在其经过的每个背景上都清晰可见。
- 仅在真正发生上下文变化时移动焦点，例如打开模态框；关闭该上下文后恢复焦点。
- 确保覆盖层在适当情况下将焦点限制在其中、能够按预期关闭，并且不会让背景内容保持可交互状态。
对比度和非颜色提示
当 Python 可用时，使用 scripts/contrast_check.py 检查已知的纯色 sRGB 颜色：
python scripts/contrast_check.py "#1f2937" "#ffffff"
根据此 SKILL.md 的位置解析脚本路径。对于渐变、图片、不透明度、滤镜或合成效果，请检查实际渲染结果；两个源十六进制值可能无法代表最终对比度。
- 根据 WCAG 2.x，普通文本的目标对比度至少为 4.5:1，大号文本至少为 3:1。
- 检查有意义的组件边界和焦点指示器与相邻颜色之间的对比度。
- 为状态提示搭配文字、图标、形状或其他线索，不能只依赖颜色。
- 不要因为文本是次要内容，就认为低对比度文本可以不受检查。
动态状态
- 在字段附近显示验证错误；如果表单需要，也应汇总错误。
- 播报重要的异步结果，但不要反复打断用户。
- 确保加载、展开、选中、按下、已勾选、当前、无效和禁用等状态在程序层面准确无误。
- 如果禁用某项操作的前提并非显而易见，应说明该前提。
如果任务涉及对话框、复合控件、自定义控件、拖放、实时更新、路由更改、虚拟化内容或屏幕阅读器专属行为，请阅读 references/interaction-and-assistive-technology.md。
缩放、动态效果和触控
- 在支持的缩放级别下重新布局，确保不丢失信息或操作。
- 确保聚焦的输入框始终显示在虚拟键盘和固定界面元素上方。
- 提供尺寸和间距适宜的触控目标。
- 遵循减少动态效果偏好设置，避免使用理解结果所必需的动态效果。
验证行为
使用纯键盘完成已更改流程的导航。借助可用的平台工具检查无障碍名称和状态，测试相关缩放级别和窄屏布局，并检查实际渲染颜色的对比度。自动化检查有助于扩大覆盖范围，但不能证明可用性；请同时报告自动化和手动验证结果。
除非明确指出实际测试过的浏览器、辅助技术、平台和使用流程，否则不要声称兼容屏幕阅读器。如果无法使用该环境，请尽可能验证语义和无障碍树输出，并明确报告未测试的组合。
当无障碍只是较大变更集中的一个风险领域时，使用 superior-code-review；需要因空间变化而重新编排布局时，使用 superior-responsive；实现无障碍交互约定之外的视觉或交互设计时，使用 superior-ui。