fixing-accessibility by ibelick/ui-skills
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility修复无障碍性问题。
/fixing-accessibility 在本对话中,将以下约束应用于任何 UI 工作。/fixing-accessibility <文件> 根据以下所有规则审查文件并报告:
不要重写 UI 的大部分内容。优先采用最小化、有针对性的修复。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 |
|---|---|---|
| 1 | 无障碍名称 | 关键 |
| 2 | 键盘访问 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 关键 |
| 3 | 焦点和对话框 | 关键 |
| 4 | 语义 | 高 |
| 5 | 表单和错误 | 高 |
| 6 | 通知 | 中高 |
| 7 | 对比度和状态 | 中 |
| 8 | 媒体和动效 | 低中 |
| 9 | 工具边界 | 关键 |
aria-label 或 aria-labelledbyaria-hiddendiv 或 span 用作按钮,除非提供完整的键盘支持tabindexbutton、a、input),而非基于角色的变通方案ul 或 ol 配合 lith 作为表头aria-describedby 与字段关联aria-invalidaria-livearia-busy 或状态文本aria-expanded 和 aria-controlsalt 文本(有意义的或空的)prefers-reduced-motion 设置<!-- 仅图标按钮:添加 aria-label -->
<!-- 修复前 --> <button><svg>...</svg></button>
<!-- 修复后 --> <button aria-label="关闭"><svg aria-hidden="true">...</svg></button>
<!-- 将 div 用作按钮:使用原生元素 -->
<!-- 修复前 --> <div onclick="save()">保存</div>
<!-- 修复后 --> <button onclick="save()">保存</button>
<!-- 表单错误:使用 aria-describedby 关联 -->
<!-- 修复前 --> <input id="email" /> <span>邮箱无效</span>
<!-- 修复后 --> <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">邮箱无效</span>
周安装量
5.1K
代码仓库
GitHub 星标数
1.1K
首次出现
2026年1月22日
安全审计
安装于
opencode3.5K
codex3.5K
gemini-cli3.5K
claude-code3.3K
github-copilot3.2K
cursor3.2K
Fix accessibility issues.
/fixing-accessibility Apply these constraints to any UI work in this conversation.
/fixing-accessibility <file> Review the file against all rules below and report:
Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.
Reference these guidelines when:
| priority | category | impact |
|---|---|---|
| 1 | accessible names | critical |
| 2 | keyboard access | critical |
| 3 | focus and dialogs | critical |
| 4 | semantics | high |
| 5 | forms and errors | high |
| 6 | announcements | medium-high |
| 7 | contrast and states | medium |
| 8 | media and motion | low-medium |
| 9 | tool boundaries | critical |
<!-- icon-only button: add aria-label -->
<!-- before --> <button><svg>...</svg></button>
<!-- after --> <button aria-label="Close"><svg aria-hidden="true">...</svg></button>
<!-- div as button: use native element -->
<!-- before --> <div onclick="save()">Save</div>
<!-- after --> <button onclick="save()">Save</button>
<!-- form error: link with aria-describedby -->
<!-- before --> <input id="email" /> <span>Invalid email</span>
<!-- after --> <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>
Weekly Installs
5.1K
Repository
GitHub Stars
1.1K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode3.5K
codex3.5K
gemini-cli3.5K
claude-code3.3K
github-copilot3.2K
cursor3.2K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI代码审查工具 - 自动化安全漏洞检测与代码质量分析 | 支持多领域检查清单
1,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装