如何在屏幕阅读器和可访问性方面处理表格中的脚注?

问题描述 投票:0回答:1

我正在制作一些简单的表格并尝试使它们易于访问。这些表格自始至终都有脚注,有些在标题中,有些在表体/数据中。脚注本身位于

tfoot
中,我用
aria-hidden
隐藏它。

下面的标题可能是最容易了解我所做的事情,因为它位于顶部。

我基本上隐藏了脚注编号,并使用屏幕阅读器专用文本在引用该脚注的任何内容之后立即读出脚注文本。我还在脚注文本中添加了“脚注 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>
html-table accessibility screen-readers footnotes
1个回答
0
投票

完全隐藏脚注逻辑并将其内联以供屏幕阅读器用户使用可能不是一个好主意。

乍一看,其中一些脚注重复了好几次,而且并不短。作为屏幕阅读器用户,我当然不想让它们重复几次。 一旦我第一次得到解释,就足够了。

你的逻辑很复杂,但是当笔记没有重复/引用多次并且笔记相当短时,你的逻辑是有效且有趣的。 对于较长的注释和/或当它们像您的示例中那样被多次引用时,我宁愿建议保留传统的、更简单的逻辑,如下所示:

参考脚注:

<sup><a href="#note1" id="backref1"><span class="sr_only">Footnote&nbsp;</span>1</a></sup>

脚注本身:

<p id="note1">content of the footnote 1 bla bla bla
<a href="#backref1">Go back</a></p>

请注意,在脚注中,有一个链接可返回到引用该注释的第一个位置。

旁注:注意不要在

<h4>
中放置太长的文字。这是一个标题,不适合包含整个文本段落。

© www.soinside.com 2019 - 2024. All rights reserved.