27日目：本当のヘッダーを使う
Webサイトをアウトライン、枠組みとしてとらえてみよう。最上層はサイト名。トップページでは、数日間分の投稿がリストされてる。2層目は日付。「2002年、7月16日、火曜日」とかなんとか。毎日複数の投稿がされてて、個々にタイトルがついてる。その場合、個々の投稿のタイトルが第3階層目にあたる。
それじゃ本物の <h1>、<h2>、<h3> タグを使って、Webサイトのこの枠組みをマークアップしようか。スクリーンリーダーは、こういうタグを通してページ構造をつかむしかない。あなたのページだって、構造はあるんだけど、ちゃんとしたヘッダータグなしではスクリーンリーダーにはこれが伝わらないんだよ。<font> を使って今どんな激シイことをしてるとしても、CSS を使ってその見出しの見ためを再現するやりかたをあとで説明するからね。
誰がトクする？
- ジャッキー。ページを開くとすぐ、JAWS は特定数のリンクと見出しを読み上げる。ジャッキーはINSERT+F6 を押してページ内の全見出しを読み上げさせられるし、CTRL+INSERT+ENTER でちゃっちゃと見出しから見出しへと飛び回ることもできる。
- マイケルも。Opera では、S で次の見出しへスキップできるし、W で前の見出しにもどれる。
- Google 対策にもなる。Google は構造のしっかりしたページを尊重するから、本物の見出し＝ヘッダータグを使ったときのほうが、キーワードのランキングが高くなる。（またひとつ投稿タイトルをしっかりつける理由が見つかったね。）
どうしたらいい？: Movable Type
サイトのロゴのスタイルを指定しよう。スタイルシート・テンプレート (
styles-sites.css) に、次の数行を足して：h1, h2, h3 { margin: 0; padding: 0; } h1 { font-size: 20px; font-weight: normal; } /*/*/a{} h1 {font-size: 100%} /* */メインとなる4つのテンプレート(Main Index, Category Archive, Date-Based Archive, Individual Entry Archive) で、
<h1>タグを使ってロゴスタイルを指定する。これを検索：<div id="banner"> <$MTBlogName$><br />これと置換：
<div id="banner"> <h1><$MTBlogName$></h1><h2>タグを使って、日付の見出しを指定。もう class は指定してあるから、スタイルシートには何も変更を加えなくていいはず。タグのほうだけちょっと変えよう。さっきと同じ4つのテンプレートで、今度はこれを検索する：<div class="date"> <$MTEntryDate format="%B %d, %Y"$> </div>これと置換する：
<h2 class="date"> <$MTEntryDate format="%B %d, %Y"$> </h2>投稿のタイトルを
<h3>タグで指定する。これもスタイルシートじゃなくて、タグのほうだけ変えることになる。同じく4ツのテンプレートで、これを：<span class="title"><$MTEntryTitle$></span>これと置換：
<h3 class="title"><$MTEntryTitle$></h3>
さらなる情報源（英語）
- Shirley Kaiser: マークアップをフェイクするのはやめよう：CSS のアクセシビリティ問題。