0
我正在創建一個應該符合WCAG 2.0的應用程序。 我使用AChecker來檢查我的頁面，並且我遇到了table的一些問題。我得到以下2個問題：如何使用headers屬性使表A11Y兼容？
- 數據表不使用範圍，以確定細胞
- 與多行數據表/頭的列不使用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 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>
鏈接到相關的Plunker。
現在AChecker說在頁面中有「沒有已知的問題」。 無論如何，如果表中有多個th元素，您是否可以確認我的修改是使用id和headers的正確方法？
你是說用'
這可能有幫助（我做了一個CodePen）：https://codepen.io/aardrian/pen/pwvwzG你將不得不用你的分頁鏈接來測試它，但那些超出了你的問題的範圍（這就是爲什麼我沒有討論他們需要成爲正確的鏈接）。 – aardrian
感謝您的支持;） – smartmouse
相關問題