テーブルの読み上げ方
現存する音声ブラウザによるテーブル読み上げは、必ずしも完璧なものではない。しかしそれはブラウザメーカが全面的に悪いのではないだろう。現状を取り巻くWebサイトを見る限り、このような仕様が限界かもしれない。良質なブラウザを期待する前に、テーブルを無茶苦茶に使い始めた我々の方が歩み寄るべきだ。そうすればブラウザメーカも安心してテーブルをより良く読み上げる事が出来る。
ここに、理想的なテーブルの“読み上げ方”を提示する。
- summary属性（無ければcaption要素）を読み上げ、ユーザにテーブル全体を読み上げるかどうか選択させる。
- caption要素 を読み上げる。
- thead要素 内の th要素 はこの時点では読み上げない。
- tbody要素 の tr要素 に差しかかった時点で、その列に存在する
scope="col"scope="row" の指定された th要素を 探す。 - th要素 を、見出しであることを分かりやすく読み上げる。
- td要素 を読み上げる前に、thead要素内の
scope="row"scope="col" が指定された該当する th要素 が存在した場合、そのabbr属性を読み上げる。 - abbr属性が存在しない場合は、見出しセルの内容を読み上げる。
- データセルにheaders属性が指定されている場合は、そちらの見出しセルのみを読み上げる。
- td要素を読み上げる。
- 次のセルに移動する。
- 最後にtfoot要素内を読み上げる。
言葉での説明だけでは分かりにくいので、簡単な表を基に読み上げ方の例を記す。
<table summary="当店メニューの価格をまとめた一覧表">
<caption>価格一覧</caption>
<thead>
<tr>
<th scope="col">商品名</th>
<th scope="col">標準価格</th>
<th scope="col" abbr="割引価格">特別割引価格</th>
</tr>
</thead>
<tfoot>
<tr>
<th id="biko">備考</th>
<td colspan="2" headers="biko">割引価格は会員のみ</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Aコース</th>
<td>3000円</td><td>2500円</td>
</tr>
<tr>
<th scope="row">Bコース</th>
<td>2000円</td><td>1800円</td>
</tr>
</tbody>
</table>- 「当店メニューの価格をまとめた一覧表」このテーブルを読み上げますか？
- 価格一覧
- Aコース（やや強めで休止を取って）
- 標準価格、3000円、割引価格、2500円
- Bコース（やや強めで休止を取って）
- 標準価格、2000円、割引価格、1800円
- 備考（やや強めで休止を取って）
- 割引価格は会員のみ
このように親切に読み上げられるようにするには、以下の幾つかの条件が守られていなければならない。
- 必ず表全体の概要(summary)を提供すること
- 見出しセルとデータセルを厳密に分けること
- 見出しセルは scope属性 で方向付けること
- 適切に行要素をグループ化すること
- 列要素にフィールド名、行要素にをレコード名を配置すること
- セル内容が長い時、abbr属性で要約を与えること
今回の考察で少々残念だったのは、colgroup要素 及び col要素 を何ら活用する事が出来なかった点だ。特に colgroup要素 は列要素をグループ化するという大変有用な要素にも関わらず、存在するのは視覚的な情報ばかりで何らアクセシビリティの向上に寄与しない。いくらclass名を与えて見出し的であるかのように見せかけたとしても、ブラウザはそれを知り得ないのだ。
summary属性は難しい。ついつい私も適当な言葉を入れてしまいがちだが、もしこの読み上げ方が適用されるならばユーザが読み上げるべきかどうかの判断材料となる非常に重要な情報となるだろう。XHTML 2.0でsummary属性がsummary要素に仕様変更される事からも、可能性としては充分に有り得ることだ。summary=" " はこの場合、不許可だ。
