关于 accessibility
accessibility 是面向 UI 创建、审查和审计的无障碍实践技能,供设计与开发人员改善页面和组件的可访问性。它结合 WCAG 原则、自动化工具与人工键盘及屏幕阅读器测试。
主要功能
- 01检查语义 HTML 与文本替代
- 02关注对比度、键盘操作和焦点管理
- 03应用 WCAG 可感知与可操作原则
- 04结合自动化及人工测试
- 05记录问题与修复示例
适用场景
- 01审查交互组件与表单
- 02为界面添加键盘导航与 ARIA
- 03使用屏幕阅读器测试页面
- 04审计现有页面的无障碍问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ shipshitdev/ skills --skill accessibility安装后在 Claude Code 中输入/accessibility确认已加载。
附带文件plugin.jsonreferences/full-guide.md
详细介绍
无障碍(a11y)技能
适用场景
在以下情况下使用:
- 创建或审查 UI 组件
- 实现交互元素(按钮、表单、模态框)
- 添加键盘导航
- 审查色彩对比度和视觉设计
- 使用屏幕阅读器进行测试
- 审查现有页面中的无障碍问题
- 实现 ARIA 属性
快速工作流
- 找出项目特定的无障碍要求和现有模式。
- 应用核心规则:语义化 HTML、文本替代内容、对比度、键盘访问和焦点管理。
- 结合自动化工具、手动键盘测试和屏幕阅读器测试进行验证。
- 通过示例记录问题和修复方案。
WCAG 原则
- 可感知:文本替代内容、对比度、响应式支持。
- 可操作:键盘访问、焦点管理、时间限制。
- 可理解:语言清晰、行为可预测。
- 稳健:有效的 HTML 和 ARIA 用法。
参考资料
相关内容
audit— 当未指定单一维度时,对无障碍、性能、主题、响应式设计和反模式进行 0-4 分评分审查。design-consistency-auditor— 检查设计令牌偏差、硬编码颜色和设计系统差异。
评论
支持 Markdown