ロゴ画像のマークアップ
見出しレベルの問題の他、マークアップ時の判断に悩む箇所として、「ロゴ画像」が挙げられます。<logo></logo>というようなタグがあれば良いのですが、残念ながらそのような要素は存在しません。ここではどの要素でロゴ画像をマークアップするかが問題になります。
ロゴ画像のマークアップでよくあるケース
ロゴ画像のマークアップによく使用されている例を挙げると、次の3つになります。
ロゴ画像のマークアップでよく使われる例
- すべてのページをh1要素でマークアップする
- すべてのページをp要素またはdiv要素でマークアップする
- トップページではh1要素、他のページではp要素またはdiv要素でマークアップする
上記「1」と「2」は、ブログを含むCMSツールのデフォルト設定にありがちなケースです。「1」の場合はトップページでは問題ありませんが、カテゴリページや個別ページでロゴ画像がh1要素になってしまうため、違和感があります。カテゴリページではカテゴリ名、個別ページではページタイトルをh1要素でマークアップする方がより自然だと言えるでしょう。「2」の方法は、逆にトップページでのh1要素の扱いが問題になります。多くの場合、h1要素はタグライン（サイトのキャッチフレーズ、スローガン）をマークアップするのに使用されますが、サイト名よりもタグラインが前面に出されることになるため少々違和感があります。
そもそもトップページとカテゴリページ、個別ページでは、目的が異なりますから、これを踏まえて考えてみると、上記「3」の方法を取るのがより自然だと言えるでしょう。
<h1><img src="img/logo.gif" alt="サイト名" id="logo" /></h1>
<div><a href="../"><img src="img/logo.gif" alt="サイト名" id="logo" /></a></div>
また、トップページと他のページでマークアップの方法が異なる場合であっても、インターフェイスはWebサイト全体を通して一貫することが大切です。次のようにid属性をセレクタとしておけば、ロゴ画像のスタイルをWebサイト内で一貫することができます。
h1 img#logo, div img#logo {・・・}
まとめ
以上、構造化された文書を念頭において、マークアップする際に、判断に迷う部分について、重要な要素（title要素、見出し要素）を中心に解説してみました。
12月11日に、WCAG 2.0が勧告となったばかりですので、次回は、アクセシビリティを踏まえながら、画像のマークアップ方法を中心に解説したいと思います。
