如何使用headers屬性使表A11Y兼容？

我正在創建一個應該符合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的正確方法？

來源

2017-06-05 smartmouse

你在第二張表中做什麼在技術上是正確的。當您有colspan s和rowspan s，或者當您有多個<th> s時，則此方法使其可訪問。某些資源（您可能已經閱讀過）：

H43: Using id and headers attributes to associate data cells with header cells in data tables來自W3C的Techniques for WCAG 2.0。
Creating Accessible Tables來自WebAIM（鏈接到頁面上的相關部分）。

雖然這種方法是冗長的。您可能希望使用<caption>來代替您的月/年，因此不會在每個單元格（對於大多數屏幕閱讀器，也許都是）中宣佈。

這意味着您的用戶仍然可以獲取上下文，但不必在每個單元格上都聽。在任何時候，他們都可以彈出來確認表格標題是什麼。

來源

2017-06-05 13:06:18 aardrian

你是說用''代替''？ – smartmouse

這可能有幫助（我做了一個CodePen）：https://codepen.io/aardrian/pen/pwvwzG你將不得不用你的分頁鏈接來測試它，但那些超出了你的問題的範圍（這就是爲什麼我沒有討論他們需要成爲正確的鏈接）。 – aardrian

感謝您的支持;） – smartmouse

如何使用headers屬性使表A11Y兼容？

回答

相關問題