20日目:テーブルに要約をつける
テーブルをマークアップする最後のステップは、概要(サマリー)をつけること。テーブルの概要っていうのは、ビジュアルブラウザで表示されることはない。これはスクリーンリーダーとか音声ブラウザ専用に作られたものだから。概要ってのはまあその名のとおり、キャプションよりも長くて詳しい説明文だ。だいたいキャプションの直前に読み上げられる。
どのテーブルにもこれは付けとくべきだ。カレンダーを載せてるなら、「日づけごとの投稿へリンクした、月間カレンダー」みたいな簡単なものでもいいんだよ。レイアウトをテーブルで組んでるなら、この概要部分は空にしておくこと。これでテーブルデータじゃなくて、単に視覚的なレイアウトの目的でテーブルが使われてることを示せる。(視覚的なスペースを保ちたいときに画像を使ったときの、空の ALT 属性みたいなもんだね。「スペーサー画像/透過GIF」については次回話すね。)
誰がトクする?
- ジャッキー のためにもなる。JAWS がカレンダーを見つけたら、「概要:日づけごとの投稿へリンクした、月間カレンダー」って読んでくれる。 次には キャプションが、その次にはテーブルヘッダーが読まれる。これでカレンダー内をナビゲートできるってわけ。
- iCab ユーザも喜ぶ。iCab は Mac OS についてくる、読みあげユーザインターフェイスを使ってWebページを音声化することができる。テーブルサマリーも指定してあれば、ちゃんと読んでくれるんだ。
どうしたらいい?カレンダー
Movable Type では、まずメインインデックス・テンプレートでカレンダーを見つける。("calendarhead" で検索しよう) こんな感じの <table>
になってるはず:
<table border="0" cellspacing="4" cellpadding="0">
それをこう変える:
<table border="0" cellspacing="4" cellpadding="0" summary="日づけごとの投稿へリンクした、月間カレンダー">
どうしたらいい?: レイアウトのためのテーブル
テーブルを使ってレイアウトしてるなら、summary=""
を各テーブルに付け足そう。検索・置換でやるのが一番。これを検索する:
<table
でこれに置き変える。
<table summary=""