如何为屏幕阅读器及无障碍适配处理表格中的脚注？

当前实现情况 #

我正在制作带脚注的简易表格，需确保无障碍性：

• 脚注分布：部分在表格caption中，部分在表格主体数据内
• 脚注存储：将脚注内容放在<tfoot>标签中，并用aria-hidden="true"隐藏
• 适配逻辑：
  • 隐藏脚注编号的屏幕阅读器读取（通过aria-hidden）
  • 使用sr-only类的仅屏幕阅读器文本，在引用脚注的内容后直接读出完整脚注文本
  • 在脚注文本前后添加「脚注X开始」「脚注X结束」，明确脚注的起止范围

经NVDA测试该方案表现良好，但想了解是否存在更优的表格脚注屏幕阅读器适配方案，仅能使用NVDA和Narrator进行测试。

当前实现的HTML代码：

<table>
    <caption>
        <h4>
            Skilled nursing facility care
            <sup aria-hidden="true">1</sup>
            <span class="sr-only">
                <em>footnote 1 begin</em>
                A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
                been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
                <em>footnote 1 end</em>
            </span>
        </h4>
        <p>
            You must meet Medicare’s requirements including three inpatient hospital days, prior to entering a Medicare-approved skilled nursing facility within 30 days
        </p>
    </caption>
    <thead>
        <tr>
            <th scope="col" class="cell-no-bkg"></th>
            <th scope="col">Medicare pays</th>
            <th scope="col">Plan pays</th>
            <th scope="col">You pay</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">
                <ol aria-hidden="true">
                    <li>
                        A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
                        been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
                    </li>
                    <li>
                        Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
                        pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
                        During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
                        charges and the amount Medicare would have paid.
                    </li>
                </ol>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row" class="th-in-body">
                <p>First 20 days</p>
            </th>
            <td>
                <p>All approved amounts</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>
                    $0
                    <sup aria-hidden="true">1</sup>
                    <span class="sr-only">
                        <em>footnote 1 begin</em>
                        A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
                        been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
                        <em>footnote 1 end</em>
                    </span>
                </p>
            </td>
        </tr>
        <tr>
            <th scope="row" class="th-in-body">
                <p>21st through 100th day</p>
            </th>
            <td>
                <p>All but $200 per day</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>
                    Up to $200
                    <sup aria-hidden="true">2</sup>
                    <span class="sr-only">
                        <em>footnote 2 begin</em>
                        Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
                        pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
                        During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
                        charges and the amount Medicare would have paid.
                        <em>footnote 2 end</em>
                    </span>
                </p>
            </td>
        </tr>
        <tr>
            <th scope="row" class="th-in-body">
                <p>101st day and after</p>
            </th>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>All costs</p>
            </td>
        </tr>
    </tbody>
</table>

更优化的适配方案 #

你的现有方案已经满足基础无障碍需求，但可以从语义化关联、维护性和多用户场景适配三个维度优化：

1. 用aria-describedby建立语义关联，减少内容冗余 #

• 给<tfoot>中的每个脚注项设置唯一ID，比如footnote-1、footnote-2
• 在引用脚注的位置（caption、表格单元格），通过aria-describedby关联对应脚注的ID
• 移除重复嵌入的脚注文本，避免维护时多次修改内容

2. 保留视觉上标的可访问性 #

• 不需要给上标编号添加aria-hidden="true"，屏幕阅读器会自动读出「上标1」，建立视觉与听觉的对应关系，帮助用户关联脚注位置和内容

3. 恢复<tfoot>的可访问性 #

• 移除<tfoot>中aria-hidden="true"，让键盘导航用户可以直接访问脚注内容，同时视觉用户也能看到完整的脚注列表

修改后的代码示例 #

<table>
    <caption>
        <h4 aria-describedby="footnote-1">
            Skilled nursing facility care
            <sup>1</sup>
        </h4>
        <p>
            You must meet Medicare’s requirements including three inpatient hospital days, prior to entering a Medicare-approved skilled nursing facility within 30 days
        </p>
    </caption>
    <thead>
        <tr>
            <th scope="col" class="cell-no-bkg"></th>
            <th scope="col">Medicare pays</th>
            <th scope="col">Plan pays</th>
            <th scope="col">You pay</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="th-in-body">
                <p>First 20 days</p>
            </th>
            <td>
                <p>All approved amounts</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p aria-describedby="footnote-1">
                    $0
                    <sup>1</sup>
                </p>
            </td>
        </tr>
        <tr>
            <th scope="row" class="th-in-body">
                <p>21st through 100th day</p>
            </th>
            <td>
                <p>All but $200 per day</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p aria-describedby="footnote-2">
                    Up to $200
                    <sup>2</sup>
                </p>
            </td>
        </tr>
        <tr>
            <th scope="row" class="th-in-body">
                <p>101st day and after</p>
            </th>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>$0</p>
            </td>
            <td>
                <p>All costs</p>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">
                <ol>
                    <li id="footnote-1">
                        1. A benefit period begins on the first day you receive services as an inpatient in a hospital and ends after you have
                        been out of the hospital and have not received skilled care in any other facility for 60 days in a row.
                    </li>
                    <li id="footnote-2">
                        2. Notice: When your Medicare Part A hospital benefits are exhausted, the insurer stands in place of Medicare and will
                        pay whatever amount Medicare would have paid up to an additional 365 days as provided in the policy’s “core benefits.”
                        During this time, the hospital is prohibited from billing you for the balance based on any difference between its billed
                        charges and the amount Medicare would have paid.
                    </li>
                </ol>
            </td>
        </tr>
    </tfoot>
</table>

测试说明 #

• 在NVDA中，当焦点移到关联了脚注的元素时，会先读出元素内容，再读出脚注文本，上下文清晰
• 在Narrator中，同样会识别aria-describedby的关联关系，自动播报脚注内容
• 键盘用户可以通过Tab键导航到<tfoot>区域，查看完整脚注列表

内容的提问来源于stack exchange，提问作者magenta placenta