Question

我正在设计符合ADA（可访问性）标准的电子邮件模板。

这里的问题是，表中的第一个标头在语音朗读时宣布两次。

例如如果“项目”是第一列，则语音提示类似于“项目，项目”。仅在iOS设备中会发生此问题。对于其他设备，它按预期运行。

<table class="setDisplayWidthInner" border="0" cellpadding="0" cellspacing="0" align="center">
    <caption style="text-align:left; padding-top: 20px;">
        <span style="height: 26px;  font-family: Arial;  font-size: 24px;  line-height: 1.08; text-align: left;  color: #000000;">
                        <h2 style="font-size:24px;margin: 0px;font-weight: normal;">
                                    Canceled service appointment
                        </h2>
                    </span>
    </caption>
    <thead>
        <tr style="height: 22px;  font-family: Arial;  font-size: 20px;  line-height: 1.22;  text-align: left;  color: #000000;">
            <th scope="col" style="padding-top: 24px; width:30%; font-weight: normal" align="left">Auto service</th>
            <th scope="col" style="padding-top: 24px; width:40%; font-weight: normal" align="left">Service location</th>
            <th scope="col" style="padding-top: 24px; font-weight: normal" align="left">Customer</th>
        </tr>
        <tr>
            <td aria-hidden="true">
                <hr aria-hidden="true">
            </td>
            <td aria-hidden="true">
                <hr aria-hidden="true">
            </td>
            <td aria-hidden="true">
                <hr aria-hidden="true">
            </td>
        </tr>
    </thead>
    <tbody>
        <!-- body goes here -->
    </tbody>

在iOS（iPhone设备）上启用语音功能的预期结果：

物品只能宣布为“物品”一次。

在iOS（iPhone设备）上启用语音的实际结果：

Item宣布为“ Item Item”（两次）。

Answer 1

阅读本-https://a11y-101.com/development/tables
...我看到您正在使用表标题标签（<‌th‌>）来实现语义表结构，但我认为您实际上是在误导屏幕阅读器软件。
我的想法是应该使用表头将内容与表头链接，但是在您的情况下，实际上并没有在表单元格中提供任何内容。因此，VoiceOver感到困惑，只是重复查找表头，因为它找不到链接的内容。

在这种情况下，您很幸运只有VoiceOver能够使用它，但是我建议将这些<‌th‌>标签更改为<‌td‌> s并再次进行测试...？

电子邮件中的表格标题在iOS的Voice Over（ADA）中宣布两次（仅第一列宣布两次）

1 个答案: