●ロゴのマークアップ
サイト全体で共通して利用する「ロゴ」のマークアップは次のようにアップされることが多い。
１、サイト全体を通し、h1要素でマークアップする。
２、トップページではh1要素でマークアップし、個別ページではp要素またはdiv要素でマークアップする。
もっとも広く採用されているのは１、の方法。一方、「ページ単体で考えて、一番大きい見出し（タイトルと同等の役割）をh1要素でマークアップすべき」と考え２、の方法を採用してるサイトも少なくない。
W3CのXHTML仕様では、見出し要素の使い方について厳格な規定はないが、ISO-HTMLでは「見出しはh1要素からはじめること」「見出しレベルが飛ばさないこと」という要件がある。
ただし、CMSやDreamweaverなどでテンプレートを利用するとき、すべてのページで「h1→h2→h3→h4・・」という見出し構造を守れないか、非常に守りにくいことがある。
ページバリエーションの多いサイトで無理やり守ろうとすると、テンプレートや条件分岐をムダに増やすことになってしまい、メンテナンス制が大幅に低下する。
結論としては、見出しのマークアップ品質という観点を、実際に運用効率のバランスを考えて適切なマークアップを心がける。
●順不同リスト（ul要素）の使いどころ
ul要素は「順不同リスト」、すなわち複数の項目を列挙するためのリスト。実務的には、単純に項目の列挙だけではなく、ナビゲーションのマークアップに利用されるケースが多い。
<ul id="nav">
<li><a id="nav-home" href="/">ホーム</a></li>
<li><a id="nav-ideas" href="/ideas/">こだわり</a></li>
<li><a id="nav-shops" href="/shops/">店舗情報</a></li>
<li><a id="nav-profile" href="/profile/">会社概要</a></li>
<li><a id="nav-contact" href="/contact/">お問合せ</a></li>
</u/>
ブログ記事の最後に参考ページへのリンクをつける際に、参考ページが１つしかない場合、複数の項目を列挙するのがリスト本来のあり方であり、項目がひとつしかない場合リストとはいえないので
p要素あたりでマークアップしたほうがよい、という厳格な考え方もある。しかし、今は項目はひとつだとしても、今後参考ページが増えることを想定すれば、リストとしてマークアップしたほうが管理しやすいといえる。
●複数のマークアップ候補のなかでどれを選ぶべきか
料理の材料と分量のテキスト
薄力粉 50グラム
ベーキングパウダー 小さじ4分の1
砂糖 30グラム
無塩バター 50グラム
卵 1個
チョコレート 10グラム
チョコチップ 30グラム
上記のテキストをどのようにマークアップしたらよいか考えてみると、ul要素、dl要素、table要素の３つが候補としてあげらる。このように「書式や本来の使い方から考えて正しいか正しくないか」という次元とは別に、製作者や運営者の好みでマークアップが選べるケースが少なくない。
複数のマークアップ候補がある場合、ユーザーの利便性の観点から考える。たとえば携帯電話でアクセスするユーザーが多いなど、CSSが全く適用されないか、一部しか適用されないような環境で閲覧される場合には、ul要素でシンプルにマークアップしたほうがよい。
順不同リストでマークアップした例
<h2>材料</h2>
<ul>
<li>薄力粉 50グラム</li>
<li>ベーキングパウダー 小さじ4分の1</li>
・・・・・中略・・・・・
<li>チョコチップ 30グラム</li>
</ul>
定義リストでマークアップした例
<h2>材料</h2>
<dl>
<dt>薄力粉</dt>
<dd>50グラム</dd>
<dt>ベーキングパウダー</dt>
<dd>小さじ4分の1</dd>
・・・・中略・・・・・
<dt>チョコチップ</dt>
<dd>30グラム</dd>
</dl>
表でマークアップした例
<h2>材料</h2>
<table summary="材料の一覧表です。">
<tr>
<th>材料名</th><th>分量</th>
</tr>
<tr>
<td>薄力粉</td><td>50グラム</td>
</tr>
<tr>
<td>ベーキングパウダー</td><td>小さじ4分の1</td>
</tr>
・・・・中略・・・・・
<tr>
<td>チョコチップ</td><td>30グラム</td>
</tr>
</table>
●a要素の使い方
a要素はいわゆる「リンク」。アクセシビリティの観点から考えても。a要素の中身を「ここ」や「こちら」といった具体性のないテキストにしてしまうのはよくない。
a要素の中身からリンク先が想定できる内容にする。検索エンジンのアルゴリズムでも、a要素の中身とリンク先（のページタイトルなど）との一致性がいっそう重視されてきている。
●a要素のtitle属性の使い方
a要素には、補足情報を示す為にtitle属性を設定することができるほとんどのブラウザでtitle属性値
がツールチップとして表示される。また、一部の音声ブラウザはtitle属性値の読み上げに対応している。
●img要素につけるalt属性の使い方
IE 6/7では属性値だけでなくalt属性値もツールチップとして表示されるため、ツールチップとして利用する前提でalt属性を使ってしまいがちだが、本来はまったく目的が異なる。
見出し画像やボタン画像は、画像に含めたテキストをそのままalt属性の値として指定する。テキストの先頭で示す小さなアイコン画像や、罫線などに使う装飾的な画像では、alt属性の値を空（alt=""）にしておく。なぜなら画像ひとつひとつに「アイコン」や「罫線」と指定しまうと、音声ブラウザで「アイコン、アイコン・・・」「罫線、罫線・・・」といちいち読み上げられてしまい、適切な情報伝達の妨げになる。また、alt属性自体を指定しないとファイル名を読み上げてしまう場合があるので注意。
そもそも、このようにalt属性値を空にする画像は、構造的に不可欠な存在ではないので、できるだけCSSのbackgroundプロパティで埋め込むのがよい。むしろimg要素で埋め込むと、画像を変更する際にXHTMLをひとつひとつ修正する手間が生じるが、backgroundプロパティであればCSSのソースコードを変えるだけで変更できる。特にWebサイト内で同じ画像を複数利用するような場合にメンテナンス性が向上する。
このように、「alt属性をつけるならimg要素で、つけないならCSSのbackgroundプロパティで」と区別するのが原則。
今日はここまで。
0 件のコメント:
コメントを投稿