テーブルをレイアウト目的で使う場合は構造要素を含まない
表として使う場合は構造要素を入れるようにする
TABLE要素を使う場合、レイアウト調整の為に使用する場合は、TH や CAPTION、SUMMARY 属性は使用しないでください。また、表として使用する場合(レイアウト調整以外の場合)は、TH や SUMMARY 属性を使って見出しを識別できるようにしてください。
実装方法
(レイアウト調整目的の場合)
・TH、CAPTION、SUMMARY 属性は使用しない
(レイアウト調整目的以外の場合)
・TH、CAPTION、SUMMARY 属性を使用して、表見出し、表全体の説明を挿入する
レイアウト目的でTABLE要素を使用するのは是か?非か?
以前はレイアウト目的での使用は良くない、レイアウトは全て CSS で定義するように、と指示されているガイドラインが主流でしたが、WCAG2.0 では、レイアウト目的での使用を認めています。ただし、読み上げツールの邪魔にならないように、見出しや説明は一切入れてはいけないという基準になっています。CSS への変更が工数が大きくなる場合は、TH や SUMMARY を外して対応するようにしてください。
TH属性は重要
表見出し(TH属性)は行に付属する場合もあれば、列に付属する場合もありますが、表として使用する場合には必ず TH属性を使用して見出しを入れるようにしてください。これは、視覚的にというよりは、読み上げツールが見出しとして認識する為に必要です。特に行や列が多い表では、読み上げツールが何処を読んでいるのか、ユーザーは把握しづらいです。行数・列数に気を配りながら、見出しも必ず入れて、目の見えない方にも分かり易くなるように意識しながら作ってください。
レイアウト目的とはいえ
「TABLE要素の中にまたTABLE要素」「TABLE要素の中でのインデント(P)」などは文法的に間違っているので良くありません。レイアウトの意味を理解して使用するようにしてください。
重要度
★★★(必須)
ガイドライン
JIS X 8341-3:2010 7.1.3.1 A
WCAG 2.0 checkpoint 1.3.1 A
WCAG 1.0 checkpoint 5.1 (レイアウト目的以外の場合)
以上