3 x 3より大きいテーブル内の空でないすべての<td>要素には、関連付けられたテーブルヘッダーが必要です。
修正方法
問題を修正するには、大きなテーブルの空ではないセルそれぞれに一つかそれ以上のテーブルヘッダーが存在するようにします。スクリーン・リーダーのユーザーがテーブル形式のデータを理解できるようにするには、テーブル内のすべてのデータセル (td
) にテーブルヘッダーを持たせる必要があります。
注記: テーブルは横に三つかそれ以上のセル、縦に三つかそれ以上のセルがある場合、大きいとみなされます。
例: <th scope="col">
と <th scope="row">
を使用したシンプルなデータテーブル
テーブルのセルをヘッダーセルとしてマークアップするには、<td>
を <th>
に変更します。そうすると、この例では、テーブルの一番上の行のテキストが太字で中央揃えになることがわかります。
Name | 1 mile | 5 km | 10 km |
---|---|---|---|
Mary | 8:32 | 28:04 | 1:01:16 |
Betsy | 7:43 | 26:47 | 55:38 |
Matt | 7:55 | 27:29 | 57:04 |
Todd | 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
を用いたヘッダーセルとデータセルを関連付ける方法が役に立ちます。この方法では各セルの行と列を識別できるようすべてのセルをマークアップする必要があるため、時間がかかります。
可能な場合、複雑なテーブルを複数のシンプルなテーブルに分割できるような方法で表現されているデータを計画することがより簡単な選択肢です。これらのテーブルは一般的なユーザーにとってもより使いやすい可能性があります。
以下の例では、ヘッダーの scope
属性が id
属性に置き換えられています。すべてのデータセルには headers
属性が付与されています。headers
属性には、関連する headers
ごとに、それぞれスペースで区切られた id
値のリストを指定できます。例えば、2行目の二つ目のセルは "mary 1m" という headers
値を持っていて、"mary" という行ヘッダーセルと、"1m" という列ヘッダーセルの二つのヘッダーに関連づいていることを伝えています。
Females | Males | |||
---|---|---|---|---|
Mary | Betsy | Matt | Todd | |
1 mile | 8:32 | 7:43 | 7:55 | 7:01 |
5 km | 28:04 | 26:47 | 27:29 | 24:21 |
10 km | 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 など) でプログラムするのは比較的簡単です。
注意: VoiceOver の古いバージョンは id
+ headers
の方法をサポートしていませんでした
Mac OSX 10.10.2 までは、VoiceOver は id + headers の方法でテーブルヘッダーを読み上げる機能をサポートしていませんでした。一部のバージョンでは、データセルに対して誤ったヘッダーを読み上げることもありました。幸いなことに、現在の VoiceOver はデータとヘッダーの関係性を正しく読み上げます。
なぜ重要なのか
スクリーン・リーダーはテーブルを特定の方法で読み上げます。テーブルが正確にマークアップされていない場合、混乱させるような、あるいは不正確なスクリーン・リーダーの読み上げ内容になる可能性があります。
テーブルのマークアップがセマンティックではなく、ヘッダーの構造が正しくない場合、スクリーン・リーダーのユーザーはセルとそれらのコンテンツの関係性を正しく把握することができません。
ルールの説明
データテーブルのマークアップは長く複雑になりやすいです。テーブルは正しい見出し構造で、セマンティックにマークアップされなければなりません。スクリーン・リーダーにはテーブル移動を楽にする機能がありますが、これらの機能が正しく動作するには、テーブルは正しくマークアップされていなければなりません。
仕組みについて (簡単に言うと)
データテーブルがセマンティックにマークアップされていて、正しいヘッダー構造であることを確認します。