テーブルの見出し

Silktide は、データを表示するテーブルに見出しセルが定義されているかをチェックします。見出しは、を使用する人に各行と各列の意味を伝えます。これは、視覚のある読者がテーブルのレイアウトから推測している情報です。

姓と都市のテーブルを考えてみましょう。見出し行がないと、「Washington」のような値が姓なのか都市なのか分かりません。列にラベルを付けることで、初めて意味が明確になります。

<!-- 問題: 見出しが通常のセルなので、意味を持たない -->
<table>
  <tr>
    <td>Surname</td>
    <td>City</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

重要な理由

は、テーブル内を一度に1つのセルずつ移動します。見出しが定義されていると、各値に関連する見出しを読み上げることができるため、「London」は「City: London」として読み上げられます。見出しがない場合、聞き手は値だけが連続する状態で聞くことになり、それらを理解するためにテーブルのレイアウトを記憶しなければなりません。大きなテーブルでは、これは実質的に不可能です。

先頭行を太字にしたり、別の色にしたりするだけでは不十分です。視覚的なスタイルは支援技術に意味を伝えません。意味を持つのは基盤となるだけです。

修正方法

各見出しセルを <td> から <th> に変更し、それが列または行のどちらの見出しであるかを示す scope 属性を追加します。

<!-- 修正後: 見出しが実際の見出しセルになっている -->
<table>
  <tr>
    <th scope="col">Surname</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

テーブルがデータを表示するものではなく、ページを視覚的に配置するためだけに使用されている場合は、<table> 要素に role="presentation" を追加して、支援技術がその構造を無視するようにします。さらに良い方法は、レイアウト用のテーブルを CSS に置き換えることです。現代のウェブデザインでは、レイアウト用テーブルは強く推奨されていません。

Silktide によるチェック方法

各ページにあるすべてのテーブルを見つけます。
role="presentation" が付いたテーブルを除外します。
データテーブルである可能性が低い、行が1つだけ、または列が1つだけのテーブルを除外します。
<th> 見出しセルを1つも含まない、残りの各テーブルを報告します。

トラブルシューティング

テーブルに見出しがありますが、スタイルを設定した `<td>` セルです

見出しのように見えるだけのセルは、見出しとして扱われません。支援技術はフォントや色を認識できないため、セルを <th> に変換してください。

レイアウト用テーブルが指摘されます

Silktide がレイアウト用テーブルを除外するのは、role="presentation" が明示されている場合だけです。テーブルが実際に装飾目的で使用されている場合は、その属性を追加するか、テーブルを CSS レイアウトに置き換えてください。