爲準確寫入準確<th><table>

Question

我正在按照UN's accessibility guidelines寫入可訪問表。

我有這張桌子。我做了什麼- 我認爲 -應該是<th>加粗。

這是HTML：

<table width="100%"> 
    <thead> 
     <tr> 
      <th>Year</th> 
      <th>1991</th> 
      <th>1995</th> 
      <th>2000</th> 
      <th>2002</th> 
      <th>2007</th> 
     </tr> 
    </htead> 
    <tbody> 
     <tr> 
      <th>Indicator 1</th> 
      <td>3.0</td> 
      <td>11.0</td> 
      <td>7.8</td> 
      <td>4.0</td> 
      <td>4.7</td> 
     </tr> 
     <tr> 
      <th>Indicator 2</th> 
      <td>9.0</td> 
      <td>23.4</td> 
      <td>19.5</td> 
      <td>9.4</td> 
      <td>9.1</td> 
     </tr> 
     <tr> 
      <th>Indicator 3</th> 
      <td>18.7</td> 
      <td>32.0</td> 
      <td>30.0</td> 
      <td>20.1</td> 
      <td>21.8</td> 
     </tr> 
    </tbody> 
</table> 

但我不知道它是準確的。我認爲這樣做更有意義：

<table> 
    <tbody> 
     <tr> 
      <th id="year">Year</th> 
      <td headers="year" id="year-1991">1991</td> 
      <td headers="year" id="year-1995">1995</td> 
      <td headers="year" id="year-2000">2000</td> 
      <td headers="year" id="year-2002">2002</td> 
      <td headers="year" id="year-2007">2007</td> 
     </tr> 
     <tr> 
      <th id="indicator-1">Indicator 1</th> 
      <td headers="indicator-1 year-1991">3.0</td> 
      <td headers="indicator-1 year-1995">11.0</td> 
      <td headers="indicator-1 year-2000">7.8</td> 
      <td headers="indicator-1 year-2002">4.0</td> 
      <td headers="indicator-1 year-2007">4.7</td> 
     </tr> 
     <tr> 
      <th id="indicator-2">Indicator 2</th> 
      <td headers="indicator-2 year-1991">9.0</td> 
      <td headers="indicator-2 year-1995">23.4</td> 
      <td headers="indicator-2 year-2000">19.5</td> 
      <td headers="indicator-2 year-2002">9.4</td> 
      <td headers="indicator-2 year-2007">9.1</td> 
     </tr> 
     <tr> 
      <th id="indicator-3">Indicator 3</th> 
      <td headers="indicator-3 year-1991">18.7</td> 
      <td headers="indicator-3 year-1995">32.0</td> 
      <td headers="indicator-3 year-2000">30.0</td> 
      <td headers="indicator-3 year-2002">20.1</td> 
      <td headers="indicator-3 year-2007">21.8</td> 
     </tr> 
    </tbody> 
</table> 

你怎麼看？有沒有人有表和可訪問性的經驗？請儘可能提供參考。謝謝。

注意：我知道summary屬性，但爲了簡單起見，我在此刪除它。

Answer 1

對於具有結構簡單，像這樣的表，您的標記（第一，簡單版本）足以實現可訪問性。對於WCAG 2.0，項目Using table markup to present tabular information，在HTML和XHTML技術中沒有額外的標記，對於標題單元格只有th。

特殊技術可能需要結構更復雜的表格。

但是，數據表通常應具有可訪問性和可用性的caption元素。它可以幫助用戶從整體上獲得有關表格的關鍵信息。而不是標題，表格之前的標題或文本可用於此目的，但它們不以同樣的方式與表格（在標記級別）相關聯。

Answer 2

我發現，使用scope屬性更有意義：

<table width="100%"> 
<thead> 
    <tr> 
     <th scope="col">Year</th> 
     <th scope="col">1991</th> 
     <th scope="col">1995</th> 
     <th scope="col">2000</th> 
     <th scope="col">2002</th> 
     <th scope="col">2007</th> 
    </tr> 
</htead> 
<tbody> 
    <tr> 
     <th scope="row">Indicator 1</th> 
     <td>3.0</td> 
     <td>11.0</td> 
     <td>7.8</td> 
     <td>4.0</td> 
     <td>4.7</td> 
    </tr> 
    <tr> 
     <th scope="row">Indicator 2</th> 
     <td>9.0</td> 
     <td>23.4</td> 
     <td>19.5</td> 
     <td>9.4</td> 
     <td>9.1</td> 
    </tr> 
    <tr> 
     <th scope="row">Indicator 3</th> 
     <td>18.7</td> 
     <td>32.0</td> 
     <td>30.0</td> 
     <td>20.1</td> 
     <td>21.8</td> 
    </tr> 
</tbody> 

參考：Use the th element to specify row and column headers in data tables | 456 Berea St