iOS VoiceOver下邮件表格首表头重复播报的ADA兼容问题

我之前也踩过iOS VoiceOver处理邮件表格的坑，你遇到的表头重复播报（比如“Item”读成“Item，Item”），主要是邮件客户端的HTML解析逻辑加上VoiceOver的特殊交互导致的，结合你提供的代码，给你几个针对性的解决方法：

1. 简化<caption>的嵌套结构 #

你的<caption>里嵌套了<span>和<h2>，多余的inline元素会让Mail.app的VoiceOver解析时误判语义，把标题和表头的内容关联重复了。直接把<h2>放在<caption>里，合并样式：

<caption style="text-align:left; padding-top: 20px;">
  <h2 style="font-size:24px; margin:0; font-weight:normal; font-family:Arial; line-height:1.08; color:#000;">Canceled service appointment</h2>
</caption>

去掉不必要的<span>，让caption的语义更清晰，避免VoiceOver重复抓取文本。

2. 替换表头分隔线的实现方式 #

你用空<td>加<hr>做分隔线的方式，会让VoiceOver把这个空行当成额外的表头行，从而重复播报上面的表头文本。建议直接给<th>加底部边框来实现分隔效果，同时删除那个包含<hr>的空行：

<thead>
  <tr style="height:22px; font-family:Arial; font-size:20px; line-height:1.22; color:#000;">
    <th scope="col" style="padding-top:24px; width:30%; font-weight:normal; text-align:left; border-bottom:1px solid #000; padding-bottom:8px;">Auto service</th>
    <th scope="col" style="padding-top:24px; width:40%; font-weight:normal; text-align:left; border-bottom:1px solid #000; padding-bottom:8px;">Service location</th>
    <th scope="col" style="padding-top:24px; font-weight:normal; text-align:left; border-bottom:1px solid #000; padding-bottom:8px;">Customer</th>
  </tr>
</thead>

这样既保留了视觉上的分隔线，又不会产生额外的语义干扰。

3. 明确表格的ARIA语义（可选） #

虽然你已经给<th>加了scope="col"，但邮件客户端对ARIA属性的支持可能不稳定，给<thead>和<tr>加上明确的角色，帮助VoiceOver正确识别表格结构：

<thead role="rowgroup">
  <tr role="row">
    <th scope="col" ...>...</th>
    <!-- 其他th -->
  </tr>
</thead>

把这些调整完之后，用iPhone的VoiceOver测试一下，应该就能解决表头重复播报的问题了。邮件模板的无障碍适配要特别注意iOS Mail.app的特性，它对HTML的处理和普通浏览器有不少差异，尽量保持结构简洁、语义明确。

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