どうも。
更新が飛び飛びでお忘れちゃんでしょうが、サルですよ。

昨日、体の節々が痛かったり頭がぼーっとしたりで「すわ風邪か？！」と、しょうが・ネギ入りタマゴスープを作って喰らったんですが、どうやら節々が痛んだのは週末の車いじり、頭がボーっとしたのは久しぶりの寝違えによるものだったらしいです。ま、体には良いものなんだからいっか。

えーっと。
確か前回の最後に、「次は非アクセシビリティで…」なんて書きましたが、書いているうちに収拾がつかなくなってきたので、わかりやすいところからいきますね。

そうだなあ。
一番分かりやすい、とっつきやすいというと、馴染み深い<br>タグだろうか。

ご存知のように、<br>は文の途中で強制改行させるタグ。
みなさんがお使いのブログでも、記事の入力フォームに

と入れた文は、ソースを見るとちゃんと

とタグが補完されています。
（ブログにおいては、HTMLではなくXHTMLで書かれているので、<br>は<br />になる）

段落を開けたい場合は、

こんな風になったりしますね。
で。

これらを特になにも意識せず作っている場合、自分のサイトやブログをHTMLの文法チェックにかけると、かなりな確率で出てくるのが

<br>タグが多数連続しています

という指摘。
警告が出るということは、標準に準拠していないということ。
<br>を連打して段落を作るのが、なんでいけないんでしょ？

段落なら、段落という構造を示すタグがある

お分かりですよね。
段落タグ、すなわち<p>タグです。

つまり上の文章は、

こんな風にマークアップされるのが良しです。
つまり、文書の構造を考えず、見ばのためにHTMLのタグを使うのは良くないということなんですね。段落なら、段落のタグを使って文章をまとめてくださいよ、とまぁこういうことです。

シェア的には少ないけれど、例えばテキストブラウザなんかでは連続した、2個以上の<br>タグを一つにまとめてしまったり。そうなると、直感的に「ここがひとつのまとまりだ」というふうには解釈できないし読みにくい。

読み上げブラウザなんかではこれまた面白いんですが、改行＝<br>で音声が息継ぎをする・しないを設定したりできます。しかしこれが設定できないブラウザもあるため、改行タグのみで行空けがマークアップされた文章は、句読点こそ認識するものの、とにかく最後までだらだらと読まれていくだけ。やっぱり、段落としてのまとまりが理解しにくいのです。

もちろん、普通のブラウザを使って閲覧していても、ほどよく段落化された文章というのは読みやすいはずです。ちょいと一息付けるんですよね。

それに、<p></p>でくくっておいて、あらかじめスタイルシートで記述しておいた上余白や下余白を指定すれば、行間の空きも思うがまま。わざわざテーブルタグでがちがちに組んで、行間のセルにspacer.gif（1×1ピクセルの大きさの透明gif）を詰めて調節するようなこともありません。一時期の企業サイトにはありがちですけど。（経験者）

改行、そしてスペースについてはもうひとつ注意事項があるんですが、それはまた次回以降のお話で。

見出しなら、見出しという構造を示すタグがある

一般的なブログだと自分が意識せずとも、ブログタイトルが<h1>タグ、記事タイトルが<h2>タグで囲われるようにテンプレートができてたりします。したがってあまり意識しないかもしれないけれど、たとえば文中に中見出しをつける場合や、ホームページで見出しに当たる部分を記述する場合のおはなし。

というように、<font>タグや<b>タグで見出し部分を装飾してみたり、もしくは

こんなふうに記述したり。
スタイルシートを使おうがなんだろうが、読み上げブラウザや検索エンジンにしてみると、

と記述されたものとは、かなりな違いがあるんだ。あるんです。

見出しを、見出しを示すタグで囲むということは、それがページの構造において見出しであるということを言っているわけですね。当たり前ですね。

けれどこれが適切になされていないと、検索エンジンでも読み上げブラウザでもテキストブラウザでも、見出しとして認識してくれないのです。ただの、でかくて色の付いた文字、になっちゃうわけです。私たちには「見出しっぽい」と認識できたとしても、検索エンジンでは「ココが見出し、大事なところ」と解釈してキーワードを抽出してくれなかったり、読み上げブラウザでは見出しごとにジャンプができる機能というのが使えなかったり、ということが起こってしまう。

極端なことを言うなら、スタイルシートを効かせてh1を一番小さい文字、h4を一番大きい文字にしようが、スタイルシートを認識しないブラウザや音声で聞いている分には、構造上何の問題も無いということになる。そのかわり、通常のブラウザで閲覧するうえで…というよりWeb制作としてちょいと欠陥があるという話になるが。

ただまあ、一昔前であれば、<h1>やら<h2>タグやら、そのまま使えば見ば的にはでかい文字、その次にでかい文字、どうにもアカぬけないなあ…という感じであったけれども、これらの見ばをスタイルシートで制御してやることによって、大きさや余白、背景色なんかも思いのままということになるので。

…えーっと。
あ、風呂が沸いた。
ということで、これについての残りは次回ってなことで。（ぅおーい！

まだまだ続くぜ。Web標準に進路を取れ！
そいではまた〜

次回：Web標準に進路を取れ Interlude1−音声ブラウザ

<< 鮭マヨチャーハン | main | Web標準に進路を取れ Interlude1−音声ブラウザ >>