如何使用 headers 属性使 table A11Y 兼容？

Question

我正在创建一个应符合 WCAG 2.0 标准的应用程序。我正在使用 AChecker 检查我的页面，但我在使用 table 时遇到了一些问题。我遇到以下 2 个问题：

包含行和列的数据 table headers 不使用范围来识别单元格
具有 headers 个以上 row/column 的数据 table 不使用 id 和 headers 属性来识别单元格

这是我的 table:

的源代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <body>
        <table class="ui celled center aligned unstackable table seven column day">
            <thead>
                <tr>
                    <th colspan="7">
                        <span class="link">Giugno 2017</span>
                        <span class="prev link">
                            <span class="ifix chevron left icon"></span>
                        </span>
                        <span class="next link">
                            <span class="ifix chevron right icon"></span>
                        </span>
                    </th>
                </tr>
                <tr>
                    <th>Dom</th>
                    <th>Lun</th>
                    <th>Mar</th>
                    <th>Mer</th>
                    <th>Gio</th>
                    <th>Ven</th>
                    <th>Sab</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="link adjacent disabled">28</td>
                    <td class="link adjacent disabled">29</td>
                    <td class="link adjacent disabled">30</td>
                    <td class="link adjacent disabled">31</td>
                    <td class="link">1</td>
                    <td class="link">2</td>
                    <td class="link">3</td>
                </tr>
                <tr>
                    <td class="link">4</td>
                    <td class="link today focus">5</td>
                    <td class="link">6</td>
                    <td class="link">7</td>
                    <td class="link">8</td>
                    <td class="link">9</td>
                    <td class="link">10</td>
                </tr>
                <tr>
                    <td class="link">11</td>
                    <td class="link">12</td>
                    <td class="link">13</td>
                    <td class="link">14</td>
                    <td class="link">15</td>
                    <td class="link">16</td>
                    <td class="link">17</td>
                </tr>
                <tr>
                    <td class="link">18</td>
                    <td class="link">19</td>
                    <td class="link">20</td>
                    <td class="link">21</td>
                    <td class="link">22</td>
                    <td class="link">23</td>
                    <td class="link">24</td>
                </tr>
                <tr>
                    <td class="link">25</td>
                    <td class="link">26</td>
                    <td class="link">27</td>
                    <td class="link">28</td>
                    <td class="link">29</td>
                    <td class="link">30</td>
                    <td class="link adjacent disabled">1</td>
                </tr>
                <tr>
                    <td class="link adjacent disabled">2</td>
                    <td class="link adjacent disabled">3</td>
                    <td class="link adjacent disabled">4</td>
                    <td class="link adjacent disabled">5</td>
                    <td class="link adjacent disabled">6</td>
                    <td class="link adjacent disabled">7</td>
                    <td class="link adjacent disabled">8</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Link 相关 Plunker.

根据这个 W3C documentation page 你知道在我的情况下使用 headers 的正确方法吗？

我试着自己做，我编辑了我的代码。这是结果：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <body>
        <table class="ui celled center aligned unstackable table seven column day">
            <thead>
                <tr>
                    <th id="month" scope="col" colspan="7">
                        <span class="link">Giugno 2017</span>
                        <span class="prev link">
                            <span class="ifix chevron left icon"></span>
                        </span>
                        <span class="next link">
                            <span class="ifix chevron right icon"></span>
                        </span>
                    </th>
                </tr>
                <tr>
                    <th id="dom" headers="month" scope="col">Dom</th>
                    <th id="lun" headers="month" scope="col">Lun</th>
                    <th id="mar" headers="month" scope="col">Mar</th>
                    <th id="mer" headers="month" scope="col">Mer</th>
                    <th id="gio" headers="month" scope="col">Gio</th>
                    <th id="ven" headers="month" scope="col">Ven</th>
                    <th id="sab" headers="month" scope="col">Sab</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td headers="dom" class="link adjacent disabled">28</td>
                    <td headers="lun" class="link adjacent disabled">29</td>
                    <td headers="mar" class="link adjacent disabled">30</td>
                    <td headers="mer" class="link adjacent disabled">31</td>
                    <td headers="gio" class="link">1</td>
                    <td headers="ven" class="link">2</td>
                    <td headers="sab" class="link">3</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">4</td>
                    <td headers="lun" class="link today focus">5</td>
                    <td headers="mar" class="link">6</td>
                    <td headers="mer" class="link">7</td>
                    <td headers="gio" class="link">8</td>
                    <td headers="ven" class="link">9</td>
                    <td headers="sab" class="link">10</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">11</td>
                    <td headers="lun" class="link">12</td>
                    <td headers="mar" class="link">13</td>
                    <td headers="mer" class="link">14</td>
                    <td headers="gio" class="link">15</td>
                    <td headers="ven" class="link">16</td>
                    <td headers="sab" class="link">17</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">18</td>
                    <td headers="lun" class="link">19</td>
                    <td headers="mar" class="link">20</td>
                    <td headers="mer" class="link">21</td>
                    <td headers="gio" class="link">22</td>
                    <td headers="ven" class="link">23</td>
                    <td headers="sab" class="link">24</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">25</td>
                    <td headers="lun" class="link">26</td>
                    <td headers="mar" class="link">27</td>
                    <td headers="mer" class="link">28</td>
                    <td headers="gio" class="link">29</td>
                    <td headers="ven" class="link">30</td>
                    <td headers="sab" class="link adjacent disabled">1</td>
                </tr>
                <tr>
                    <td headers="dom" class="link adjacent disabled">2</td>
                    <td headers="lun" class="link adjacent disabled">3</td>
                    <td headers="mar" class="link adjacent disabled">4</td>
                    <td headers="mer" class="link adjacent disabled">5</td>
                    <td headers="gio" class="link adjacent disabled">6</td>
                    <td headers="ven" class="link adjacent disabled">7</td>
                    <td headers="sab" class="link adjacent disabled">8</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Link 相关 Plunker.

现在 AChecker 说页面中有 "No known problems"。无论如何，如果 table 中有多个 th 元素，您能否确认我的修改是使用 id 和 headers 的正确方法？

Answer 1

你在第二个 table 中所做的在技术上是正确的。当您有 colspans 和 rowspans 时，或者当您有多个 <th>s 时，这种方法可以使其易于访问。一些资源（您可能已经阅读过）：

H43: Using id and headers attributes to associate data cells with header cells in data tables 来自 W3C 的 WCAG 2.0 技术。
Creating Accessible Tables 来自 WebAIM（链接到页面上的相关部分）。

不过，这种方法很冗长。您可能想使用 <caption> 代替您的 month/year，因此它不会在每个单元格中宣布（对于大多数屏幕阅读器，可能是全部）。

这意味着您的用户仍然可以获得上下文，但不必在每个单元格上收听它。他们可以随时弹出来确认 table 标题是什么。

如何使用 headers 属性使 table A11Y 兼容？

How to use headers attribute to make table A11Y compliant?

html

accessibility

html-table

tablecell

wcag2.0