# 辅助功能用于构建可访问 Web 应用程序的综合模式：WCAG 2.2 AA 合规性、键盘焦点管理、React Aria 组件模式、原生 HTML 优先理念、认知包容和用户偏好尊重。每个类别在“rules/”中都有按需加载的单独规则文件。 ## 快速参考类别 |规则|影响 |何时使用 ---|---|---|--- WCAG 合规性 | 3 |关键 |颜色对比、语义 HTML、自动化测试 POUR 退出标准 | 1 |关键 |每个 WCAG 2.2 AA 标准的可伪造的通过/失败阈值静态反模式| 1 |高|无需浏览器即可检测到 Grep-able 模式焦点管理| 3 |高|焦点陷阱、焦点恢复、键盘导航反应咏叹调 | 3 |高|可访问的组件、表单挂钩、覆盖图案现代网络可访问性| 3 |严重/高 |原生 HTML 优先、认知包容、用户偏好 **总计：6 个类别 14 条规则** ## 快速入门 // 带有 ARIA 的语义 HTML <主要> <文章>

页面标题

功能

// React Aria 的焦点陷阱从'react-aria'导入{FocusScope}； ## WCAG 合规性 WCAG 2.2 AA 实施，用于包容性、合法合规的 Web 应用程序。规则|文件|按键模式 ---|---|--- 色彩对比| `${CLAUDE_SKILL_DIR}/rules/wcag-color-contrast.md` | 4.5:1 文本、3:1 UI 组件、焦点指示器语义 HTML | `${CLAUDE_SKILL_DIR}/rules/wcag-semantic-html.md` |地标、标题、ARIA 标签、表单结构测试| `${CLAUDE_SKILL_DIR}/rules/wcag-testing.md` | axe-core、Playwright a11y、屏幕阅读器测试 ## POUR 退出标准每个 WCAG 2.2 AA 标准的具体通过/失败阈值 — 取代模糊的“满足要求”检查。规则|文件|按键模式 ---|---|--- POUR 退出标准 | `${CLAUDE_SKILL_DIR}/rules/pour-exit-criteria.md` |可伪造的清单：图像 alt、对比度、焦点指示器、触摸目标、ARIA 状态 ## 静态反模式可通过静态分析或代码审查检测到的可 Grep 反模式 - 无需浏览器。规则|文件|按键模式 ---|---|--- A11y 反模式（静态）| `${CLAUDE_SKILL_DIR}/rules/a11y-antipatterns-static.md` |焦点移除、缺少标签、自动播放、仅图标按钮、div 单击处理程序 ## 焦点管理用于可访问的交互式小部件的键盘焦点管理模式。规则|文件|按键模式 ---|---|--- 焦点陷阱| `${CLAUDE_SKILL_DIR}/rules/focus-trap.md` |模态焦点陷印、FocusScope、Escape 键焦点恢复| `${CLAUDE_SKILL_DIR}/rules/focus-restoration.md` |将焦点返回到触发器，先聚焦错误键盘导航 | `${CLAUDE_SKILL_DIR}/rules/focus-keyboard-nav.md` |移动选项卡索引、跳过链接、方向键 ## 反应咏叹调 Adobe React Aria 挂钩用于构建符合 WCAG 的交互式 UI。规则|文件|按键模式 ---|---|--- 组件| `${CLAUDE_SKILL_DIR}/rules/aria-components.md` | useButton、useDialog、useMenu、FocusScope 表格 | `${CLAUDE_SKILL_DIR}/rules/aria-forms.md` | useComboBox、useTextField、useListBox 覆盖| `${CLAUDE_SKILL_DIR}/rules/aria-overlays.md` | useModalOverlay、useTooltip、usePopover ## 现代网络可访问性 2026 年最佳实践：原生 HTML 优先、认知包容、尊重用户偏好。规则|文件|按键模式 ---|---|--- 原生 HTML 优先 | `${CLAUDE_SKILL_DIR}/rules/wcag-native-html-first.md` | `

可达性

包含技能