ヘッダー

テーブルナビゲーションの主な支援の一つは、ヘッダーを適切に使用することです。正しく識別されてリンクされたヘッダーは、ユーザーがデータポイントをナビゲートするときに役立つコンテキストを提供します。

列または行ヘッダーはth要素を使用して識別されます。データセルはtd要素を使用して識別されます。

よくある悪い例は、td要素をヘッダーのようにスタイル設定することです（例：テキストを太字にして背景に陰影を追加するなど）。 thを使用しない限り、支援技術はセルをヘッダーとして認識せず、ユーザーがデータ内を移動するときにヘッダーとして読み上げられません。

最も単純な種類の表には、各列または各行に一つのヘッダーが含まれます（例1および2を参照）。このような表内のデータが自己記述的である場合や、表がそれほど大きくない場合は、ヘッダーをさらに識別する必要はありません。ユーザーはデータを理解できます。

複数の見出しや多数のデータ行があるなど、複雑な表の場合は、見出しの「範囲」を識別する必要があります。scope属性を追加すると、ヘッダーが現在の列または行に適用されるかどうかが支援技術に伝えられます。この属性を使用して、複数の列または行にヘッダーを適用することもできます。

場合によっては、表に複雑なヘッダーがあり、単純なスコープ宣言では不十分なことがあります。たとえば、セルのヘッダーが同じ列または行にない場合などです。このような場合、headers属性を使用すると、ヘッダーを構成する個々のセルを識別できます。この属性には、適用されるヘッダーセルのIDへの一つ以上の参照のリストが含まれます。

表構造

表は、thead（表ヘッダー）、tbody（表本体）、およびtfoot（表フッター）要素を使用して、行セットの目的をより適切に表すように構造化できます。

表にはthead要素を一つだけ組み込め、その要素は表の最初の行を含む要素でなければなりません。ヘッダー行をグループ化するためにthead要素を追加することは、セマンティックマークアップの優れた実践ですが、この要素は表のアクセシビリティには影響しません。この要素は主にユーザビリティ上の理由で存在しています。たとえば、表をスクロールしてもthead内の行は静的なままになるようにスクリプト化されることがよくあります。また、ブラウザーはtheadを使って表を印刷するときに見出しを繰り返すこともできます（つまり、表が複数の印刷ページに分割されている場合）。

ヘッダーの後には、一つ以上のtbody要素が続きます。各tbodyは、表の一つのセクションを表します。複数のtbody要素を使用すると、たとえば、各セクションに固有のヘッダーを設定できます。この方法により、このような表の読みやすさが向上するため、アクセシビリティが向上します。

最後に、表の最後にはtfoot要素を一つだけ配置できます。tfoot要素は列の概要を表す場所です。tfootを使用するとユーザーは各行を移動しなくてもこの情報を見つけることができます。なおこれは、脚注などの無関係なコンテンツを配置する場所ではありません（例 4を参照）。

略語

表のヘッダーが数語以上の長さの場合、データセルごとにヘッダーが繰り返される（訳注：支援技術によってセルの移動の度に長いヘッダーも読み上げられる）と、ユーザーの操作が遅くなる可能性があります。このような長い繰り返しを避けるために、abbr属性を使用して短いヘッダーを割り当てることができます。

<th … abbr="Total insurance">
   Total insurance coverage
   cost on per annum basis
</th>
<th … abbr="Total interest">
   Total interest payments
   for the covered period
</th>

短縮タイトルは、その下のセルをアナウンスするときに、ヘッダー全文の代わりに使用されます。

キャプションと概要

ユーザーが表の目的と内容の順序を理解できるようにするには、キャプションと概要を追加する必要があります。

キャプションは、表のタイトルに相当します。表に組み込める専用のcaption要素で提供することも、図表のキャプションなどの他の手段でも表現できます。キャプションとそのマークアップ方法の詳細については、「表のキャプション」ページを参照してください。

概要は、表の構造の説明を提供します。内容を見ることができないユーザーや、行間や列間で情報を追跡するのが難しいユーザーが、データのレイアウトを理解するのに役立ちます。概要の追加に関する詳細は、「表の概要」ページに記載されています。

スタイリング

表の構造を確保することは支援技術のユーザーにとって非常に重要ですが、表をアクセシビリティ対応にするために考慮すべきことはマークアップだけではありません。表のスタイル設定は、視力の弱いユーザーや色覚異常のユーザー、またディスレクシアなどの認知障害を持つユーザーにとっての表の読みやすさにも影響します。

表をスタイル設定する際に考慮すべき重要な事項は次のとおりです。

• ヘッダーセルは視覚的に区別するために網掛けされることが多いため、前景テキストとの十分なコントラストを確保することが重要です。
• データセルの外観をヘッダーと同じにしないでください。データセルの目的についてユーザーが混乱する可能性があります。
• ユーザーがデータを追跡できるように、セル内のデータの配置を一定にします（例：すべての数値データを右揃えにする）。
• 知覚障害のあるユーザーが視覚的に見ている場所を追跡しやすくするために、行の色を交互に変更したり、行を強調表示したりすることを検討してください。