用途
无障碍模式（Accessibility Patterns）用于指导开发者从一开始就构建面向所有人的网页，遵循 WCAG 指南，提供语义化 HTML、ARIA、键盘导航、颜色对比度与测试策略等实践。
核心原则（POUR）
- 可感知（Perceivable）：用户能感知内容，如替代文本、字幕、对比度。
- 可操作（Operable）：用户能交互，如键盘访问、充足时间。
- 可理解（Understandable）：用户能理解，如清晰语言、可预测行为。
- 健壮（Robust）：与辅助技术协作，如有效 HTML、ARIA。
WCAG 等级
- A：最低要求，必须具备。
- AA：标准，行业标准与法律要求。
- AAA：增强，可选。 多数项目目标定为 AA。
主要能力
语义化 HTML
如用 <button> 代替 <div onclick>，用 <a href> 代替 <span class="link">，使用 <header>、<nav>、<main> 等结构元素。文档结构需包含 lang、title、跳过链接、每页仅一个 h1，标题层级不跳级（h1→h2→h3）。
图片与媒体
告知性图片描述内容与功能，装饰性图片 alt=""，功能性图片描述动作，复杂图片用 brief alt 加长描述，图片内文字需包含全部文本。视频提供字幕与音频描述轨道，音频提供文字稿。
表单
使用显式或隐式 label，必填字段用 required 与 aria-required，错误处理使用 role="alert"、aria-live、aria-invalid、aria-describedby，表单分组用 fieldset 与 legend。
键盘导航
不要无替代地移除焦点轮廓，使用 :focus 与 :focus-visible 提供可见焦点。tab 顺序遵循 DOM 顺序，仅在必要时用 tabindex，绝不使用 tabindex>0。提供跳过链接。组件键盘模式：按钮 Enter/Space，链接 Enter，菜单方向键/Enter/Escape，标签页方向键/Tab，模态框 Tab 困于内部、Escape 关闭。
ARIA
先用语义化 HTML，必要时再加 ARIA，"没有 ARIA 好过糟糕的 ARIA"。常见模式包括 live regions、aria-expanded、aria-current、aria-busy、aria-hidden、aria-label 等；ARIA 角色涵盖地标（banner、navigation、main、complementary、contentinfo）与部件（button、dialog、tablist、alert）。
颜色与对比度
AA 级：普通文本（<18px）需 4.5:1，大文本（≥18px 粗体或 ≥24px）需 3:1，UI 组件需 3:1；AAA 级普通文本 7:1，大文本 4.5:1。不要仅依靠颜色传达信息。
测试
- 自动测试：使用 jest-axe 扩展 toHaveNoViolations。
- 手动测试清单：仅用键盘导航、屏幕阅读器测试、检查对比度、200% 缩放、禁用 CSS、检查所有图片 alt 文本、验证表单标签与错误、测试焦点可见性、检查标题结构。
- 屏幕阅读器组合：macOS VoiceOver+Safari，Windows NVDA+Firefox，Windows JAWS+Chrome，移动端 TalkBack+Chrome，iOS VoiceOver+Safari。
- 常用工具：WebAIM Contrast Checker、Chrome DevTools 颜色选择器、Stark（Figma 插件）、axe DevTools。
常见模式
模态对话框：role="dialog"、aria-modal="true"、aria-labelledby、aria-describedby，打开时移入焦点、焦点困于模态内、关闭时返回触发元素。标签页：role="tablist"、role="tab"、aria-selected、aria-controls、role="tabpanel"、aria-labelledby。
参考资料
- references/wcag-checklist.md：完整 WCAG 2.1 检查清单。
- references/aria-patterns.md：常见 ARIA 模式。
- references/testing-tools.md：测试工具设置。
限制
资料未提供具体的收费、价格、平台与效果信息，暂未提供。