navの使い方について

[you sakai]

WEBCRE8.jp( http://webcre8.jp/ )の酒井(@glatyou)です。

HTML5のタグの使い方について質問です。

昨晩Twitterで「nav」の使い方について話しました。 #HTML5のタグは百八つまであるぞ #nav というハッシュタグで内容を追う事が出来ます。

その中で判然としなかった部分について質問です。

【論点】
①navは「主要なナビゲーション」に使われるとあるが、「主要」の判断基準はどこか
②ページの目次、ページャ(サイトではなく、記事、単一コンテンツにとっての主要なナビ)はnavに含むのか

以下思考の流れを書きますが、長いので読みたい人は読んでください(笑)。

【考察】
①navは「主要なナビゲーション」に使われるとあるが、「主要」の判断基準はどこか
まずナビゲーションを「各ページに辿りつく為の機能的なリンクの塊」と定義しました。

これに当てはまるよくあるパーツは

・グローバルナビ
・機能的なメニュー（設定等）
・パンくずナビ
・フッタリンク集
・一覧のページャ（番号のもの、次の記事前の記事等）
・カテゴリリスト、ブログロール等のサイドメニュー
・コンテンツ内のページャ（番号のもの、次へ、前へ等）
・目次（table of contents）
・ステップアップナビ（登録フロー等の進捗）
・ページトップへ戻る（これは塊じゃないですが、このリンクを含め、サイト自体のコントロールメニューをコンテキストメニューの様にグルーピングしたものは想定できると思います）

等があります。

このうち上3つは文句なしにnav、つまり主要なナビだと判断されました。ただ、直観的にもそう感じるのですが理論的な切り分けが難しいです。

そこで僕は「主要なナビ」について「1.body(ページ)直下にあるナビは主要である」という仮定義を作りました。これにより、通常asideに入るカテゴリリストは「bodyにはあまり関係ない」ナビであり、主要ではないと判断できます。ヘッダはセクショニング的にbodyの直下なのでグローバルナビやヘッダメニューは主要です。ただ、この定義で行くとフッタメニューも当てはまりそうです（一応フッタもナビで良いんじゃないかって話があるとは聞きました）。

上記のように考えた上で次に考えられるのは「2.主要なナビはページを閲覧する上で最低限必要なナビである」と定義を追加する事です。こうすると、フッタメニューはグローバルメニューに対して従であると考えられ、主要でなくなります。

当然上記二つの定義だけだとarticle(メインコンテンツ)内にあるナビは主要でないことになります。

②ページの目次、ページャ(サイトではなく、記事、単一コンテンツにとっての主要なナビ)はnavに含むのか
この二つはコンテンツのあるページ自体（body）にとってはそうでないものの、記事(メインコンテンツ)にとっては重要です。特にW3Cのリファレンスの様なものの場合、ページ内リンクは使い勝手的にも重要なナビです。これがページ分割になった場合もやはり、全てのページを閲覧するためにページャが重要です。また、特にwebアプリ等にとって会員登録のステップアップナビ等も重要です(これはパンくずのようにbody直下におけばいいかも)。これらは「主要な」ナビと言えないでしょうか？「3.body直下のみでなく、メインコンテンツ直下のナビも、それが重要なら主要なナビとみなす」という定義が増やせそうです。

個人的にはこれを主要なナビと思いたいですが、そうなるとnavの出番はかなり多くなります。

この件と別に、記事一覧ページ（ブログのホームやカテゴリ内一覧等）のページャは全てのページに辿りつくための主要なナビと言える気がします。

【まとめ】
上記をまとめると、主要であるかどうかの判断のポイントは厳しい順に、

・サイトを閲覧することにおいて「最低限」必要なナビがnav（グローバルナビ、機能ナビのみ）
・「サイト内の全てのコンテンツ」を閲覧することにおいて最低限必要なナビがnav（カテゴリ毎、ホーム等のページャを含む）
・セクショニング的にページの「body直下」にある最低限必要なナビ全てがnav（パンくず、ステップアップナビを含む）
・「最低限必要なわけではなくても」目的がナビゲーションでbody直下にあるナビならnav(フッタナビ、ページトップへを含む)
・body直下だけでなくセクショニング的に「主要なコンテンツ(article等)直下」にあるナビもnav（記事内のページャ、目次を含む）

となります。

理屈で考えるとかなりのパーツがnavになってしまうのですが、どこまでをnavと考えるべきでしょうか。僕は全てがnavである可能性もあると思っていますが、心情的には「4行目以下はnavではない」と論破されたいです(笑)。「主要なナビ」というものを「主なページさえ見られればいい」と考えるか「とりあえず深い階層も含め全ページを見られなければならない」と考えるかによっても変わってきますね。

もちろん、これはコンテキストやサイトの規模も関係すると思いますし、解釈による(サイト作成者が主要って言うなら主要でしょ)とも言えるんですが…。

【個人的な結論】
navタグを使うべきナビは、「body直下もしくはメインコンテンツ内にあるサイト内の全ページを閲覧する上で最低限必要な機能的リンクパーツ」、すなわち

・グローバルメニュー
・ヘッダの機能メニュー
・パンくずナビ、ステップアップナビ
・ページャ（全て）
・目次
・ページTOPへの移動を含む機能的なメニュー（大抵の場合ページTOPしかないが、例えばコンテキストメニューの様なリンクをまとめて設置することは考えられる。これはサイトにおいて重要なナビゲーションであるかと思われる）

である。

フッタメニューは最低限必要でなく、カテゴリリンクはメインコンテンツ外にセクショニングされている為主要なナビとみなしません。

以上です。これらについて「これは○○な為navではない」などといった考えを聞かせてもらえれば幸いです。

何卒宜しくお願い致します。

----------------------------------
酒井優(@glatyou)
WEBCRE8.jp
http://webcre8.jp/
----------------------------------

[IWAI, Masaharu]

岩井です。

2012年9月5日 11:15 you sakai <goodlucka...@gmail.com>:

> 【論点】
> ①navは「主要なナビゲーション」に使われるとあるが、「主要」の判断基準はどこか
> ②ページの目次、ページャ(サイトではなく、記事、単一コンテンツにとっての主要なナビ)はnavに含むのか

header要素、footer要素、aside要素の中身には存在しえないけど必要なナビゲーションは、
削れないナビゲーション→主要なナビゲーション→navi要素の出番
と考えていいんじゃないかという気がしています。
こうすれば、メインコンテンツになるところはDOMなどで手軽に抜き出せるし。
# 正確には、メインコンテンツ以外を手軽に削れる

関連しそうな話題が先日でてたみたいですね。

消去法（謎）によるメインコンテンツの明示、またはメインコンテンツとは何か
http://kidachi.kazuhi.to/blog/archives/037573.html


--
いわい

[you sakai]

岩井さん

くそ長い文章で済みません、ご返答有難う御座います！

では、headerに入るような機能メニューはnavではないですかね？
リンク記事は初めて見ましたが、なるほどこの考え方を参照するならメインコンテンツはheader,footer,nav以外（asideもじゃないですかね）の全てとなるので、article内外は関係ないですね。

メインコンテンツを抜き出そうと思ったときページャ等を含まないこともしっくりくるのでそれも賛成できます。

あとはパンくず、目次をnavにしていいのか、でしょうか。

2012年9月5日 12:02 IWAI, Masaharu <iwai...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

[IWAI, Masaharu]

岩井です。

2012年9月5日 12:18 you sakai <goodlucka...@gmail.com>:
> では、headerに入るような機能メニューはnavではないですかね？

ああ、すみません。
もちろんnav要素になるケースもあると思います。
結局、コンテンツを踏まえて考えねばならん話ですけど、
「コンテンツとして大事なナビゲーション」が「主要なナビゲーション」だろうと。
# このあたり、書き忘れてました……

同じようなコンテンツで同じような構成でも、ブログとして使っているなら
「新しいエントリー」「古いエントリー」は主要なナビゲーションではないかもしれないけど、
日記として使っているなら「前日」「翌日」は主要なナビゲーションだろう、とか。


> あとはパンくず、目次をnavにしていいのか、でしょうか。

コンテンツ次第だろうと思います。


--
いわい

[Futomi Hatano]

酒井さん、

<nav>の使いどころの基準は仕様で厳密には定められていません（というより
定めようがない）ので、制作者の意図に委ねられます。
さらに、現在のHTML5仕様では「主要な」という表現は削除されています。
http://www.w3.org/TR/html5/the-nav-element.html#the-nav-element
より曖昧に、別の言い方をすると、より柔軟に使えるようになりました。
とはいえ、Noteに、使いどころのガイドライン的な文章が掲載されています
ので、以前と基本的には変わりません。
ということで、無条件に、あらゆるリンク グループに<nav>を使うのは問題
です。

スクリーン リーダーを想像すると分かりやすいと思います。
そのスクリーン リーダーが、ページのナビゲーションだけを呼び出すコマン
ドを持っていたとしましょう。
そのとき、あらゆるリンクが読み上げられてしまったら、利用者はうんざり
します。必要最小限で、重要なリンクだけが読み上げられる方が、利用者に
優しいのは明かです。
ということで、スクリーン リーダーがナビゲーションを読み上げるときに、
読み上げてもらいたいと思うナビゲーションだけに<nav>を使うのが良いと思
います。

もうひとつ、<nav>の使い方について、私の考えを。
グローバルナビは、アウトライン上、<body>の直下となるよう、<nav>を配置
します。
パンくずは、グローバルナビでなく、セクションに関連するナビゲーション
ですので、<article>または<section>の中に入れます。

<body>
<header>
<h1>サイト名</h1>
<nav>グローバルナビ<nav>
</header>
<article>
<nav>パンくず</nav>
<h2>記事見出し</h2>
...
</article>
...
<footer>
<!-- 通常はnavを使わない -->
</footer>
</body>

こうすれば、グローバルナビなのか、記事に関連するナビなのかを、区別す
ることが可能となります。
このように、アウトラインを意識して<nav>を配置すれば、将来的に、ソフト
ウェアで、効率的にナビゲーションを抽出しやすくなると思う次第です。

余談ですが、HTML仕様では、スクリーン リーダーはページを読み上げる際に、
<nav>をスキップするということも想定しています。

羽田野


--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi

[hebikuzure]

なるほど、論理的にどうあるべきかと言うだけでなく、実際の利用シナリオに則ってどうなっているとユーザーにとって利便性が高いか、という事も重要ですね。

2012/09/05 14:28 "Futomi Hatano" <futomi...@gmail.com>:

[you sakai]

羽田野さん

ご回答有難う御座います。

今まさに昨日話していた部分で、ちょっと興奮しているところです(笑)。

前半の「主要」については単なるチェック不足でした。なるほど。でもその後のリーダについての話で、実際にどう使えばいいかちょっと見えてきますね。

コンテンツ次第という事は承知しているつもりで、その判断基準としてこの説明は非常に納得できます。僕はコーディングにおいて皆が何を使えばいいか？を迷う時間を減らすことを目的としているので、こういう視点は有難いです。

そしてパンくずについてですが、これは私自身昨日まで「パンくずは記事のありかを示す為、article内になるべき。外に出すとパンくずとパンくずの指す記事の関連付けができない」と考えていました。

これについて複数の方から「パンくずはあくまで記事でなくその記事の存在するwebページを地点として指しているもの」と言う意見があり、僕自身もその理屈の方が合っているかも、と思ったところでした。

もしかしたらこれも人によって使い方が分かれるのかも知れませんが、もしパンくずがarticleの一部と考えるなら僕の元の考えと羽田野さんの解釈、パンくずを今のページ自体の地点を示すものと考えるなら昨日皆に聞いた解釈と言う風になるかと思います。単にパンくずの扱い次第と言うことになりますかね。

2012年9月5日 14:28 Futomi Hatano <futomi...@gmail.com>:

[you sakai]

岩井さん

その通りですね。確かに何の意図で書かれたサイト、ページ、コンテンツかによって、見た目は似ていても扱いが違ってくると思います。

----------------------------------
酒井優(@glatyou)
WEBCRE8.jp
http://webcre8.jp/
----------------------------------

2012年9月5日 13:44 IWAI, Masaharu <iwai...@gmail.com>:

[mount-root-yy]

nav要素も一応はセクショニング要素ではありますから、まずは、h1-h6要素で見出しを入れたら不自然になるかそうでないかで、足切りしてみるのがよさそうですね。
足切りされなかったものについて、主要なナビゲーションかどうかを改めて考えてみるということで。


セクショニング要素にはh1-h6要素による見出し入れは必須とはされてないものの、見出しが明示されてなくても黙示の見出しをもつとされてます。
黙示の見出しの具体的な文言を機械的に判定することは無理でも、HTML作成者の人間なら見出しとして想定しうる文言はすぐに思い浮かぶはず。すぐに思い浮かばないようなら、そもそもそのブロックをセクショニング要素でくくること自体が不適当である可能性大です。
グローバルナビゲーションブロックなら「サイトナビ」とか、ページ内目次のナビゲーションなら「目次」とかいった文言で見出しをつけることはできるでしょう（実際にそういう見出しをh1-h6要素で入れるかどうかは別として）。


となると、パンくずリストは微妙な境界線上の事例のように思えます。
パンくずリストを以下のようにマークアップするのは、個人的にはありだとは思ってます。

＜section＞
＜h1＞現在位置＜/h1＞
＜a href="example.html"＞カテゴリー１＜/a＞　＞　このページ
＜/section＞

でも、こんな見出し入れは不自然だと思う人もいるかもしれません。そういう人は、パンくずリストをセクショニング要素でくくるべきではない。
こんな見出し入れも普通にありだと思う人は、そこで改めてこのパンくずリストが主要なナビゲーションかどうか考えてみて、そうだと思うなら、section要素をnav要素に変更すればいいと思います。そのうえで、見出しを省略するかどうかを判断すればいい。


2012年9月5日水曜日 11時16分04秒 UTC+9 You Sakai:

[IWAI, Masaharu]

岩井です。

2012年9月5日 19:11 mount-root-yy <mtro...@gmail.com>:

> となると、パンくずリストは微妙な境界線上の事例のように思えます。
> パンくずリストを以下のようにマークアップするのは、個人的にはありだとは思ってます。
>
> ＜section＞
> ＜h1＞現在位置＜/h1＞
> ＜a href="example.html"＞カテゴリー１＜/a＞　＞　このページ
> ＜/section＞
>
> でも、こんな見出し入れは不自然だと思う人もいるかもしれません。そういう人は、パンくずリストをセクショニング要素でくくるべきではない。
> こんな見出し入れも普通にありだと思う人は、そこで改めてこのパンくずリストが主要なナビゲーションかどうか考えてみて、そうだと思うなら、section要素をnav要素に変更すればいいと思います。そのうえで、見出しを省略するかどうかを判断すればいい。

「パンくずリスト」という見出しがあってもいいとは思いますけど、そういうのは無しだと思いますか？

--
いわい

[you sakai]

mount-root-yyさん

これまた目からウロコの見解です…！そうですね。確かにセクショニングコンテンツであることを考えると、タイトルが入り得るかは重要な気がします。

微妙な位置にあるというのもそうですね。見出しをつけようと思えばつけられるし、無理があると言えば無理です。

ページャはこの観点だと変な気もしますけど、これもやはりそれがそのコンテンツにとって重みが強いかどうかで変わってきそうですね。

2012年9月5日 19:11 mount-root-yy <mtro...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/BnKMd0G-g1sJ
> にアクセスしてください。

[mount-root-yy]

＞「パンくずリスト」という見出しがあってもいいとは思いますけど、そういうのは無しだと思いますか？

ありだとは思いますが、webサイト作成にかかわったことが全くない閲覧者にとっては、その文言は謎の専門用語ですから、実際に見出しとして明示するなら不適切かもしれませんね。
その筋の人たちだけを想定閲覧者とするなら、全然かまわないでしょうけれども。


2012年9月5日水曜日 19時14分30秒 UTC+9 iwaim:

[IWAI, Masaharu]

岩井です。

2012年9月5日 19:48 mount-root-yy <mtro...@gmail.com>:

> ＞「パンくずリスト」という見出しがあってもいいとは思いますけど、そういうのは無しだと思いますか？
>
> ありだとは思いますが、webサイト作成にかかわったことが全くない閲覧者にとっては、その文言は謎の専門用語ですから、実際に見出しとして明示するなら不適切かもしれませんね。
> その筋の人たちだけを想定閲覧者とするなら、全然かまわないでしょうけれども。

そうかなあ。
CSSのvisibilityプロパティやspeakプロパティで何とかしちゃえばいいだけだと思いますよ。

--
いわい

[you sakai]

岩井さん

まあ、つまりそれこそ解釈によると言う事だと思います(笑)。

mount-root-yyさんが仰っているのは「そこにタイトルを置くのが相応しいと思える文脈か」どうかであって、それはその作ろうとしている文書がどういうものかで変わってくるという事だと思います。なかなか普遍的なルールは難しいですね。

しかしこの考え方も、一つのガイドラインとなりそうです。

僕は大した知識もありませんが、このやりとりがこうして僕の様なタグの解釈に迷っている人の参考になればと思います。

皆さんどうも有難う御座いました。


2012年9月5日 21:58 IWAI, Masaharu <iwai...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

[tico]

締め切ってしまったみたいですが、
私の意見もお話します。

単なるリンクの集まりなのか、
別のページへ移動するためのメニューの集まりなのか(ナビゲートする意思がある集合体かどうか)で考えたらどうでしょうか。

パンくずの場合、
メニューというよりは上の階層へ戻るためのリンクに過ぎない
と考えることもできます。

フッターのリンクの集まりもそうです。集合体として何かをナビゲートする意思のあるメニューというより
単なるリンクの集まりだと言うこともできます。

なぜ、全部navにしちゃえよとは思わないかというと、
人間には、とりあえずnavっぽいからnavとしたほうが分かりやすいかもしれませんが
もし私がロボットだったらnavと書いてある場合、
グローバルメニューのような意思のあるナビゲーションの集合体のnavと
何となくリンクを親切に置いておいた集合体のnavとの区別は
つかないと思うからです。

完全にロボットになりきった場合、
もしかしたら同じタグの記事が見たい人がいるかもしれないから
リンクを置いておいてあげた集合体と、
グローバルメニューと同じようなハッキリした意思のある別のページへ移動するためのツールは
navという同じ水準でしか考えられません。

同じ水準で考えてもらっていいよと思う場合はnavにして
いや、同じように扱われると困るよと思う場合はnavにしない
という選択方法もあるかと思います。


tico

[you sakai]

ticoさん

ご回答有難う御座います。

いえ、締め切りなんてことはないですよ！

ここで質問していて、やはり皆さんそれぞれに自身の知見から、気付かなかったことに気付かせてくれるような回答をお持ちなんだなと感動してしてしまいます。

パンくずに関しては確かにTwitterで話していても、「過去に信頼できる事例がある」という理由でnavであるという意見が多かったんですね。根拠に乏しい感はあります。

ただ僕個人としてはパンくずに「webページの縦糸を通す」「どこまで深い階層でも現在位置を知らせ、より上の階層に戻れるようにする」と言う意味でやはりナビゲーション(「主要」という定義はなくなったそうなのでそのままnav)なのではないかと考えています。タグリンクはカテゴリの役割を補完するものなので、最低限のナビゲーションではない気がします。が、はっきりと切り分けられるものでもないですね。

皆さんの意見を総合して、段々とnavと言うモノがはっきりしてきていると思います。

ありがとうございましたー！

2012年9月6日 12:47 tico <tinyc...@gmail.com>: