データ セルまたはヘッダー セルは、データ テーブルにキャプションを付ける目的で使用しないでください。
修正方法
この問題を解決するには、テーブルがキャプションを視覚的に示すための実際の 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
要素を使用するテーブル セルでマークアップされていることを確認します。