headers属性を使用する<table>要素内のすべてのセルは、同じ<table>の他のセルのみを参照する必要があります。

問題を修正するには、テーブル内の headers を使用している各セルが、scope 属性値を tr 要素内の 各 th 要素に使用することで同じテーブル内の他のセルを参照していることを確認します。このルールは、ヘッダー列と行に対する参照が特定の td 要素に関連していることを確認します。

scope 属性はブラウザーとスクリーン・リーダーに列以下のすべてが上部のヘッダーに関連していること、そして行ヘッダーの右側にあるすべてがそのヘッダーに関連していることを伝えます。

scope 属性を次のテーブルに適用した場合のマークアップはこのようになります:

<table>
  <caption><strong>Greensprings Running Club Personal Bests</strong></caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">1 mile</th>
      <th scope="col">5 km</th>
      <th scope="col">10 km</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Mary</th>
      <td>8:32</td>
      <td>28:04</td>
      <td>1:01:16</td>
    </tr>

    <tr>
      <th scope="row">Betsy</th>
      <td>7:43</td>
      <td>26:47</td>
      <td>55:38</td>
    </tr>

    <tr>
      <th scope="row">Matt</th>
      <td>7:55</td>
      <td>27:29</td>
      <td>57:04</td>
    </tr>

    <tr>
      <th scope="row">Todd</th>
      <td>7:01</td>
      <td>24:21</td>
      <td>50:35</td>
    </tr>
  </tbody>

</table>

データテーブル内で、データセルと1つもしくはそれ以上のヘッダーセルを関連付けるための特定の例については、Using id and headers attributes to associate data cells with header cells in data tables をご参照ください。

Name、1 mile、5 km そして 10 km という上部のヘッダー、Mary、Betsy、Matt そして Todd という行ヘッダーがすべて th 要素でマークアップされていることに注意してください。また、これらの各ヘッダーセルは列ヘッダーか行ヘッダーかに応じて col または row という scope 属性値を指定されています。

ヘッダーセルとデータセルを関連づけるもう1つの方法は、scope 属性の colgroup と rowgroup 値を使用する方法です。このマークアップのテクニックは、複数の列と行にまたがるヘッダーを指定するために使用します。Mozilla's Learn HTML Developer Docs にある次の表を見てみましょう:

<table>
  <caption>Items Sold August 2016</caption>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <th colspan="3" scope="colgroup">Clothes</th>
      <th colspan="2" scope="colgroup">Accessories</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <th scope="col">Trousers</th>
      <th scope="col">Skirts</th>
      <th scope="col">Dresses</th>
      <th scope="col">Bracelets</th>
      <th scope="col">Rings</th>
    </tr>
    <tr>
      <th rowspan="3" scope="rowgroup">Belgium</th>
      <th scope="row">Antwerp</th>
      <td>56</td>
      <td>22</td>
      <td>43</td>
      <td>72</td>
      <td>23</td>
    </tr>
    <tr>
      <th scope="row">Gent</th>
      <td>46</td>
      <td>18</td>
      <td>50</td>
      <td>61</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Brussels</th>
      <td>51</td>
      <td>27</td>
      <td>38</td>
      <td>69</td>
      <td>28</td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">The Netherlands</th>
      <th scope="row">Amsterdam</th>
      <td>89</td>
      <td>34</td>
      <td>69</td>
      <td>85</td>
      <td>38</td>
    </tr>
    <tr>
      <th scope="row">Utrecht</th>
      <td>80</td>
      <td>12</td>
      <td>43</td>
      <td>36</td>
      <td>19</td>
    </tr>
  </tbody>
</table>