普段はあまり意識しないことも多いかもしれませんが、アクセシブルなテ
ーブルについて。
そもそもはthタグのabbr属性の記述について考えましたが、せっかくなの
ですこしまとめてみる。
W3Cで推奨されるアクセシビリティについてはWAI(Web Accessibility Ini
tiative)を参照いただくこととして、音声ブラウザを意識したtableタグ
の記述について理解します。
tableタグ内のアクセシビリティを良好にするには、音声ブラウザから各
セルの項目について明示することで可能となります。
ヘッダセルに各属性を明記することで、テーブルの表組みの見出しth要素
の定義をおこないます。
ヘッドセルに指定できる属性は以下のようになります。
■th要素に指定できるヘッドセル属性
[1]abbr ヘッダセルの項目名・概要を意味する
[2]scope セル項目の縦横の関連付け方向の指定
[3]axis 多次元的な項目に対して、各項目の大分類を指定する
[4]id 多次元的な項目で大分類の中の子要素、識別子を指定する
[1] abbr属性
項目のヘッダセル、th要素にabbr要素(abbreviation)を記述することでブ
ラウザは認識することができます。ただし音声ブラウザは読み上げること
で視覚障害者へ項目名を伝えますが、音声ブラウザ自体は見出しとし認識
はしません。
また、項目の見出しだけではなく、補足説明などの設定も好ましいようで
す。IE6ではこの属性は未知の要素とされ、サポートされていません。
[2] scope属性
scope属性はヘッダセルのth要素、見出しの関連方向を指定します
見出しと関連するテーブル表組みの縦横の列や行についての関連付けを意
味します。
【scope属性の属性値】
・col 縦方向、下方列方向の関連付け
・row 横方向、横向き行方向への関連付けを行う
・colgroup グループ化したセルの縦方向、下列方向への関連付け
・rowgroup グループ化したセルの横方向、行への関連付け
[3] axis属性・id属性
複数の多次元の見出しが存在するテーブルは、音声ブラウザはまったく認
識しなくなります。
そのためaxis属性とid属性を利用します。
axis属性で分類名を指定し、idで各分類の識別子とします。abbr属性も併
用しますが、イメージ的にはabbr > axis > idとういう感じにth要素がそ
れぞれ入れ子構造になります。
<th abbr=”要素” axis=”分類” id=”属性値”>