20日目:テーブルに要約をつける

テーブルをマークアップする最後のステップは、概要(サマリー)をつけること。テーブルの概要っていうのは、ビジュアルブラウザで表示されることはない。これはスクリーンリーダーとか音声ブラウザ専用に作られたものだから。概要ってのはまあその名のとおり、キャプションよりも長くて詳しい説明文だ。だいたいキャプションの直前に読み上げられる。

どのテーブルにもこれは付けとくべきだ。カレンダーを載せてるなら、「日づけごとの投稿へリンクした、月間カレンダー」みたいな簡単なものでもいいんだよ。レイアウトをテーブルで組んでるなら、この概要部分は空にしておくこと。これでテーブルデータじゃなくて、単に視覚的なレイアウトの目的でテーブルが使われてることを示せる。(視覚的なスペースを保ちたいときに画像を使ったときの、空の ALT 属性みたいなもんだね。「スペーサー画像/透過GIF」については次回話すね。)

誰がトクする?

  1. ジャッキー のためにもなる。JAWS がカレンダーを見つけたら、「概要:日づけごとの投稿へリンクした、月間カレンダー」って読んでくれる。 次には キャプションが、その次にはテーブルヘッダーが読まれる。これでカレンダー内をナビゲートできるってわけ。
  2. 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=""