如何让VoiceOver按aria属性指定的行列信息读取HTML表格<td>单元格？

我用HTML <table>制作Excel风格表格，添加了列字母（如"A"、"B"）的装饰行和行号（如"1"、"2"）的装饰元素，希望屏幕阅读器播报行列位置时不计入这些装饰内容。虽然已经用aria-hidden="true"隐藏了装饰元素，但它们仍会被算进行列计数。

比如在下方示例中，VoiceOver选中单元格A2时会读出“Row 4 of 4, Cell A2”，而非期望的“Row 2 of 2, Cell A2”；移动到B2时会读“Second, Cell B2, Column 3 of 3”，而非“Second, Cell B2, Column 2 of 2”。如何让VoiceOver依据aria-*index属性读取行列信息，而非按原生表格结构索引？

问题示例代码 #

<table aria-colcount="2" aria-rowcount="2">
    <thead>
        <tr>
            <th aria-hidden="true">#</th>
            <th aria-hidden="true" scope="col" aria-colindex="1">A</th>
            <th aria-hidden="true" scope="col" aria-colindex="2">B</th>
        </tr>
        <tr>
            <th aria-hidden="true"></th>
            <th scope="col" aria-colindex="1">First</th>
            <th scope="col" aria-colindex="2">Second</th>
        </tr>
    </thead>
    <tbody>
        <tr aria-rowindex="1">
            <th scope="row" aria-hidden="true">1</th>
            <td aria-colindex="1">Cell A1</td>
            <td aria-colindex="2">Cell B1</td>
        </tr>
        <tr aria-rowindex="2">
            <th scope="row" aria-hidden="true">2</th>
            <td aria-colindex="1">Cell A2</td>
            <td aria-colindex="2">Cell B2</td>
        </tr>
    </tbody>
</table>

解决方案 #

1. 拆分装饰元素与数据表格（最优方案） #

不要将行号、列字母放在<table>内部，改用独立的<div>元素放在表格的左侧和上方，通过CSS定位模拟Excel的表头视觉效果。这样数据表格仅包含真实的内容行列，屏幕阅读器会直接基于原生结构正确计数，无需额外ARIA属性调整。

示例结构：

<div class="excel-table-container">
    <!-- 左上角空白装饰 -->
    <div class="corner-cell">#</div>
    <!-- 列字母表头 -->
    <div class="col-headers">
        <div class="col-header">A</div>
        <div class="col-header">B</div>
    </div>
    <!-- 行号列 -->
    <div class="row-numbers">
        <div class="row-number">1</div>
        <div class="row-number">2</div>
    </div>
    <!-- 真实数据表格 -->
    <table>
        <thead>
            <tr>
                <th scope="col">First</th>
                <th scope="col">Second</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell A1</td>
                <td>Cell B1</td>
            </tr>
            <tr>
                <td>Cell A2</td>
                <td>Cell B2</td>
            </tr>
        </tbody>
    </table>
</div>

配合CSS将这些元素对齐，既保留Excel的视觉风格，又保证数据表格的无障碍语义纯净。

2. 调整ARIA属性与表格元素类型 #

如果必须将装饰元素留在表格内，需注意：

• 装饰元素不要使用<th>，改用<td>并添加aria-hidden="true"，因为<th>会被屏幕阅读器识别为表头单元格，即便隐藏仍会影响行列计数。
• 确保aria-rowcount和aria-colcount准确对应真实数据的行列数，所有数据单元格的aria-rowindex和aria-colindex连续且正确映射。

修改后的表格示例：

<table aria-colcount="2" aria-rowcount="2">
    <thead>
        <!-- 装饰行 -->
        <tr>
            <td aria-hidden="true">#</td>
            <td aria-hidden="true">A</td>
            <td aria-hidden="true">B</td>
        </tr>
        <!-- 真实表头行 -->
        <tr>
            <td aria-hidden="true"></td>
            <th scope="col" aria-colindex="1">First</th>
            <th scope="col" aria-colindex="2">Second</th>
        </tr>
    </thead>
    <tbody>
        <tr aria-rowindex="1">
            <td aria-hidden="true">1</td>
            <td aria-colindex="1">Cell A1</td>
            <td aria-colindex="2">Cell B1</td>
        </tr>
        <tr aria-rowindex="2">
            <td aria-hidden="true">2</td>
            <td aria-colindex="1">Cell A2</td>
            <td aria-colindex="2">Cell B2</td>
        </tr>
    </tbody>
</table>

这种方式仍存在兼容性风险（部分屏幕阅读器如VoiceOver仍可能依赖原生结构计数），因此优先推荐第一种拆分方案。

3. 临时方案：移除装饰元素的表格语义 #

给装饰行/列的<tr>或<td>添加role="presentation"，让屏幕阅读器忽略这些元素的表格语义，但这可能破坏表格整体无障碍性，仅作为临时应急方案使用。

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