ページ制作のアクセシビリティ指針
優先度1



解説

Table要素は本来、表データを表すものですが、視覚的なレイアウトにおける段組みやインデントといった目的のために使用されることがこれまで慣用的に行われてきました。
音声ブラウザ等では、基本的にHTMLのソースを記述順に読み上げるため、意図しない読み上げ順で再生されてしまうことがあります。
また、これらのソフトがレイアウトのための表をデータのための表と誤認識してしまった場合、情報が理解できなくなる可能性があります。


実例

  • レイアウト調整等の見栄えのための表を用いる変わりに、CSS(スタイルシート)を用いてレイアウトします。
  • 見栄えのために表(table)を使う場合は、表の構造を表す要素(th,caption,thead,tbody,tfoot等)を使わないようにします。
  • 見栄えのために表(table)を使う場合は、セルの読み上げ順に配慮する。
  • 見栄えのためのtable要素のsummary属性(要約)には""を指定します(summary="")。

悪い例:

セルの順に読み上げると意味が通じなくなります。

悪い例の画面イメージ。テーブルを使い、2つの見出しの下にそれぞれの項目を掲載していますが、読み上げ順としては2つの見出しを読みあげた後、全ての項目を読みあげてしまいます。

良い例:

レイアウトにはCSSを使い、tableを使わないようにします。tableを使う場合は、読み上げ順に気をつけます。

良い例のイメージ。見出しを読んだ後、その内容を読み、次の見出しへ進む例。

参考:

リスト表示をさせる場合はtable要素を使わず、本来の構造(役割)を示す要素(この場合は順不同リスト[ul,li])を用いてマークアップします。



関連するJISの項目

5.2 d (推奨)




アクセシビリティガイドライン トップ

このページの先頭へ戻る