空でない <td> 大きな <table> 要素には、関連するテーブル ヘッダーが必要です
修正方法
この問題を解決するには、大きなテーブル内の空でない各データ セルに1つ以上のテーブル ヘッダーがあることを確認してください。スクリーン リーダーのユーザーが表形式のデータを理解できるようにするには、すべての表データ セル (td
) に表ヘッダーが必要です。
注: テーブルの幅と高さが3セル以上ある場合、そのテーブルは大きいとみなされます。
例:シンプルなデータテーブルと <th scope="col">
と <th scope="row">
テーブルセルをヘッダーセルとしてマークアップするには、 <td>
を <th>
に変更します。 この例のテーブルに対してこれを行うと、一番上の行のテキストが太字になり、中央揃えになることがわかります。
名前 | 1マイル | 5キロメートル | 10キロメートル |
---|---|---|---|
メアリー | 8:32 | 28:04 | 1:01:16 |
ベッツィ | 7:43 | 26:47 | 55:38 |
マット | 7:55 | 27:29 | 57:04 |
トッド | 7:01 | 24:21 | 50:35 |
HTMLコード
<table class="data">
<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>
注: テーブルの境界線、フォント、余白、背景などの視覚的な側面は、CSSを使用して定義できます。
例: id
+ headers
を含む複雑なテーブル
複雑なテーブルでは、ヘッダー セルをデータ セルに関連付ける id
+ headers
メソッドが役立ちます。この方法は、すべてのセルに各セルの行と列の ID をマークアップする必要があるため、時間がかかります。
可能であれば、複雑な表を一連のより単純な表に分割できるようにデータの表示を計画すると、より簡単なオプションになる場合があります。これらの表は、一般のユーザーにとっても役立つかもしれません。
次の例では、ヘッダーの scope
属性が id
属性に置き換えられています。すべてのデータセルには headers
属性が含まれています。headers
属性は、関連する id
ごとに、それぞれをスペースで区切った headers
値のリストを取ることができます。たとえば、2行目の2番目のセルの値は headers
「mary 1m」で、このセルが2つのヘッダー(「mary」の行ヘッダー セルと「1m」の列ヘッダー セル)に関連付けられていることを示します。
女性 | 男性 | |||
---|---|---|---|---|
メアリー | ベッツィ | マット | トッド | |
1マイル | 8:32 | 7:43 | 7:55 | 7:01 |
5km | 28:04 | 26:47 | 27:29 | 24:21 |
10キロメートル | 1:01:16 | 55:38 | 57:04 | 50:35 |
HTMLコード
<table class="data complex" border="1">
<caption>
Example 2 (column group headers):
</caption>
<tr>
<td rowspan="2"><span class="offscreen">empty</span></td>
<th colspan="2" id="females2">Females</th>
<th colspan="2" id="males2">Males</th>
</tr>
<tr>
<th width="40" id="mary2">Mary</th>
<th width="35" id="betsy2">Betsy</th>
<th width="42" id="matt2">Matt</th>
<th width="42" id="todd2">Todd</th>
</tr>
<tr>
<th width="39" id="mile1_2">1 mile</th>
<td headers="females2 mary2 mile1_2">8:32</td>
<td headers="females2 betsy2 mile1_2">7:43</td>
<td headers="males2 matt2 mile1_2">7:55</td>
<td headers="males2 todd2 mile1_2">7:01</td>
</tr>
<tr>
<th id="km5_2">5 km</th>
<td headers="females2 mary2 km5_2">28:04</td>
<td headers="females2 betsy2 km5_2">26:47</td>
<td headers="males2 matt2 km5_2">27:29</td>
<td headers="males2 todd2 km5_2">24:21</td>
</tr>
<tr>
<th id="km10_2">10 km</th>
<td headers="females2 mary2 km10_2">1:01:16</td>
<td headers="females2 betsy2 km10_2">55:38</td>
<td headers="males2 matt2 km10_2">57:04</td>
<td headers="males2 todd2 km10_2">50:35</td>
</tr>gt;
このメソッドは、データ セルとヘッダー セルの間に明示的な関連付けを作成します。手作業でマークアップするのは面倒ですが、このアプローチでは、データベースからのデータのテーブルに対してサーバー側スクリプト言語 (PHP、.net、JSP、Pythonなど) を使用してプログラムするのは比較的簡単です。
注: 対象のスクリーンリーダーとブラウザで id
+ headers
メソッドの問題を確認してください。
一部のスクリーン リーダーとブラウザーの組み合わせでは、id + headersメソッドを使用してテーブル ヘッダーを読み取る機能に問題があります。一部のバージョンでは、データセルとヘッダーの関連付けを間違って読み取ることさえあります。対象のスクリーン リーダーとブラウザーの組み合わせの互換性を必ず確認してください。
なぜ重要なのか
スクリーン リーダーには、テーブルを読み上げるための特別な方法があります。テーブルが適切にマークアップされていない場合、スクリーン リーダーの出力が混乱したり不正確になったりする可能性があります。
テーブルが意味的にマークアップされておらず、正しいヘッダー構造がない場合、スクリーン リーダーのユーザーはセルとその内容の関係を視覚的に正しく認識できません。
ルールの説明
データ テーブルのマークアップは面倒でわかりにくいです。テーブルは、意味的に正しいヘッダー構造でマークアップされる必要があります。スクリーン リーダーにはテーブル ナビゲーションを容易にする機能がありますが、これらの機能が正しく動作するにはテーブルを正確にマークアップする必要があります。
仕組みについて (簡単に言うと)
データ テーブルが意味的にマークアップされ、正しいヘッダー構造を持っていることを確認します。