mcpField
A
accessibility

accessibility

github.com/shipshitdev设计与 UI38184 次安装1 天前更新
代码仓库

关于 accessibility

accessibility 是面向 UI 创建、审查和审计的无障碍实践技能,供设计与开发人员改善页面和组件的可访问性。它结合 WCAG 原则、自动化工具与人工键盘及屏幕阅读器测试。

主要功能

  1. 01检查语义 HTML 与文本替代
  2. 02关注对比度、键盘操作和焦点管理
  3. 03应用 WCAG 可感知与可操作原则
  4. 04结合自动化及人工测试
  5. 05记录问题与修复示例

适用场景

  1. 01审查交互组件与表单
  2. 02为界面添加键盘导航与 ARIA
  3. 03使用屏幕阅读器测试页面
  4. 04审计现有页面的无障碍问题

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill accessibility

安装后在 Claude Code 中输入/accessibility确认已加载。

附带文件plugin.jsonreferences/full-guide.md

详细介绍

无障碍(a11y)技能

适用场景

在以下情况下使用:

  • 创建或审查 UI 组件
  • 实现交互元素(按钮、表单、模态框)
  • 添加键盘导航
  • 审查色彩对比度和视觉设计
  • 使用屏幕阅读器进行测试
  • 审查现有页面中的无障碍问题
  • 实现 ARIA 属性

快速工作流

  1. 找出项目特定的无障碍要求和现有模式。
  2. 应用核心规则:语义化 HTML、文本替代内容、对比度、键盘访问和焦点管理。
  3. 结合自动化工具、手动键盘测试和屏幕阅读器测试进行验证。
  4. 通过示例记录问题和修复方案。

WCAG 原则

  • 可感知:文本替代内容、对比度、响应式支持。
  • 可操作:键盘访问、焦点管理、时间限制。
  • 可理解:语言清晰、行为可预测。
  • 稳健:有效的 HTML 和 ARIA 用法。

参考资料

相关内容

  • audit — 当未指定单一维度时,对无障碍、性能、主题、响应式设计和反模式进行 0-4 分评分审查。
  • design-consistency-auditor — 检查设计令牌偏差、硬编码颜色和设计系统差异。

评论

支持 Markdown