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

| コメント(0) | トラックバック(6)

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

関連エントリー

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

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


<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ベースのレイアウトになってるでしょう?


追伸:
頑張れ! 気象庁


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

関連エントリー

トラックバック(6)

トラックバックURL: http://junnama.alfasado.net/cgi/mt/mt-tb.cgi/353

さらに続き。 今回は、記号、日付、数式、そしてイメージマップについて考えてみる... 続きを読む

先週から「音声ブラウザ用にできるだけ読み上げやすいHTMLに変換するゲートウェ... 続きを読む

CSSメディアタイプによる分岐とINS, DEL要素の処理 関連エントリー 音声... 続きを読む

関連エントリー 音声ブラウザと相性の良いHTMLを作る。 音声ブラウザと相性の良... 続きを読む

b→strong, i→em, s→del とか出来る範囲で変換する これは意... 続きを読む

Lucky bag::blog: CSS が valid でなければいけない理由... 続きを読む

コメントする

Facebook

Twitter

このブログ記事について

このページは、Junnama Nodaが2007年5月17日 19:58に書いたブログ記事です。

ひとつ前のブログ記事は「プロトコルとTPO。」です。

次のブログ記事は「音声ブラウザと相性の良いHTMLを作る(3)。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6