mcpField
A
accessibility

accessibility

github.com/dralgorhythm设计与 UI12991 次安装14 周前更新
代码仓库

关于 accessibility

accessibility 是一项设计技能，介绍 WCAG 2.1 原则、常见界面无障碍检查和测试方法，帮助设计与开发人员检查键盘操作、对比度、表单、图像及屏幕阅读器行为。

主要功能

  1. 01WCAG 2.1 POUR 原则
  2. 02对比度与键盘操作检查
  3. 03表单和图像指导
  4. 04ARIA 基础与屏幕阅读器检查
  5. 05测试清单和工具参考

适用场景

  1. 01审查界面的无障碍问题
  2. 02检查键盘导航和焦点状态
  3. 03验证对比度和表单标签
  4. 04规划屏幕阅读器及图像替代文本检查

安装

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

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill accessibility

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

详细介绍

无障碍

WCAG 2.1 原则（POUR）

可感知

内容必须以用户能够感知的方式呈现。

可操作

所有用户都必须能够操作界面。

易理解

内容和操作必须易于理解。

稳健

内容必须兼容当前和未来的技术。

常见问题与修复方法

图像

<img src="chart.png">


<img src="chart.png" alt="Sales increased 25% in Q4 2024">
表单

<input type="email" placeholder="Email">


<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>
颜色对比度
  • 正文文本：最低 4.5:1
  • 大号文本（18pt+）：最低 3:1
  • UI 组件：最低 3:1
键盘导航
  • 所有交互元素均可聚焦
  • 焦点指示器清晰可见
  • Tab 顺序合理
  • 提供跳转链接以便导航
屏幕阅读器

<span class="sr-only">Open menu</span>


<div aria-live="polite">Item added to cart</div>

ARIA 基础


<nav role="navigation">


<button aria-expanded="false">Menu</button>


<input aria-required="true">


<button aria-label="Close dialog">×</button>

测试清单

  • 键盘导航正常
  • 屏幕阅读器播报正确
  • 颜色对比度符合要求
  • 焦点清晰可见
  • 表单包含标签
  • 图像包含替代文本
  • 标题层级合理
  • 链接描述清晰

工具

  • Axe DevTools（浏览器扩展）
  • WAVE（Web 无障碍评估工具）
  • Lighthouse（Chrome DevTools）
  • 屏幕阅读器：NVDA、VoiceOver、JAWS

评论

支持 Markdown