アルファサード株式会社 代表取締役 野田 純生のブログ


音声ブラウザと相性の良いHTMLを作る(2)。


公開日 : 2007-05-17 19:58:12


引き続きウェブアクセシビリティ関連の話題。

関連エントリー

このエントリーの続きだが、今回は単に音声ブラウザとの相性だけでなくレイアウトのためのテーブル関連要素を判別してカットする考え方について書く。

※実はこのエントリーを書く段階で、テーブルの良いサンプルを見つけようと思い「週間天気予報」で検索して「気象庁 週間天気予報」を見つけたのだが...うまく変換できなかったのでプログラムのロジックを変更させられた。ちょっとこれは無いんではないか、気象庁御中。


<table>
</p><br>
<b>全国主要地点の週間天気予報一覧</b>
<p>5月17日17時<br>
<table class="forecastlist" id="infotablefont">
...

HTMLにおけるテーブルの扱い

テーブル自体は正しくマークアップしてあれば (本来の) 2次元で表現できる情報をわかりやすく表現できるし、ホームページリーダー等でもテーブルの読み上げモードが用意されている。

※今ちょっと手元に環境ないので記憶曖昧だが、「表の先頭」とかちゃんと読み上げてくれる(はず)。

HTMLとテーブルについてはこちらを参照されたし。気象庁と戦ったおかげ? で解説まで書く気力もないし。

氏名 年齢 血液型
野田純生 40歳! A型

例えばこんな表を、

氏名→野田純生, 年齢→40歳(不惑? 厄年?), 血液型→A型

ってな具合に読み上げることも可能なのだ。

ところが「テーブルレイアウト」である。表に次ぐ表のオンパレード。どう読み上げれば良いのだろう。

ということでレイアウトのために用いられている「であろう」テーブルをぶった切ることにする。

※「テーブルをぶった切る」っていうと「ちゃぶ台をひっくり返す」みたいですな...

変換方針

  • TABLE要素の子要素に表の構造を表す「CAPTION要素, TH要素」を持たないもので、TABEL要素の「SUMMARY属性」が指定されていないTABLEをレイアウト目的のTABLEとみなす
  • レイアウト目的のTABLE要素については、
    • (レイアウト目的とみなした)TABLE要素自身→削除
    • TR要素→DIV要素に置換
    • TD要素→半角スペース(&nbsp;)に置換
    • THEAD,TBODY,TFOOT要素は削除

方針を書くところまでは早いのだけれど、実装となるとなかなかにコストのかかる処理になってしまった。

TD要素の中にはTABLE要素が置けるから、


<table>...<tr><td>...<table>...</table>...

というように「ネスト」できるのだ。だから単純に


$src =~ s/<table.*?</table>/ほにゃらら/igs;

みたいなことが出来ない。パーサ使う? ってのもどうかと思うし(何しろ、きちんとパース出来る保証はどこにもないのだから)...とにかく一応 split で切ってループで処理させてみた。段々重くなるような気がするぞ。

この方針に沿って変換したのがこれ(すっぴんバージョン)。

で「裸」にしたら服を着せてみたくなるのが人情, ということでCSSを充ててみたのがこれ。

ね、それなりにCSSベースのレイアウトになってるでしょう?


追伸:
頑張れ! 気象庁


引き続き、次回以降は「日付」「記号」「数式」などについて。

関連エントリー



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の代表取締役社長であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ

ページにルビを振る