パンくずリスト？を考察してみる

いわゆる「パンくずリスト（ナビ？）」とか「トピックパス」は、現在閲覧しているページを階層構造を元にユーザーに伝えるものですが、今回はHTMLをいかにマークアップするかという話。

HTMLをどうするかを考え出すと切りがないですが、最近マークアップに対しての思考能力が落ちてる気がするのと、過去の自分を振り返る材料にもなりそうなのでメモっとく。

まあその時々でマークアップするのがベストなんでしょうが、自分の場合はモジュールのひとつとして再利用することが多いので「パンくずリストの一例」くらいの位置づけで読んでもらうと気が楽です。

パンくずリストのHTML

HTMLのソースコードはこんな感じ。

<div class="BreadCrumbs">
  <dl>
    <dt>現在位置</dt>
    <dd>
      <a href="/" title="サイト名">ホーム</a>
      <span>&gt;</span>
      <strong>現在いるページのタイトル（titleとh1と同じ）</strong>
    </dd>
  </dl>
</div>

ddタグ内は改行してもしなくても良いと思いますが、改行するとそれぞれのタグの後に「半角スペース」が入ります。改行しない場合はspanタグ内を以下のようにしたりします。

<span>&nbsp;&gt;&nbsp;</span>

update ‐
「&nbsp;」は「no-break space」、つまり改行させない為の特殊なスペースでした。
半角スペースの代わりとして使用するのは誤りですね。

個人的には改行してた方がソースコードが横長にならないので、ページ毎に変更する必要のある「現在いるページのタイトル」部分を編集しやすいかなーと思います。いずれにしても基本は「半角スペースあり」で、あとはCSSで調整という考え方です。
そもそも「>（&gt;）」って音声ブラウザとかスクリーンリーダーだと何て読まれるんだろう？場合によっては前述のソースコードは破綻する気がするなー

また「olタグ（ordered list – 順序付きリスト）でマークアップすべき」というのも一理あると思うので、最近は下記のようなHTMLも「あり」かなーとも思ってます。

<div class="BreadCrumbs">
  <dl>
    <dt>現在位置</dt>
    <dd>
      <ol>
        <li><a href="/" title="サイト名">ホーム</a></li>
        <li><strong>現在いるページのタイトル（titleとh1と同じ）</strong></li>
      </ol>
    </dd>
  </dl>
</div>

この場合は前述の「>（&gt;）」部分はHTMLからは除外し、必要に応じてCSSで背景画像として指定する方がベターかと思います。
ちなみにpタグでのマークアップは意味付けとしてちょっと違うような気がするのであまり使わないです。

CSSの記述例

そもそも定義リストでもない気もしますが、今のところしっくりきてるので上記のHTMLを元にCSSをどうしているかと言うと

.BreadCrumbs dt {
  display: none;
}

@media aural, speech {
  .BreadCrumbs dt {
    display: inline;
    visibility: hidden;
  }
}

.BreadCrumbs dd span {
  padding: 0 .25em; /* side padding is any value */
}

.BreadCrumbs dd strong {
  font-weight: normal or bold;
}

dtタグ部分はデザイン上では存在しないことがあるので、Juicy Studio: Screen Readers and display: noneを参考に「display: none;」「visibility: hidden;」で隠してた。ただし「display: none;」を指定すると音声ブラウザが機能しないようなので、「@media aural, speech」で音声ブラウザ用の対策。これでバッチリと思ってましたが、国内の音声ブラウザのほとんどが@media auralに対応していない？ようなので再考中。ちなみ今のところは以下のようなコードで落ち着いてます。

.BreadCrumbs dt {
  position: absolute;
  top: 0; /* for gte Opera7.x */
  left: -1000em;
  width: 900em;
}

/* 以下、省略 */

olタグを使ってリストの横並びをする場合は「float + clearfix」で。「display: inline;」で横並びだとこれまた半角スペース問題とか出てくるのでfloatかなー

「display: none;」とかで消すくらいならHTMLにも必要ないのでは？と思われるでしょうが、positionで飛ばす方法が現段階での妥協案と考えています。いずれにしても画面から見えなくすること自体がスパム扱いされてしまいそうですが、そこは今後の動向を見守っていく方向で。

※音声ブラウザとかスクリーンリーダー情報は未検証の情報なので、参考にしない方が良いでしょう。
海外と国内でも音声ブラウザなどの機能に差があるようで、奥が深そうです。

Published:
Tag: