サイト内検索

nav 要素を使ったセマンティックなナビゲーション

この記事は、html5doctor に掲載されている記事「Semantic navigation with the nav element」を日本語訳したものです。この記事では、nav 要素の正しい使い方を解説しています。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

nav 要素を使ったセマンティックなナビゲーション

HTML5 の新要素のひとつに <nav> 要素があるが、これを使って、リンクをまとめることができる。こうすることで、これまで以上にセマンティックなマークアップになり、スクリーンリーダーに役立つ構造となるのだ。この記事では、この要素をどこでどのようにして使うのか、そして、私が仕様定義から考える制約について話そう。

最初、私は、<nav> をとても簡単なものと侮っていた。確かに使うのは簡単なのだが、仕様の説明は、あまりにも参考にならないと思った。多くの疑問がディベロッパーに残されたままだ。その後、月曜日に、Hixie が、草案にある <nav>定義を変更した。我ら Bruce 先生からの指摘に従ったのだ。

それをどうやって使うのか

あなたは、たぶん、こんな具合に使ってきたのではないだろうか。

<div id="nav">
<ul>
<li><a.... etc

それとも

<ul id="mainNav">

あなたのマークアップを、こんな風に変更したらどうだろう。ほとんど変更していない。

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

仕様

HTML5 仕様<nav> を次のように定義している:

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーションのリンクを伴うセクションを表します。ページ上のすべてのリンクのグループが nav 要素の中にある必要はありません。重要なナビゲーションブロックからなるセクションだけが、nav 要素に適しています。とりわけ、サイトのさまざまなキーとなる部分へのリンクのリストをフッターに入れることが一般的ですが、このような場合においては、footer 要素のほうが適しています。これらのリンクには、nav 要素を使う必要はありません。

重要なフレーズは “主要な(major)ナビゲーション” だ(以前は、最初の(primary)ナビゲーションだった)。

仕様にある例を見てほしい – 次の例では、ページに、リンクが存在する場所がいくつかある。しかし、これらのうち、ひとつの場所だけが、ナビゲーションのセクションとして見なされるのだ。

<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>

<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>

</header>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>

これでは使いものにならない、と私は言いたい。header 要素には 6 項目のナビゲーションがある。しかし、3 つしか nav タグに入れられていない。最初の 3 つのリンクと、次にある 3 つのリンクに、どんな違いがあるというのだろうか。説明がつかないだろう。

仕様には、もうひとつ例がある:

<body>
<h1>The Wiki Center Of Exampland</h1>

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>

<article>
<header>
<h1>Demos in Exampland</h1>

<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>

</header>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>

これは、さっきよりかは、少しは役に立つ。<nav> 要素の最大の問題は、どのリンクのセットが主要なナビゲーションとして分類されるべきなのかを決定することだ。

それをどこで使う?

もし、あなたが、このサイトのソースコードを見たら、3 カ所に nav 要素を使っているのが分かるだろう(ページネーションも入れたら 4 つある)。私たちは、メインのナビゲーションと、フッターの手前で nav 要素を使った(どちらも、まったく同じリンクだ)。私たちは、アクセシビリティーのために入れたスキップ・リンクで、nav 要素を使うことにした。

このサイトのコンテンツを見て、補足記事にリストされている最新記事とカテゴリーに <nav> 要素を使っている点が争点となるだろう。あなたはこうすべきと思うかい? 正直なところ、私は、仕様を見てからは、それは難しいと思っている。私は、これらは "主要なナビゲーション" ではないと言いたいが、とりわけ、あなたが、これら領域のナビゲーションが、あなたのユーザーがサイトをナビゲートする手段として '主要' だと判断するなら、そうしたくなるだろう。

その他の可能な用途

次は、サイトの別の領域で <nav> 要素が使えると考えらる例だ。XHTML 2 に <nl> 要素があるけれども、これは、HTML5 では採用されなかった。なぜなら、ナビゲーションは、次に見るように、リスト形式を取らなければいけないわけではないからだ。

  • 目次
    もちろん yes だ。これは特にコンテンツにとっては主たるナビゲーションだ。
  • 前へ/次へ ボタン(またはページネーション)
    これにいては yes と言えるだろう。これはブログサイトの全体構造や階層にとって重要だからだ。
  • 検索フォーム
    私なら、もちろん yes だ。しかし、仕様には書かれていない。検索フォームはサイトのナビゲーションには極めて重要だ。特に自前の検索エンジンに依存する大規模サイトではそうだ。
  • パンくずリスト
    これも yes と言えるだろう。パンくずリストはいつも必要というわけではなく、適用しなくても使えるけれども、大規模サイトでは、パンくずリストの導線は重要なナビゲーションとなる。

nav と menu の違い

知らないかもしれないが、HTML5 仕様には、他にも混乱を招く要素がある。それは menu だ。私は、ナビゲーションに、<nav> 要素ではなく <menu> 要素を使うディベロッパーがいることに気づいた。私たちは、<menu> 要素はコマンドのリストに使うべきで、これはインタラクティブ要素であり、もっぱらウェブアプリケーションで使われるものだということを、はっきりしておきたいと思った。私たちは、<menu> 要素についての詳細を、後日、改めて投稿するつもりだ。

最後に …

コミュニティの助けや、願わくば、もっと明確な仕様さえあれば、私たちは、<nav> 要素をどのようなときに使うべきで、どういうときに使うべきではないのか、はっきりすることができるだろう。