Accessibility Expert 是一个用于构建无障碍界面的技能，目标是创建对所有人都可用的包容性数字体验。其内容围绕 WCAG 合规与最佳实践展开，适合在开发、评审和测试界面时作为参考。
用途
该技能用于指导开发者构建符合无障碍标准的界面，覆盖从最低要求到增强要求的多个层级，并强调语义化 HTML 优先、必要时才使用 ARIA 的原则。
主要能力
WCAG 2.1 快速参考
- Level A（最低要求）：所有图片有替代文本、视频有字幕、内容可通过键盘访问、无引发癫痫的内容、页面有标题。
- Level AA（多数项目目标）：文本对比度 4.5:1、UI 组件对比度 3:1、文本可放大至 200%、所有元素焦点可见、提供错误建议。
- Level AAA（增强）：对比度 7:1、视频提供手语、扩展音频描述、无基于时间的交互。
语义化 HTML 优先
建议使用语义元素替代通用容器，例如用 <nav> 代替 <div class="nav">、用 <button> 代替 <div onclick>、用 <main> 代替 <div id="main">、用 <article> 代替 <div class="article">，并保持正确的标题层级（h1 页面标题、h2 章节、h3 子章节）。
必要时使用 ARIA
仅在 HTML 语义不足时使用 ARIA，示例包括：
- 标签页：
<div role="tablist">内使用<button role="tab" aria-selected="true">。 - 实时区域：
<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>。 - 清晰错误消息：
<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：检查对比度
使用方式
该技能以参考文档和代码示例的形式提供，可在开发界面时对照检查，或用于评审与测试环节。具体安装或集成方式暂未提供。
适用场景
适用于需要构建或评估无障碍界面的前端开发、设计评审、质量测试等场景，尤其适合以 WCAG 2.1 AA 为目标的 Web 项目。
限制
资料未说明该技能的具体运行环境、依赖、自动化程度或与特定框架的集成方式；部分内容（如安装命令、收费信息、平台支持）暂未提供。