嵌套表格设role="presentation"致VoiceOver跳过单元格内容，是否正常？

现象梳理 #

• 两个合规数据表格：外层均包含带<th scope="col">的<thead>，每行首单元格内嵌套布局表格用于堆叠图片与产品信息
• 表格1（内层无role）：Mac Mail+VoiceOver可正常朗读产品名称、品牌、价格、数量等全部内容
• 表格2（内层加role="presentation"）：Mac Mail+VoiceOver直接跳过首单元格内的产品信息，仅读取后续的数量、总计单元格；但Chrome（Gmail/Outlook）+VoiceOver可正常读取所有内容
• 临时解决：移除内层表格的role="presentation"后，所有客户端均能正常朗读内容

规范与行为偏差分析 #

根据ARIA规范，role="presentation"的作用是移除元素自身的语义身份（比如将数据表格转为纯布局容器），但不会隐藏其子内容的可访问性——也就是说，加了该属性的表格，辅助技术应忽略其表格语义，但仍需暴露内部的文本、图片等内容。

问题本质：Mac Mail+VoiceOver的特有兼容Bug #

这并非对ARIA规范的理解错误，而是Mac Mail的WebKit渲染分支与VoiceOver交互时的异常表现：

• Chrome的WebKit实现正确处理了嵌套在<td>内的presentation表格，仅移除表格语义，保留内部内容的可访问性
• Mac Mail的WebKit实现错误地将整个role="presentation"表格及其子内容从可访问性树中排除，导致VoiceOver无法读取相关内容

这类邮件客户端与辅助技术的兼容差异是邮件无障碍开发中的常见场景，Apple Mail对ARIA属性的处理常与标准浏览器存在出入，该问题属于已知的客户端特有行为。

可行解决方案 #

• 优先选择移除内层表格的role="presentation"：虽然理论上布局表格应添加该属性以消除不必要的语义，但在Mac Mail+VoiceOver的环境下，不加该属性既能保证全客户端的内容可访问性，也不会对其他辅助技术造成负面影响
• 替代方案（语义严格场景）：若需严格遵循布局容器的语义规范，可尝试用<div>结合邮件兼容的内联CSS实现堆叠布局，避免嵌套表格，但需注意不同邮件客户端对CSS的支持差异

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