コンテンツとナビゲーションの順序

見た目上ではなくHTMLソース上での話。ネタ元はonderhandのcontent vs sub navigationという記事。ここではサブナビゲーションを前にするということは訪問者に本来見て欲しいコンテンツよりもどっかに別のとこに行ってもいいよと言うようなもので、どうすればいいのか訪問者に判断させることになりもするとして否定的。つまりナビゲーションは後ろのほうがいいのではないかという。

サブナビゲーションが何を指しているのかいまいちわからないけど、グローバル・ナビゲーションでも記事ごとに設置されるカテゴリーへのリンクなどの補助的なナビゲーションでも話はあまり変わらないと思うのでナビゲーションとして僕なりの考えを書く。

すごく簡単に言うと今はもうHTML5なのでnav要素があるし、アホみたいに長いナビゲーションじゃなかったらどこでも良い。CSSオフの環境がちょっとアレだけど、それはかなり特殊な環境で考慮する必要はないと思うし、長くなければそれほど致命的にもきっとならない。スクリーンリーダーに関しては対応してくれ、と。main要素も出来たことだし！

グローバル・ナビゲーションではメガ・メニューでのケースが考慮に値する。メガ・メニューは漫然とネストされただけのリストをスクリーンにおさまるように適当に並べるというようなものではないので、自然とHTML自体も複雑なものになる。それをHTMLの先頭の方にバーンと並べちゃうと……と懸念するのは少しわかる。しかし、メガ・メニューが必要なサイトはそれだけ複雑な構造をしており、ユーザーの誘導そのもののプライオリティーが高いので、「どっか別のとこに行ってもいいよ」と教えてしまうことは逆に親切にもなりうる。

記事ごとに設置される補助的なナビゲーションの場合、その構成する要素はタグ(カテゴリ)や投稿日時、著者などその記事のメタデータでもあると思うので、記事のタイトル近くに配置された方が記事の概要を把握しやすくて良いと考える人は多い。長い記事を読んで「おっ」とか思ったけど、最後にあった投稿日時見たら実はもう3年以上前の記事で今はもう役に立たないものだったとかだと色々ショックだ。これは見た目という側面が強い話なのでCSSでどうにかすれば良く、ソース上での順序はあまり問題にはならない。

ネタ元では画面の狭いモバイルで本文読み始める前にごちゃごちゃあって邪魔にもなるから、後ろにしておいてデスクトップでは左右に並ぶように配置すればいいみたいな感じだった。それを理由にはしていないので突っ込むのも野暮な感じだけど、単なるどうにかするための手段の話なら、

.grid {
  position: relative;
}

.grid > .navigation {
  position: absolute;
  bottom: 100%;
}

のような形で.navigationを.gridの上端の外に追い出すとかいう方法もあるし、プライオリティーが低いなら思い切って隠しちゃうとかでも良いはず。今はもうCSSもそこそこパワフルなのでビジュアル・デザインとしての解はいくつもあるはず。

このどっちが先かみたいな話はHTMLの仕様で制限がある話ではないので、こうすると良いみたいな話ではない。だけど、こういう点にどういう考えを持っているかとか、どう考えるかみたいなのはたまに自分に問いかけてみたりすると色々凝り固まってるなーとか反省できる気がした。実際に反省した。

昔はなんかナビゲーションは後に書けみたいな宗教があった気がする。検索エンジンのクローラーがページの先頭の方しか持ってかなかったからとかだっけ？　思い出さなくて良さそう。