应用内Web View页面对原生屏幕阅读器技术的无障碍适配问题咨询

默认未做针对性适配的 WebView 确实会对 Android TalkBack、iOS VoiceOver、系统字体大小调整这类无障碍功能的正常使用造成负面影响，具体影响和适配规则如下：

对屏幕阅读器（TalkBack/VoiceOver）的负面影响 #

• 原生系统默认只能识别到 WebView 整体为一个可聚焦控件，无法自动读取 WebView 内部 DOM 节点的语义信息，按钮、链接、输入框等元素的用途不会被屏幕阅读器播报，除非 H5 页面主动配置了正确的 ARIA 语义属性，同时原生端开启了 WebView 的无障碍属性传递开关。
• 自定义手势冲突概率高：H5 侧实现的滑动、点击等自定义手势很容易消费掉系统屏幕阅读器的全局手势，导致 VoiceOver 转子操作、TalkBack 双指翻页等常用无障碍操作失效。

对系统字体大小设置的负面影响 #

• Android 端 WebView 默认使用独立于系统的字体缩放配置，用户在系统设置中调整的字体大小不会默认同步到 WebView 内部，需要原生端主动监听系统字体缩放比例，通过 WebSettings.setTextZoom() 接口同步配置才能生效。
• iOS 端 WKWebView 默认不跟随系统动态类型（Dynamic Type）调整字体大小，需要在 H5 的 CSS 中使用相对字号单位+适配动态类型的字体规则，同时原生端同步系统缩放参数到 WebView 才能生效。

只要完成原生 WebView 配置 + H5 侧的无障碍适配，WebView 场景的无障碍体验完全可以对齐原生应用，通用适配方案如下：

• 原生侧配置：
  • Android 端开启 WebView 无障碍传递开关，监听系统字体缩放变化实时同步给 setTextZoom 参数
  • iOS 端给 WKWebView 开启无障碍相关适配开关，同步系统动态类型的缩放比例给 H5 侧
• H5 侧适配：
  • 所有可交互元素添加正确的 ARIA 语义属性，非装饰性图片补充 alt 文本说明
  • 避免实现和系统无障碍手势冲突的自定义操作逻辑
  • 字号使用 rem/em 等相对单位，不要写死固定像素值，适配系统缩放规则

内容的提问来源于stack exchange，提问作者richardstelmach