表ヘッダーのID
Silktideは、headers属性を使ってセルと見出しを関連付けている表をチェックします。このような表では、すべての見出しセルに固有のIDが必要です。IDがないと、関連付けが機能しません。
複雑な表、たとえば見出しが2階層になっている表や、複数の行にまたがるセルがある表では、セルと見出しの関係を位置だけから判断することはできません。では、headers属性を使ってこの問題を解決します。各データセルに、そのセルに適用される見出しセルのid値を指定します。ただし、すべての見出しセルに実際にidが設定されている必要があります。
<!-- 問題: 2つ目の見出しにidがないため、セルから参照できません -->
<table>
<tr>
<th id="name">Name</th>
<th>Score</th>
</tr>
<tr>
<td headers="name">Ada</td>
<td>98</td>
</tr>
</table>
重要な理由
表でheadersによる関連付けを使用すると、は各値の前に関連付けられた見出しを読み上げます。これにより、聞き手は複雑な表のどこにいるのかを把握できます。idのない見出しセルは参照できないため、その下にあるセルは文脈なしで読み上げられます。結果として、表が見えない人にとっては内容を推測するしかなくなります。
修正方法
- 表内のすべての
<th>見出しセルに、一意のidを設定します。 - 各データセルの
headers属性を更新し、そのセルに適用されるすべての見出しのIDを、スペースで区切って指定します。
<!-- 修正後: すべての見出しにidがあり、セルから参照しています -->
<table>
<tr>
<th id="name">Name</th>
<th id="score">Score</th>
</tr>
<tr>
<td headers="name">Ada</td>
<td headers="score">98</td>
</tr>
</table>
- 代わりに、表を簡素化することも検討してください。見出しが1行または1列だけの単純な表では、
headersによる関連付けは必要ありません。scope属性を持つ<th>セルだけで十分で、はるかに保守しやすくなります。
Silktideによるチェック方法
- 各ページにあるすべての表を探します。
- どのセルも
headers属性を使用していない表はスキップします。このチェックは、明示的な見出しの関連付けを使用している表にのみ適用されます。 - 残った表で、
id属性のないすべての<th>見出しセルを報告します。