用途:为构建无障碍 Web 应用提供规则化模式,目标为 WCAG 2.2 AA 合规(对应 ADA、Section 508 等法律标准),并通过可判定阈值替代含糊的“符合要求”检查。
主要能力(共 6 类 10 条规则):
- WCAG 合规(3 条,CRITICAL):颜色对比(正文 4.5:1、大字与 UI 组件 3:1、焦点指示器)、语义化 HTML(地标、标题层级、ARIA 标签、表单结构)、测试(axe-core、Playwright a11y、屏幕阅读器)。
- POUR 退出标准(1 条,CRITICAL):针对 WCAG 2.2 AA 各准则的可证伪通过/失败清单,含图片替代文本、对比度、焦点指示器、触控目标、ARIA 状态。
- 静态反模式(1 条,HIGH):无需浏览器即可通过静态分析或代码审查发现的模式。
- 焦点管理(1 条,HIGH):漫游 tabindex、跳转链接、方向键导航。
- React Aria(2 条,HIGH):useButton、useDialog、useMenu、FocusScope;useComboBox、useTextField、useListBox。
- 现代 Web 无障碍(2 条,CRITICAL/HIGH):原生 HTML 优先(<dialog>、<details>)、用户偏好(prefers-reduced-motion、forced-colors、prefers-contrast、缩放)。
关键决策:对比度 4.5:1/3:1;目标尺寸最小 24px(WCAG 2.5.8),触控 44px;焦点指示器 3px 实线轮廓、3:1 对比;组件用 React Aria hooks,状态用 react-stately;焦点用 FocusScope,测试用 jest-axe 与 Playwright axe-core。
必要用法示例:焦点陷阱使用 <FocusScope contain restoreFocus autoFocus>;无 React Aria 时可复制 scripts/focus-trap-template.tsx。
禁止项:div 汤、仅用颜色传达信息、缺失表单标签、键盘陷阱、无替代地移除焦点轮廓、正 tabindex、<div onClick>、模态中手动 ref.focus()、自动播放媒体、滥用 ARIA。
适用场景:需要无障碍合规的 Web 应用、组件库与 E2E 测试流程。
限制:WCAG 准则走查、ARIA 部件模式、React Aria API、焦点算法、认知无障碍(COGA)与屏幕阅读器测试等上游内容不在此重复;针对 ADHD/自闭症/阅读障碍的认知负荷上限(通知数、导航项数、阅读水平目标)及覆盖层配方位于 references/ork-delta.md。安装与收费信息未在资料中提供。