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

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

関連エントリー

• 音声ブラウザと相性の良いHTMLを作る(1)。
• 音声ブラウザと相性の良いHTMLを作る(3)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。

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

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

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

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

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

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

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

• テーブル ごく簡単なHTMLの説明 (The Web KANZAKI)

例えばこんな表を、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

追伸:
頑張れ! 気象庁

---

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

関連エントリー

• 音声ブラウザと相性の良いHTMLを作る(1)。
• 音声ブラウザと相性の良いHTMLを作る(3)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。