パンくずナビのマークアップ論点列挙

投稿
最終更新

この話題何度目だよと思ったり思わなかったりもするのですが、そういえば本ブログで思考をまとめたことはなかったし、未だに最適解が定まっていないものでもあるし、あと一時期は食傷気味だったのが最近は誰もこの議論しないので少し寂しい思いもあり(笑)、そして WCAG 方面でちょっとした動きがありそうな予感もあり、改めて書いてみる次第。

あくまで既存の論点を列挙するのみで、とくに解はありません。

リストか否か

§

  • HTML 仕様の Common idioms(WHATWG) では段落（<p> 要素）が推奨されている
  • W3C HTML 5.1 (WD) 時代、リストが推奨されることになり議論を呼んだことがある
    • 2013年5月28日版(W3C)以前は段落
    • 2013年10月29日版(W3C)以降はリスト（2013年9月頃に HTML 5.1 Nightly で変更された当初は <ol> 要素だったがすぐに <ul> 要素に再変更された）
    • 余談だがリストのバージョンで class でなく id が使われているのが時代を感じる（CSS セレクター用途に id を使う文化は2014年には既に廃れていた気もするが）
  • これに関連して「パンくずリスト」の呼び方を嫌う考え(kidachi.kazuhi.to)もある
  • 多くのサイトでは近接してグローバルナビがあるので、パンくずナビをリストにするとリストが連続してしまう
    • スクリーンリーダーなどの支援技術に対しては見出しや aria-label 属性等で適切な名前付け(W3C)を行えば良い
    • 一方で制作者スタイルシートが適用されない環境ではかなり微妙
  • そもそもグローバルナビやローカルナビと異なり、パンくずナビは横並びであることに意味があるのでは
    • 制作者スタイルシートが適用されない限り、見た目で意図が伝わらないマークアップは適切とは言えないのではないだろうか
    • HTML は HTML 単体でユーザーに意図が伝わる必要がある（持論）
    • なので私はリスト使わない派

リストにするなら <ol>, <ul>, <dl> のどれなのか

§

  • ARIA Authoring Practices Guide のサンプル(W3C) は <ol> 要素
  • WCAG 2.2 Techniques の G65(W3C) は <ul> 要素
  • 前述のとおり W3C HTML 仕様は <ul> 要素だった
  • <dl> 要素を使った例👉日本郵政(www.japanpost.jp)の下層ページ
    • セパレーターを画像にしたうえで、その代替テキストを alt="の中の" としていることから分かるように古い時代に設計されたものであることに留意

<nav> 要素を使うか否か

§

  • 主要なナビゲーションブロック(WHATWG)に相当するのか
  • HTML 仕様、APG、WCAG Techniques でのマークアップ例はいずれも <nav> 要素を使用
  • 使うにしてもアクセシブルネームを設定してグローバルナビ等との区別をすることはほぼ必須

class 属性値は breadcrumb か topic-path か

§

現在地はリンクするか

§

  • しない派の方法として、HTML4 時代は <em> 要素がよく見られた
    • 自分もやっていたがベストな方法とは思っておらず、強調とはニュアンスが違うけれど他とは区別したいからと消極的な理由で採用していた
    • 今ならそれ <b> 要素なのでは
    • <em> にしろ <b> にしろ、制作者スタイルシートを適用させないと（UA スタイルシートのみでは）太字や斜字になってしまうことには違和感もある
  • リンクにならないことで他とは区別できているのでは
    • href 属性なしの <a> 要素か、<span> 要素でも良い
  • aria-current="page" を付けるのも良いと思う
    • リストの場合、<li> に付けるか、それとも中の <span> なりに付けるか
    • WAI-ARIA 1.2 仕様だと aria-current="page" は a link within a set of pagination links(W3C) と使用箇所が明記されている（ページネーションでしか使えないとなるとかなり限定的）
    • WAI-ARIA 1.3 (FPWD) では緩和されているので気にしなくてよさそう

現在地のラベル

§

  • 普通にページ名にするケースが多い
  • 「現在のページ」などの固定文言で良いのでは
    • 一般的な構造のサイトでは直後に <h1> で同じ事（ページ名）が書かれている
    • 最初のリンク（最上位ページへのリンク）だってページ名でなく「ホーム」や「トップ」のような“役割”が書かれているのだから、現在地も役割にして不自然ではない

挿入位置

§

  • グローバルナビゲーションの下に置かれるケースが多い
  • コンテンツエリアの最下部（ページフッターの上）に配置されるケースもある
    • コンテンツを読み終わってから上位コンテンツにナビゲーションするのが自然な流れとの理屈（たぶん）
  • マークアップ的には <header>（あるいは <footer>） 内? それとも <main> 内?
  • いや <head> だろう(X)
  • 最近になって WCAG Techniques で挿入位置のベストプラクティスを明記しようとする動き(GitHub)がある