パンくずリストのマークアップ考察

とある案件でパンくずリストをどうやってマークアップするのが最適解なのか悩んでいました。例えば、以下のようなヴィジュアルデザインのパンくずリストをマークアップするとします。

まずどんなブロック要素で囲むか？そして > 部分はどうするか？> というのが真っ先に思いつきますが、これはスマートとは言えないのでは・・・などなど。そこでGoogleで情報検索したところ、次の記事を見つけました。

日々のネコゼログログ: アクセシブルな「パンくずリスト」

こちらの記事によると、インフォアクシアの植木さんのインタビューからの抜粋があります。そのインタビューの様子はこちら。アクセシビリティを言い出すと・・・結局はこの人にたどり着くようです。頭が下がります。

あとは、試しにやってみているのですが、パンくずリストの間に挟む矢印を画像にして、「の中の」という代替テキストを入れてあります。こうすると例えば「ホームの中のニュース」と読み上げられるので、ユーザーテストでもサイトの階層が分かりやすいとの声をいただいています。 ・・・中略・・・ いわゆるパンくずリストは、ユーザーテストをやっていると、画面を見ているユーザーにも意外とその意味が分からないという人が多いんです。確かに、ヘッダーにいきなり「ホーム>>ニュース>>過去記事」なんて書いてあっても初めて見た人はなんだろう？と思いますよね。 そこで、少しでも分かりやすくするために一番最初に「現在位置」と入れてみました。

なるほど確かに、インフォアクシアのソースは既にそうなっていました・・・ってそれは本人ですから当たり前ですよね。インフォアクシア式のやり方の他に、私は以下のマークアップを思いつきました。

<dl id="locus">
<dt>現在位置:</dt>
<dd>ホーム <img src="/common/img/icon_arrow.gif" alt="の中の" /></dd>
<dd>キャンペーン <img src="/common/img/icon_arrow.gif" alt="の中の" /></dd>
<dd>おにぎり100円セール</dd>
</dl>

dl要素を使用したやり方です。「現在位置」をdt要素に指定しています。ただ、ヴィジュアルデザインの都合上、「現在位置」表示を入れられない場合、どうするか。

（私の現在の仕事のように、既に決定されているヴィジュアルデザインをコーディングするという作業の場合、デザイナーと事前に打ち合わせておかない限り、ヴィジュアルデザインに「現在位置」表示が入っていることはまずないでしょう。）

こういった場合、dt要素に position:absolute を指定するなどして、画面外に飛ばしてしまいます。通常のブラウザでは見ることができなくとも、音声ブラウザでは読み上げられるはずです。

ただ、不覚にも私は音声ブラウザを利用したことがないので、dl要素を使用したマークアップと、インフォアクシ式のp要素を使用したマークアップが、それぞれどのように読み上げられるかがわかりません。

また、パンくずリストに付ける適切な id は何か、こちらもリサーチしてみました。インフォアクシアでは id="breadcrumbs" で「パンくず」をそのまま英語化したものです。また、CSS HappyLifeさんのこちらの記事（もう、class名やid名で悩まないんだからっ！！）では以下のようなご紹介があります。

パンくずっぽいの

topicpath

topic-path

topicPath

pan

pankuzu

・・・がどれもいまいちピンとこなかったので、その筋のサイトをいくつか続けて見て行ったところ、ありました。カッコイイのが。アックゼロヨンの id="locus" です。

Infoseek マルチ辞書で「locus」をひいてみると 場所, 所在地; 【遺伝】遺伝子座; 【数】軌跡. とあります。これだ！と思いました。

パンくずリストは大概がサイトのメインコンテンツより上にあるものであるだけに、テキトーにマークアップしてしまうのはアクセシビリティの観点から避けたいところです。