19日目:本当のテーブル・ヘッダーを使う

サイトにカレンダーを載せてるヒトは、HTML のテーブルとして表示するのがオススメ。カレンダーまるごと全部を CSS で作ろうって試みも過去にいくつかあったけど、これは間違い。だってカレンダーってデータのテーブルなんだから、これにあわせてコードも組むべきだよ。

データテーブルで一番大事なのは、ヘッダーをちゃんと書くこと。カレンダーの場合は、これは上のほうにならぶ曜日にあたるね。曜日のヘッダーは絶対につけて。曜日が見えちゃうのが嫌なら、CSS で隠すといい。(僕自身もブログではそうしてるよ。)どっちにしても、ヘッダーが存在してないといけない。目の見えない人たちが迷わずにテーブルをナビゲートしやすいように、スクリーンリーダーはヘッダーを使うからね。

カレンダーっていうのは、全体が見えてれば非常に使いやすいけど、1日ずつしか見えないとすごく使いにくい。(どんなデータテーブルでも同じことだけど、ここではカレンダーについての話をおもにすることにしよう。)例えば日替わりカレンダーがあなたの机に置かれてるって想像してみて。そのカレンダーには曜日が各ページについてなくって、日にちだけがでてるとする。1日、2日、3日、4日、5日、6日、7日…。今日は4日、木曜だってことをたまたま僕は知ってる。じゃあ11日、12日、13日へとジャンプしてみようか。そうすると13日は何曜日になる?ページには書いていないから、自分でいちいち計算しなくちゃならないね。

目の見えないひとが、ちゃんとしたヘッダーなしにカレンダーをナビゲートするのはそんな感じ。たくさん数字があるだけで、どこがどういった関係になっているのかが示されてないんだから。適したヘッダーをカレンダーにつければ、スクリーン・リーダーはテーブルヘッダー(曜日)とテーブルデータ(日付け)とを関連づけて、一緒に読み上げることができるようになる。「木曜日、4日、木曜日、11日、金曜日、12日、土曜日、13日。」なるほど、土曜日だったんだ。

適したヘッダーってところに注意してね。曜日を <td> タグの1番目の列に入れるだけじゃダメなんだ。代わりに<th> タグを使おう。ほとんどのブログのテンプレートはここんところ間違って使ってるけど、直すのは簡単だし、ビジュアルブラウザでは変える前と少しも変わらず表示されるよ。

誰がトクする?

  1. ジャッキーの役に立つ。カレンダーにあたったとき、JAWS はまずキャプション、次にヘッダーを読む。ジャッキーはControl + ALT を押さえることで、矢印キーを使ってテーブル内を動き回れるようになるんだ。移動するたびに、JAWS はヘッダー(曜日)とセル内のデータ(日付け)を読み上げる。

    メジャーなスクリーンリーダーは全部こういうテーブルナビゲーションに対応してる。ホームページ・リーダーだと「テーブルナビゲーションモード」(ALT+T) に切りかえて、特別キーを押さえなくてもカレンダー内を移動できるような機能もある。こういうところ、ホームページ・リーダーは JAWS より進んでる。これから説明するけど、テーブルヘッダーには短い(または長い)タイトルを足すことができる。(リンクにタイトルを足すみたいな感じだね。)そうすると、ホームページ・リーダーはもともとのテーブルヘッダーのテキストじゃなくてこっちを読みあげてくれる。ってことは、視覚的には「日」「月」「火」になってても、ホームページ・リーダーには「日曜日」「月曜日」「火曜日」って読ませられるんだ。ちょっといいでしょ?

どうしたらいい?

もしまだなら、カレンダーに本当の見出しをつけて<caption> タグは <table> のすぐ後にくるようにね。で<th> タグはその次にくるようにしてください。

Movable Type ではメインインデックス・テンプレートにカレンダーを見つけて。("calendarhead" で検索するといい)<caption> の直後にこんなふうに曜日がある:

<tr>
<td align="center"><span class="calendar">日</span></td>
<td align="center"><span class="calendar">月</span></td>
<td align="center"><span class="calendar">火</span></td>
<td align="center"><span class="calendar">水</span></td>
<td align="center"><span class="calendar">木</span></td>
<td align="center"><span class="calendar">金</span></td>
<td align="center"><span class="calendar">土</span></td>
</tr>

こう変えてね:

<tr>
<th abbr="日曜日" align="center"><span class="calendar">Sun</span></th>
<th abbr="月曜日" align="center"><span class="calendar">Mon</span></th>
<th abbr="火曜日" align="center"><span class="calendar">Tue</span></th>
<th abbr="水曜日" align="center"><span class="calendar">Wed</span></th>
<th abbr="木曜日" align="center"><span class="calendar">Thu</span></th>
<th abbr="金曜日" align="center"><span class="calendar">Fri</span></th>
<th abbr="土曜日" align="center"><span class="calendar">Sat</span></th>
</tr>

ここではふたつのことが行われてる: <td> タグ全部を <th> に変えて、それぞれに "abbr" 属性で曜日を書き出してる。("abbr" 属性はダブルの役割を果たす。すごく長いテーブルヘッダーに対しては、略語としての役割。反対にすごく短いタイトルヘッダーに対しては、ここでやったように長いバージョンとしての役割を果たすんだ)

レイアウトのためのテーブルに関する重要事項

視覚的なレイアウトのためだけに使うテーブルには、完全に別ものとしてのルールがある。<th> タグは使わない こと。メインの内容が最初にくるようにコードをいじる以外は、こういうテーブルをアクセシブルにするためにできることってそんなにない。次回ひとつだけこの部分について話そう。

さらなる情報源(英語)

カレンダーよりも複雑なテーブル(例えば階層になってるヘッダーやサブヘッダーがあるとか)をマークアップしないといけないなら、頑張ってね、としか言えない。まずはこのへんの文献を参考にしてみて: