スコープ属性は正しく使用する必要があります

HTML5を使用している場合は、 scope 属性が th 要素でのみ使用されていることを確認してください。HTML 4を使用している場合は、 scope 属性が th と tdでのみ使用されていることを確認してください。

最後に、スコープの値が row または col のいずれかであり、それ以外ではないことを確認します。

scope 属性値を持たないすべての th 要素に追加します。

複雑ではないデータ テーブル内のヘッダー セルとデータ セルの関係を伝えるために必要なマークアップは、 scope 属性を使用して実現できます。scope 属性は、列の下のすべてが上部のヘッダーに関連し、行ヘッダーの右側のすべてがそのヘッダーに関連することをブラウザーとスクリーンリーダーに伝えます。

マークアップ内のテーブルにスコープ属性を適用すると、次のようになります。

良い例

<table>
<caption><strong>Greensprings Running Club Personal Bests</strong></caption>
  <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>
    
  <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>
</table>

Name、1マイル、5 km、10 kmの上部ヘッダーはすべて th 要素でマークアップされており、Mary、Betsy、Matt、Toddの行ヘッダーも同様であることに注意してください。これらの各ヘッダー セルには、列ヘッダー セルか行ヘッダー セルかに応じて、 scope 属性値 col または row も与えられています。