5月30日 15:19

Expo 应用如何实现可访问性?有哪些最佳实践?

Expo 的可访问性主要靠 React Native 的 accessibility* 属性实现:给可交互元素补 label、role、hint,用 state/value 表达状态和值,动态变化用 AccessibilityInfo 或 liveRegion 通知读屏,并在 iOS VoiceOver、Android TalkBack 上真机测试。优先保证按钮、图片、表单、弹窗、列表项能被读屏准确读出、能被键盘或辅助触控操作,别只靠颜色传达信息。

追问

accessibilityLabel、Hint、Role 分别做什么?

label 说明“这是什么”,role 说明“它是什么控件”,hint 说明“触发后会发生什么”。

状态和值怎么告诉屏幕阅读器?

复选框、开关用 accessibilityState;滑块、进度条用 accessibilityValue,提供 min、max、now。

实际项目怎么验收?

iOS 开 VoiceOver、Android 开 TalkBack,按完整流程走一遍:登录、表单报错、列表操作、弹窗关闭、深色/高对比、减少动画都要测。

写段代码

tsx
<Pressable accessibilityRole="button" accessibilityLabel="删除订单" accessibilityHint="删除后无法恢复"> <Text>删除</Text> </Pressable>
标签:Expo