データセルまたはヘッダーセルは、データテーブルにキャプションを付ける目的で使用しないでください。
修正方法
この問題を解決するには、テーブルがキャプションを視覚的に示すための実際の caption 要素を使用し、 colspan 要素を含むセルを使用しないことを確認します。
スクリーンリーダーのユーザーが表形式のデータを理解できるようにするには、画面上のタイトルに caption 要素を使用します。
例: caption 要素を持つシンプルなデータテーブル
<table class="data">
<caption>
Greensprings Running Club Personal Bests
</caption>
Greensprings Running Club Personal Bests
</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>
なぜ重要なのか
スクリーンリーダーには、テーブルを読み上げるための特別な方法があります。テーブルが適切にマークアップされていない場合、スクリーンリーダーの出力が混乱したり不正確になったりする可能性があります。
テーブルがキャプションを視覚的に示すための実際のキャプション要素でマークアップされず、代わりにセル上で colspan 要素を使用している場合、スクリーンリーダーのユーザーはテーブルの目的を視覚的に正しく認識できません。
ルールの説明
データテーブルのマークアップは面倒でわかりにくいです。スクリーンリーダーにはテーブルナビゲーションを容易にする機能がいくつかありますが、これらの機能が正しく動作するにはテーブルを正確にマークアップする必要があります。一部の表では、実際のキャプション要素を使用する代わりに、キャプションを視覚的に示すための特定の colspan 要素を含むセルを使用します。
仕組みについて (簡単に言うと)
データテーブルが、キャプションを視覚的に示すために特定の colspan 要素を使用するテーブルセルでマークアップされていることを確認します。
