XHTML/CSS・トップ | アクセシビリティのヒント・目次

●パンくずリストの作り方

現在の位置: ホームアクセシビリティ向上のヒント → パンくずリストの作り方

 パンくずリストとはWebページがWebサイトのどの位置にあるのか訪れたユーザーに教えてくれるナビゲーションの役割を果たしてくれます。通常は、ヘッダーかタイトル領域の下、記事本文が始まる前か、記事本文の前にナビゲーションバーとしてサイドバーがある場合はその前に配置します。日本ではパンくずリスト、またはTopic Path(トピックパス)と呼ばれていますが、英語では“breadcrumb(Breadcrumbs《複》、ブレッドクラム)”または、“breadcrumb navigation”が一般的です。もともと、主人公が森の中で迷わないようにパンくずを少しずつ落としながら歩いたという童話の『ヘンゼルとグレーテル』から由来したといわれています。ダイレクトでWebページを訪れるユーザーがトップページからどの位置にいるのか迷子にならないよう、Webページが階層的に深い場所にあるときに設置しておくとアクセシビリティが向上すると思います。

【サンプル】↓

【CSS】↓

li {
 display: inline;
}

【HTML】↓

<ul>
 <li><a href="/">トップページ</a> &gt;</li>
 <li><a href="/">アクセシビリティ向上のヒント</a> &gt;</li>
 <li>パンくずリストの作り方</li>
</ul>

【解説1】↓

 パンくずリストの作り方は、ul要素のリストに指定した方法で解説したサイトが多いので当サイトでも ul要素のリストへ指定した解説をしてみます。上記のHTMLソースの href="/"は、 href="URL〜"へのパスを省略した形です。また、「&gt;」は > のHTMLタグです。 > は他の記号と変更しても構いません。ここでは、CSSでli要素にdisplayプロパティの値として inline を使い、ulのリスト項目を縦並びから横並びに変更していますが、float: left を指定しても同じ結果が得られます。

【CSS】↓

li {
 float: lef;
}

【HTML】↓

 上記と同じ

【解説2】↓

 パンくずリストはリスト項目だけに指定しなければ作れないかというとそうではありません。ここのWebページの上部に配置しているように p要素に指定してもアクセシビリティ、ナビゲーションとしての役割は変わりません。ページ作者が使いやすいほうで設置すれば良いと思います。

【サンプル】↓

ホームアクセシビリティ向上のヒント → パンくずリストの作り方

【CSS】↓

 なし

【HTML】↓

<p><a href="/">ホーム</a> → <a href="/">アクセシビリティ向上のヒント</a> → パンくずリストの作り方</p>

【解説3】↓

 パンくずリストの設置はWebページ1枚1枚です。Webページが非常に多い場合、新たに設置するとなると大変ですからサイト構築段階、サイト新規作成段階から作るようにしたほうが効率が良いと思います。当サイトのようにWebサイト全体のWebページが多く、最初から設置していない場合は新たに設置するには大変だと思います。もっとも当サイトはトップページからの直リンクのページが多く、パンくずリストを設置しなくても位置がわかりやすいと思いますが。一括して指定する方法もあるようですがブログ、CMSでないと難しいようです。そのブログ、CMSへのパンくずリストの作り方はデフォルトで自動的に作成されるものが多いので本稿は割愛します。

【考察】↓

 パンくずリストで使われる>などの記号を背景画像にした作り方を解説しているサイトを見かけます。例えば以下のようなイメージです。

【HTML例】↓

<!-- パンくずリストの開始 -->
<div id="pankuzu">
<div id="breadcrumb"><a href="/">ホーム</a><img src="〜.gif" alt="の中の" width="10" height="10"><a href="/">アクセシビリティ向上のヒント</a><img src="〜.gif" alt="の中の" width="10" height="10">パンくずリストの作り方</div>
<!-- パンくずリストの終了 -->

 > などの記号を画像にし、alt属性の代替テキストとして「の中の」のテキストを入れ、スクリーンリーダー・音声読み上げ関連ソフトなどで『ホーム“の中の”アクセシビリティ向上のヒント“の中の”パンくずリストの作り方』と読ませるといった具合です。管理人さんはナンセンスだと思います。スクリーンリーダーなどの音声読み上げ関連ソフトは> 》 → 〒といった記号を正確に読み上げます。 例えば、→ なら右矢印といった具合です。そして、記号を読み上げる、読み上げない設定はスクリーンリーダーをお使いのユーザーが設定することができます。すなわち、記号を読み上げたくないユーザーは読み上げない設定にし、読み上げてほしいユーザーは読み上げる設定にして使っているということです。記号を読み上げたくないユーザーに対し、わざわざ記号の代わりに画像を貼り付け、代替テキストを付けてテキストを読ませる必要性はどの程度あるのでしょうか?第一、a要素の子要素となる画像の alt属性を読み上げないスクリーンリーダーもあります。HTMLはあまり複雑にしないことが肝要だと思います。真のアクセシビリティとはもっとシンプルなものです。複雑にするとかえって正常に動作しないソフトもあることから必要以上に複雑にする必要はないのではないでしょうか。

Key words: パンくずリスト 作り方

XHTML/CSS・目次 | アクセシビリティのヒント・目次

Copyright (C) 2009 http://www.xml.vc/