表見出しのスコープ

Silktide は、すべての表見出しセルが、それが何に対する見出しなのか（列、行、またはそのグループ）を宣言しているかチェックします。これにより、は各見出しがどのセルに適用されるかを把握できます。

では、<th> 見出しセルは、列、行、または列や行のグループの見出しにできます。scope 属性はその対象を示し、表の構造に関する曖昧さをなくします。

<!-- 問題: 「Name」が列の見出しなのか行の見出しなのかを示すものがない -->
<th>Name</th>

<!-- 修正後: scope によって明示されている -->
<th scope="col">Name</th>

重要な理由

は、利用者が表内を移動するとき、各セルに関連する見出しを読み上げます。そのためには、各見出しがどのセルを対象とするかを把握する必要があります。列見出しと行見出しの両方がある表や、セルのグループにまたがる見出しがある表では、スコープのない見出しがあると、スクリーンリーダーは推測を強いられます。そして推測を誤ると、値が誤った文脈で読み上げられたり、文脈なしで読み上げられたりします。

修正方法

すべての <th> セルに scope 属性を追加します。有効な値は次のとおりです。

col - その下にある列に見出しを適用します。
row - その横にある行に見出しを適用します。
colgroup - 列のグループに見出しを適用します。
rowgroup - 行のグループに見出しを適用します。

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <th scope="row">Bob</th>
    <td>35</td>
  </tr>
</table>

Silktide によるテスト方法

各ページにあるすべての <th> 見出しセルを見つけます。
scope 属性がないか、row、col、rowgroup、colgroup のいずれでもないものを報告します。

トラブルシューティング

シンプルな表ならスコープがなくても問題なく機能します

見出しが最上段の1行だけにある表では、通常、ブラウザーやスクリーンリーダーが構造を推測できます。それでも、明示的なスコープを指定すれば曖昧さをすべてなくせます。コストもかからず、後から表が複雑になった場合にも役立つため、Silktide はすべての見出しセルにスコープを指定するよう求めています。特定の表はこのままで問題ないと判断した場合は、そのをできます。