アクセシブルなテーブル/HTML基礎講座

テーブルを単なる表としてでなく、ページのレイアウトとして使うことが多くあります。実際に多くの Webサイトで採用されております。

しかしながら、W3C では、レイアウトを表現するためにテーブルを使うのは好ましくないとされています。その最大の理由は、非視覚系ブラウザ、特に音声ブラウザではテーブルのレンダリングが大変困難だからです。

■ テーブルの性質

例えば以下の表組を見てください。視覚系ブラウザでレンダリングされれば、その内容を直感的に理解することが可能です。

氏名	国語	数学	英語	歴史	小計	平均点	備考
田中さん	60点	65点	73点	40点	238点	59.5点	追試
鈴木さん	84点	46点	90点	68点	288点	72点	合格
中村さん	48点	82点	55点	50点	235点	58.8点	追試
ばんばん	24点	30点	25点	5点	79点	19.8点	落第
平均点	54点	56点	60点	41点	210点	52.5点	－

例えば、鈴木さんの「歴史」の試験結果が「68点」であることは、視覚系ブラウザならば一目瞭然です。しかし、音声ブラウザでは、その「68点」が何を意味しているのかを判断することができません。視覚系ブラウザのように直感的にテーブルを読み取れないためです。

さて、テーブルには、以下のような性質があり、このことが Web制作者の悩みの点でもあります。

テーブルは、データがすべて読み込まれてからレンダリングを開始する。
テーブルは、基本的に左から右方向で解釈される。
テーブルセルには、他のブロックレベル要素を配置することができる。
テーブルの文字の大きさや色は、DTDによって継承されない場合がある。

こうしたテーブルの性質を十分考慮して上で、表現するコンテンツがテーブルを利用するか否かを判断してください。なるべくならテーブルを多用したくないものですが、場合によっては重宝する要素です。

(一部の視覚系ブラウザでは、データ読み込み中でもテーブルのレンダリングを開始します。ただし、最も普及している MSIE はこの機能はありません。)

PageTop

■ アクセシブルなテーブル

W3Cが Web制作者に強く求めているアクセシビリティについては、関連ドキュメントの「WAI：Web Accessibility Initiative」を参照していただければお分かりいただけると思いますが、ここでは閲覧環境に依存しないアクセシブルなテーブルの作成について解説します。

先ほど説明したとおり、音声ブラウザでは各セルのデータが何を意味しているのか、どの見出しセルと関連しているのかを明確にすることで、テーブルのアクセシビリティを構築することができます。

◆ ヘッダセルに適用する属性

ヘッダセルとは、表組の見出しとなるもので、th要素によって定義されます。この見出しとそれに関連付けるための属性が用意されています。

属性	説明
abbr	ヘッダセルの概要を示す
scope	そのセルがどの方向に関連するかを指定する
axis	関連するデータセルに持たせる分類名を指定する
id	関連するデータセルに持たせる識別子を指定するを示す

◆ abbr属性

Web標準化を制定する W3C では、アクセシビリティの一環から、見出しセルを定義する th要素に、その概要をテキストベースで示すための abbr属性を設けるように求めています。

一般的な視覚系ブラウザでは、th要素はセンタリングされ、その文字が強調されるので、それが見出しと理解することができますが、音声ブラウザでは「見出し」として理解できるようなことは、何もしません。

また、見出しそのものの内容が直感的に理解できないこともあり、補足的な説明文を設定することが望まれています。

abbr属性を使った構文は以下のとおりです。

<th abbr="受験者">氏名</th>

こうすることで、音声ブラウザは「受験者氏名」と発声して見出しに示される補足的な内容と共に、視覚障害を持った閲覧者が理解できるようになります。

◆ scope属性

scope属性について解説すると、以下の図のように見出しの関連性の方向付けを行います。

scope属性は、見出しと関連する表の横列の行や、あるいは縦方向の列に対してその方向を指定し関連付けるようにします。具体的には、以下の値で指定することになります。

scope属性の値

col ---- 下方向への関連付けを行う
row ---- 右方向への関連付けを行う
colgroup グループ化されたセルの下方向に関連付けを行う
rowgroup グループ化されたセルの右方向に関連付けを行う

scope属性を使った構文は以下のとおりです。

<tr><th scope="col">氏名</th>　下方向に関連付けている

この構文では、「氏名」という見出しが、その下方向に伸びるセル全般に関連付けられます。つまり、「田中さん」や「鈴木さん」というデータが「氏名」という見出しと関連付けられることによって、音声ブラウザでも各データがどのような意味を持つのかを明示的に示すことができます。

◆ axis属性と id属性

複数の見出しを使った多次元テーブルでは、音声ブラウザはまったく理解することができません。例えば、以下のような表組の場合、データとして示されるそれぞれの得点の意味が、まったく理解できないのです。

期末試験成績一覧表
氏名	英語		国語
氏名		前年平均点	今年平均点	前年平均点	今年平均点
田中さん	65.8点	63.5点	54.1点	55.7点
鈴木さん	48.2点	51.1点	37.9点	43.3点

これを分かりやすく図で解説すると、次のような次元で構成されています。

多次元に分けた票を個別に表示している図

複数の見出しによる多次元的なテーブルを構築する際に、各見出しとデータを関連付けるための属性です。axis属性の値には「分類名」を設定し、データセルから対応する軸を参照します。

id属性では識別子を設定し、データセルに headers属性を使って id属性と関連付けます。

左の図は、見出しとなっている「科目」、「各年の平均点」、「名前」が見出しとなっています。それらの見出しを axis属性、及び id属性で関連付けています。

axis属性を使った具体的な構文は以下のとおりです。

見出しセル (th要素)
<th abbr="受験者" axis="名前" id="name">氏名</th>
<th abbr="受験科目" axis="英語" id="english">英語</th>
<th abbr="2003" axis="前年" id="last">前年平均点</th>

<th abbr="名前" id="tanaka" headers="name">田中さん</th>

データセル (td要素)
<th abbr="名前" headers="name english last tanaka">65.8点</th>

この構文が示すとおり、「68.5点」というデータは、「田中さん」の「2003年」の「英語」の受験結果であることが読み取れます。

■ テーブルで作るレイアウト

ここまで説明してきたように、視覚系ブラウザはテーブルを正しく解釈するという点では、大変苦手です。それ故、アクセシビリティを実現する新たな新機能をフルに活用して、環境に依存しない Webページの作成が望まれるわけです。

ページ全体をテーブルで囲んでレイアウトするという手法は、大手商用サイトから、個人ベースのホームページで非常に多く利用されています。

しかし、テーブルはそのデータの全部を受信が完了しないと何も表示されず、画面は真っ白なままです。複数の入れ子を持つような巨大なテーブルで、何枚もの画像などが埋め込まれた場合には、受信してからレンダリングを開始するまでかなりの時間が必要になります。

つまり、テーブルに含まれる列の数やセルの横幅などを解釈する上で、すべてのデータをブラウザに読み込ませ、レイアウトを整えるまでの時間が必要なのです。

真っ白な画面のままで待たされる閲覧者のことを考えると、そのページの内容に関して、最初に何らかの説明があったほうがストレスが少なくなるでしょう。

テーブルの持つ性質を十分に考慮して、どのような環境でも最適化されるようなテーブルの「設計」を考えるように心がけましょう。

初版公開日 2004年2月28日最新更新日 2004年6月19日