iPhone端Safari与Chrome下VoiceOver无法读取网站适配问题咨询

该问题属于iOS WebKit内核的特有适配需求，无需全量重构代码，仅需要针对iOS端WebKit的无障碍解析规则做定向调整即可。iOS端所有第三方浏览器（包括Chrome）底层均强制使用苹果WebKit内核渲染，其无障碍实现逻辑和Mac端WebKit、安卓Blink内核存在明显差异，这也是其他平台运行正常、仅iOS失效的核心原因。

以下是优先级最高的排查点：

• 优先检查全局节点的无障碍属性：排查<html>、<body>标签以及页面最外层容器是否误加了aria-hidden="true"属性。iOS WebKit的无障碍解析不支持父节点aria-hidden="true"下子节点用aria-hidden="false"覆盖的规则，只要根节点被标记为隐藏，VoiceOver会直接跳过整页内容，而Mac端和安卓端可以正常识别覆盖规则。
• 检查viewport配置：如果viewport标签设置了user-scalable=no或maximum-scale=1但未添加viewport-fit=cover适配，部分iOS版本的VoiceOver会判定页面为非移动端适配页面，直接跳过内容读取，可调整为如下配置测试：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
  

• 排查全局样式的影响：如果给<body>设置了全局-webkit-user-select: none属性，iOS VoiceOver会判定页面内容不可选中，直接跳过朗读。该属性仅可给需要禁止选中的局部元素添加，不可全局配置。
• 适配动态渲染内容的识别逻辑：如果你的页面内容完全通过JS异步渲染、无初始静态骨架内容，iOS VoiceOver不会主动监听DOM更新重新解析内容。可以在内容渲染完成后，给内容根容器添加tabindex="-1"属性后主动调用focus()方法，强制无障碍引擎重新扫描页面内容。

排查时可以直接使用Xcode自带的iOS模拟器Accessibility Inspector工具扫描页面，可直接定位到iOS端无法识别的无障碍节点问题，比真机排查效率更高。

内容的提问来源于stack exchange，提问作者J. Diaz