XHTML/CSS・トップ | アクセシビリティのヒント・目次

●セルを関連付ける

 今だにWebページをtable要素を使って、レイアウトデザインされている方を見受けられます。確かに見栄えは良いし、文字でも画像でも配置しやすいのでしょうが、HTMLから見栄えに関する要素を取り除き、HTMLには基本的な構造だけをシンプルに記述し、見栄えに関するスタイルはCSSのスタイルシートで定義するというのが主流、常識になっています。なによりも、table要素で画面構成されたWebページは文書全体の構造が正しく伝わらない可能性があるばかりか、table要素そのものが正しく伝わらない可能性があります。ユーザーの中にはスクリーンリーダーなどの視覚障害者用のソフトウエアに頼るユーザーもいれば、キーボート操作のみに頼る障害者もいます。点字環境、音声環境、携帯電話用ブラウザとユーザーのPC環境、ブラウザ環境は実にさまざまです。そういったソフトウエアは種類もそれなりにあり、どのソフトウエア、インターフェース、端末機器も同じように動作してくれれば問題ないと思うのですが残念ながら個々のソフトウエアあるいは端末機器によって動作しないなどの問題があるのも事実です。HTMLドキュメントの情報が少しでも正しく伝わるよう、ここでは、axis、headers、scopeの表関係の属性を使ったヘッダセルとデータセルを関連付ける方法を中心に解説してみたいと思います。

表関係の読み上げ関連の属性値一覧表
属性名 補足
abbr セルの内容の簡略文 th、td要素に指定
axis セルのカテゴリー名 主に、見出しセルであるth要素に指定
headers 関連する見出しセルのID名を記載 セル要素にid属性を指定。ID名は半角スペースで区切り、複数指定可。
summary 表の概要 table要素に指定
scope 読み上げるセルの方向性 row(右側のセル)、col(下側のセル)などの値を指定

【解説】

abbr="セルの内容を簡略したもの"
 通常は、ヘッダセルに対して指定します。abbrの値には、ヘッダセルの内容を簡略化したものを記載する必要があります。各セルを確実に読み上げる読み上げ関連のソフトが何回も読み上げるときにこの属性を使って、簡略化した文章を読み上げさせたいときに利用することができます。

axis="セルのカテゴリー名"
 通常は、ヘッダセルに対してカテゴリー名を指定します。 カンマ( , )で区切ることにより、複数指定することもできます。簡略化した内容の文を読み上げさせるという点では、abbr属性と似ていますが、異なるのはデータセルの情報を参照したユーザーがヘッダセルに付けられたカテゴリーを参照したいとき、あるいは参照できるようにするために使われます。従って、headers属性かscope属性によってデータセルの内容がカテゴリー名と関連付けられている必要があります。

headers="関連するヘッダセルのID名"
 セルに関連付けられているヘッダセルのID名を記載します。尚、ID名は id属性の値の形でなければなりません。同じID名を持った id属性はひとつのHTMLドキュメントの1ヶ所しか使えませんから同じページに表が複数あるときは id属性がふたつ以上記載しないよう注意する必要があります。headersの値は半角スペースを入れることにより複数指定することができます。

scope="セルの方向性"
 この属性は、ヘッダセルのカテゴリー名を参照するデータセルのグループを指定します。headers属性の代わりに用いてもよく、単純な表に向いています。指定できる値は次の4つです。

row: 指定したヘッダセルから行右側のすべてのセル
col: 指定したヘッダセルから列下側のすべてのセル
rowgroup: 指定したヘッダセルから右側の同じ行グループ
colgroup: 指定したヘッダセルから下側の同じ列グループ
※rowgroupとcolgroup要素はXHTML Basic 1.0 DTDで使うことができません。

セル項目名
縦見出しセル1 縦見出しセル2 縦見出しセル3
横見出しセル1 縦データセル2、横データセル1 縦データセル3、横データセル1
横見出しセル2 縦データセル2、横データセル2 縦データセル3、横データセル2
横見出しセル3 縦データセル2、横データセル3 縦データセル3、横データセル3
headers属性値の関連付けの例
id="a1" id="a2" id="a3"
id="b1" headers="a1" headers="a2 b1" headers="a3 b1"
id="b2" headers="a1" headers="a2 b2" headers="a3 b2"
id="b3" headers="a1" headers="a2 b3" headers="a3 b3"

【ソースコード】

<table border="1" summary="表の要約を記載">
 <caption>セル項目名</caption>
  <tbody>
   <tr>
    <th id="a1" axis="見出しセルの分類名" scope="col" abbr="ヘッダセルの簡略文">縦見出しセル1</th>
    <th id="a2" axis="見出しセルの分類名" scope="col" abbr="ヘッダセルの簡略文">縦見出しセル2</th>
    <th id="a3" axis="見出しセルの分類名" scope="col" abbr="ヘッダセルの簡略文">縦見出しセル3</th>
   </tr>
   <tr>
    <th id="b1" headers="a1" scope="row" abbr="データセルの簡略文">横見出しセル1</th>
     <td headers="a2 b1">縦データセル2、横データセル1</td>
     <td headers="a3 b1">縦データセル3、横データセル1</td>
   </tr>
   <tr>
    <th id="b2" headers="a1" scope="row" abbr="データセルの簡略文">横見出しセル2</th>
    <td headers="a2 b2">縦データセル2、横データセル2</td>
    <td headers="a3 b2">縦データセル3、横データセル2</td>
   </tr>
   <tr>
    <th id="b3" headers="a1" scope="row" abbr="データセルの簡略文">横見出しセル3</th>
    <td headers="a2 b3">縦データセル2、横データセル3</td>
    <td headers="a3 b3">縦データセル3、横データセル3</td>
   </tr>
  </tbody>
</table>

【課題】

 スクリーンリーダーや音声ブラウザなど、音声読み上げ関連のソフトはいろいろありますが、"PC-Talker"というスクリーンリーダーは、summary属性、axis属性、abbr属性を読み上げることができません。また、headers属性の関連付けを無視し、ソースコードに記載された順番にセル内容を読み上げるようです。尚、上記の方法は実装するにあたり実際に動作するかどうか幾つかのソフトウエア、端末機器の環境で検証する必要があります。併せて、W3CのHTML4.01の仕様書などを参照にしてください。

■参考

表にsummary属性を付ける

XHTML/CSS・目次 | アクセシビリティのヒント・目次

Copyright (C) 2009 http://www.xml.vc/