我正在创建一个应符合WCAG 2.0的应用程序。我正在使用Achecker检查我的页面,并且正在遇到table
的一些问题。我收到以下两个问题:
- 带有行和列标头的数据表不使用范围来识别单元格
- 数据表具有多个行/列的标头/列不使用ID和标头属性来识别单元格
这是我表的源代码:
<!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>
链接到相关的plunker。
根据此W3C文档页面,您知道在我的情况下使用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>
链接到相关的plunker。
现在Achecker说页面上没有"已知问题"。无论如何,您能确认我的修改是使用id
和headers
的正确方法,如果表中有多个th
元素?
您在第二个表中所做的事情在技术上是正确的。当您具有colspan
S和rowspan
s时,或当您具有多个<th>
s时,此方法使其可访问。一些资源(您可能已经阅读(:
- H43:使用ID和标头属性将数据单元与WCAG 2.0技术中的数据表中的数据单元相关联。
- 从Webaim创建可访问的表(链接到页面上的相关部分(。
这种方法是冗长的。您可能需要在一个月/年中使用<caption>
,因此并未在每个单元格中宣布它(对于大多数屏幕读取器,也许全部(。
这意味着您的用户仍然会获得上下文,但不必在每个单元格上听。在任何时候,他们都可以弹出以确认表格是什么。