mcpField
A
accessibility-expert

accessibility-expert

github.com/slb2248设计与 UI552 次安装28 周前更新
代码仓库

关于 accessibility-expert

accessibility-expert 是一项数字无障碍设计参考技能，面向构建包容性网页体验的设计与开发工作。它汇总 WCAG 2.1 要点，并涵盖语义 HTML、键盘操作、屏幕阅读器、表单和对比度检查。

主要功能

  1. 01WCAG 2.1 A、AA、AAA 要点
  2. 02语义 HTML 与 ARIA 使用建议
  3. 03键盘导航与焦点管理
  4. 04屏幕阅读器内容结构检查
  5. 05颜色对比度与表单建议
  6. 06无障碍测试工具清单

适用场景

  1. 01检查页面是否支持键盘操作
  2. 02评估文本及界面组件对比度
  3. 03检查表单标签和错误提示
  4. 04规划屏幕阅读器与动态内容测试

安装

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

$npx skills add https://github.com/slb2248/ai-ux-skills --skill accessibility-expert

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

详细介绍

无障碍专家

打造包容性的数字体验，让每个人都能使用。

WCAG 2.1 快速参考

A 级（最低要求）
  • 所有图片都有替代文本
  • 视频提供字幕
  • 内容支持键盘访问
  • 不包含会诱发癫痫发作的内容
  • 页面都有标题
AA 级（大多数场景的目标）
  • 文本对比度为 4.5:1
  • UI 组件对比度为 3:1
  • 文本可放大至 200%
  • 所有元素的焦点都清晰可见
  • 提供错误修正建议
AAA 级（增强要求）
  • 对比度为 7:1
  • 视频提供手语
  • 提供扩展音频描述
  • 不包含基于时间限制的交互

优先使用语义化 HTML


<nav> instead of <div class="nav">
<button> instead of <div onclick>
<main> instead of <div id="main">
<article> instead of <div class="article">


<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>

必要时使用 ARIA


<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>


<div aria-live="polite">Status: Saved</div>
<div aria-live="assertive">Error: Form invalid</div>


<input aria-describedby="hint">
<span id="hint">Password must be 8 characters</span>

键盘导航

焦点管理
  • 所有交互元素都有清晰可见的焦点指示器
  • Tab 顺序符合逻辑（与视觉顺序一致）
  • 为主要内容提供跳转链接
  • 在模态框中锁定焦点
按键模式
按键操作
Tab移动到下一个元素
Shift+Tab移动到上一个元素
Enter/Space激活按钮
箭头键在组件内导航
Escape关闭模态框/菜单

屏幕阅读器支持

内容结构
  • 使用地标：main、nav、aside、footer
  • 使用描述性链接文本（不要使用“点击此处”）
  • 播报动态变化
  • 提供文本替代内容
测试清单
  • 能否仅使用键盘导航
  • 屏幕阅读器是否会播报所有内容
  • 焦点顺序是否合理
  • 是否会播报动态内容
  • 表单是否有恰当的标签
  • 是否清晰传达错误信息

颜色与对比度

不要仅依赖颜色
  • 添加图标或图案
  • 使用文本标签
  • 提供多种指示方式
对比度要求
  • 普通文本：至少 4.5:1
  • 大号文本（18px+）：至少 3:1
  • UI 组件：至少 3:1
  • 焦点指示器：至少 3:1

表单


<label for="email">Email</label>
<input id="email" type="email" required>


<fieldset>
  <legend>Shipping Address</legend>
  
</fieldset>


<input aria-invalid="true" aria-describedby="error">
<span id="error" role="alert">Please enter valid email</span>

测试工具

  • axe DevTools：浏览器扩展
  • WAVE：Web 无障碍评估工具
  • Lighthouse：内置于 Chrome
  • NVDA/VoiceOver：屏幕阅读器
  • Colour Contrast Analyser：检查对比度

评论

支持 Markdown