用途
Accessibility as code 用于在 React Native 项目中把无障碍要求固化为可检查的代码契约。它覆盖 VoiceOver 与 TalkBack 的命名与焦点、触摸目标尺寸、文本缩放、颜色对比、减少动效、手势替代、自定义画布与覆盖层模态等维度,目标是让每个控件在应用发布的每种语言环境中都可被屏幕阅读器到达并正确命名。
主要能力
- 角色、名称与状态:每个可交互元素需有角色、经 t() 翻译的名称(accessibilityLabel 或 aria-label;aria-labelledby 仅在 Android 与 Web 上命名),必要时提供提示(描述结果而非手势),并声明状态(accessibilityState 或 aria-*)。
- 触摸目标:每个触摸目标自身盒子至少 44×44pt(a11y.minTouchPt,Material 为 48),不使用 hitSlop;自定义命中区域需在单元测试中证明最小单元格。
- 文本缩放:文本至少可放大到 200%,禁止 allowFontScaling={false},maxFontSizeMultiplier 不得低于上限(a11y.maxFontScale,默认 2),使用 minHeight 而非 height,句子不使用 numberOfLines,fontScale >= 1.25 时行应堆叠。
- 对比契约:UI 绘制的每一对颜色在 contracts/contrast.json 中声明,满足 WCAG 2.2 AA(文本 4.5:1,图标、边缘、焦点与图表线 3:1,填充形状相对边缘或底色 3:1),半透明颜色先合成。
- 不单靠颜色传达含义:每个状态带图标、形状或文字;仅靠颜色区分的类别(图表系列、标签)在红绿色盲、蓝黄色盲下 OKLab 距离保持 0.07 以上。
- 减少动效:仅通过 useReduceMotion() 与 <MotionConfig> 实现,不使用 Reanimated 的 useReducedMotion() 或系统 A11y 存储之外的 AccessibilityInfo;每个移动时刻都有减少动效的替代方案。
- 画布与播报:每个承载信息的画布作为一张带 t() 标签的图片(标签来自纯函数 describe(state))或标记为装饰;事件通过 useAnnounce() 播报,每次操作一句短句,仅在屏幕阅读器运行时排队播报。
- 覆盖层:对话框、表单、菜单、弹出层、抽屉在两个平台上保持模态,阅读顺序为视觉顺序;树内覆盖层在根节点(遮罩而非卡片)设置 accessibilityViewIsModal,并在 Android 上隐藏背后内容;覆盖层宿主包裹导航器。
- 手势替代:每个仅手势操作(长按、滑动、拖拽、捏合)都提供一次点击或具名无障碍操作(accessibilityActions 与 onAccessibilityAction),拖拽还需单指针方式;必要手势需作为 a11yGestureExceptions 条目审核。
- 测试:按角色与名称查询,每个屏幕测试以 findInaccessiblePressables 审计结尾;运行 check-a11y-code.mjs 与 check-contrast.mjs 直至输出 RESULT: PASS。
使用方式
首次使用时,将 templates/src/ui/a11y/ 复制到 src/ui/a11y/,将 templates/test/a11y/ 复制到 test/a11y/;在根布局启动 store(useEffect(() => watchSystemA11y(reportError), [])),并用 <MotionConfig preference={reduceMotionPreference}> 包裹应用。复制 templates/contracts/contrast.json 及其 schema 到 contracts/。构建或修改组件时参考 references/roles-names-and-screen-readers.md 并模仿 examples/accessible-task-row.md。大文本与动效参考 references/text-scaling-and-motion.md。测试参考 references/testing-accessibility.md。从仓库根运行检查脚本,修复每条 FAIL 行直至通过。设备大文本测试使用 templates/.maestro/flows/a11y/01-large-text-core-screens.yaml。发布前由开发者执行屏幕阅读器检查清单。
适用场景
适用于使用 React Native 构建、需要满足 VoiceOver 与 TalkBack 无障碍要求的移动应用项目,尤其是涉及多语言、动态字体、图表画布、手势交互与覆盖层组件的界面。
限制
自动化脚本与测试只能验证机器可检测的部分;屏幕阅读器输出是否合理必须由人工在发布候选版本上以 VoiceOver 与 TalkBack 各进行一次检查,且需覆盖从左到右及(若发布)从右到左的语言环境。不得为通过检查而削弱颜色对、门禁或检查;接受的失败必须作为带原因与批准人的契约例外,并在每次运行时打印。