このページの本文へ移動

富士通ウェブ・アクセシビリティ指針

28. 表(テーブル)は、行と列の関係や表示順序(セル単位、左上から右下)を考慮するなどし、内容を把握しやすくする。

優先度1  仕様に関する指針 <テーブル>  |   設計・制作・運営工程

解説

大きすぎる表は一覧性が悪くなります。また、表の入れ子やセルの結合を多用すると、音声ブラウザで意図したとおりに読み上げられないことがあります。

音声ブラウザで表を参照した場合、音声ブラウザは、表を左上から右下に 1セルづつ読み上げます。そのため、行や列の関係がわかりにくくなる場合があります。

また、表に適切なタグを指定していない場合、音声ブラウザは、各行・各列の見出し項目を読み上げず、表の内容を正しく把握できない場合があります。
さらに、表の上部に表題がない場合、音声ブラウザの利用者は、読み上げ中のテキストが表であることを把握できない場合があります。

事例と実装

  • セル数の多い大きな表は避け、小さな表にすることが望ましい。
  • 音声ブラウザの読み上げ順序を考慮して、テーブルを作成する。
  • 行や列の見出し項目名は、<th>タグを使って指定する( <td>タグを使用しない)。
  • セルの結合は、必要最小限とし、複雑に入り組んだ表にしないことが望ましい。
  • 複雑な表には、scope属性、id属性、headers属性を使用することが望ましい。
  • 複雑な表には、テキストによる解説を記述する。
  • 数値を表示するときは、視覚的に煩雑にならない範囲で、各セルに単位を記述する。
  • <caption>タグで、わかりやすい表題を指定する(レイアウトのためのテーブルには表題は不要)。

悪い例: 読み上げの順序と情報の方向が一致しないため、音声ブラウザの利用者にとって内容を把握しづらい

対応するJIS:5.2c(必須)