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

投稿

この話題何度目だよと思ったり思わなかったりもするのですが、そういえば本ブログで思考をまとめたことはなかったし、未だに最適解が定まっていないものでもあるし、あと一時期は食傷気味だったのが最近は誰もこの議論しないので少し寂しい思いもあり(笑)、そして 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 か

§

挿入位置

§

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