跳转到使用指南
fixing-accessibility作者 Julien Thibeaut

Fixing Accessibility Skill.

一个用于设计审查的 Claude Code 和 Codex skill:审计并修复 ARIA、键盘、焦点、对比度和表单错误。

  • Design Review & Accessibility
  • 审查报告
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
前置数据和章节标题读取自上游文件,日期 2026-09-14 · 完整内容 4,714 字符

01 功能说明

fixing-accessibility Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

一套针对 HTML 无障碍的参考与修复规则集,面向在编程 Agent 中新增或审查交互式 UI 的设计师和开发者。它按优先级和影响力对九类规则排序,从可访问名称、键盘可达性、焦点与对话框、以及处于「critical」级别的工具边界开始,依次到语义、表单与错误、播报、对比与状态,最后是媒体与动效。

每个类别都是一份简短的具体要求清单,例如给纯图标按钮加 aria-label、tabindex 不高于 0、给校验失败的字段加 aria-invalid。一个通用修复区块展示了纯图标按钮、div 充当按钮、以及未关联的表单错误这几种情况的修复前后 HTML 对比;审查模式会为每个违规项报告引用行、一句话说明原因,以及代码层面的修复方案。

审查报告
查看示例提示词 ↗

工作方式

  1. 01
    把约束原地落实

    直接运行该命令会把这些规则变成该对话中所有 UI 工作的持续性约束,而不只是一次性审查。

  2. 02
    指向一个文件以获取违规报告

    带上文件参数时,它会对照全部规则检查该文件,并为每个违规项报告一处引用行或代码片段、一句话说明原因,以及代码层面的修复方案。

  3. 03
    按优先级顺序处理各类别

    这些规则被分为带影响力评级的排序类别;可访问名称位居优先级 1,标记为 critical。

  4. 04
    保持改动最小化

    该 skill 明确要求不要重写大段 UI,修复应保持最小且有针对性。

02 找到适合场景

何时使用 fixing-accessibility Skill

在 Claude Code 或 Codex 中遇到这类设计审查任务时使用 fixing-accessibility skill。下方的适用场景和限制摘自该 skill 自己的文件。

适合场景

  • 在现有界面中新增或更改按钮、链接、输入框、菜单、对话框、标签页或下拉菜单。
  • 构建带校验、错误状态和帮助文本的表单。
  • 实现键盘快捷键或其他自定义交互。
  • 处理焦点状态、焦点陷阱或模态行为时。
  • 渲染纯图标控件,或添加仅悬停触发的交互和隐藏内容时。

了解边界

  • 重构与正在修复的可访问性问题无关的代码。
  • 在原生按钮、链接或输入框即可完成同样任务时,使用基于角色(role)的变通方案。
  • 自动播放带声音的媒体。

03 Skill 内部

fixing-accessibility skill 为 Claude Code 与 Codex 制定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 为每个纯图标控件命名

    纯图标按钮必须通过 aria-label 或 aria-labelledby 提供可访问名称,仅有可见图形符号是不够的。

  2. 永不使用正数 tabindex

    完全排除大于 0 的 tabindex 值;Tab 顺序遵循自然次序。

  3. 在对话框中捕获、设定并还原焦点

    模态框打开时必须捕获焦点,将初始焦点设置在对话框内部,并在关闭时将焦点归还给触发元素。

  4. 将错误信息关联到对应字段

    错误信息必须通过 aria-describedby 与输入框绑定,以便该消息与字段一同被读出。

  5. 将校验失败的字段标记为无效

    无效字段必须设置 aria-invalid,而不仅仅是显示错误样式。

  6. 当原生语义已经足够时,不要添加 ARIA

    当原生语义已经能解决问题时,不要添加 aria;这属于工具边界下的一项关键约束。

  7. 保持焦点可见

    除非提供了可见的替代方案,否则不能移除焦点轮廓。

  8. 不要迁移 UI 库

    除非用户明确要求,否则更换 UI 库不在范围内。

04 投入使用

在 Claude Code 或 Codex 中安装 fixing-accessibility

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 fixing-accessibility 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

针对 skills/fixing-accessibility/SKILL.md 的通用 skills CLI 命令形式;该仓库可能会记录其自身的路径。

为 Skill 提供第一个设计审查任务

SKILL.md 不包含示例提示;此启动器根据目录一行摘要编写。将任务行替换为你的实际 brief。

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

来源:根据目录一行用途编写的启动器提示(不是来自 SKILL.md)。

检查首次结果

在接受输出之前,在记录和文件中查找以下内容:

  • 结果以审查报告形式交付,如目录中为此 skill 列出的那样。
  • Agent 在生成结果之前,在其计划或记录中提及 fixing-accessibility skill。
  • 您自己的内容、名称和数字在输出中保持不变。

在 OpenDesign 中,通过其 SKILL.md 链接导入 fixing-accessibility:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/ibelick/ui-skills Branch main
Skill 文件
skills/fixing-accessibility/SKILL.md 验证时记录的内容校验和;commit 79081ab
License
MIT 来自 LICENSE。
仓库星标数
8,402 GitHub 快照拍摄于 2026-09-14,对应整个 ibelick/ui-skills 仓库,该仓库在此目录中包含 5 个 skills。不是 fixing-accessibility 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。
Skill 自身的描述
"审查并修复 HTML 可访问性问题,包括 ARIA 标签、键盘导航、焦点管理、颜色对比度和表单错误。适用于添加交互控件、表单、对话框或审查 WCAG 合规性。"

来自 SKILL.md 的 front-matter 描述。完整文件约 4,714 个字符。在 GitHub 上阅读完整文件。

Fixing Accessibility

在真实的设计审查任务中运行 fixing-accessibility。

下载 OpenDesign,从 SKILL.md 链接导入 fixing-accessibility,粘贴上面的提示词,在查看结果之前先读方案。

终端
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows