キーテイクアウト
- ナビゲーションリンクのグループを表すHTML5 NAV要素は、スクリーンリーダーがサイトナビゲーションをスキップし、視覚障害のある人のユーザーエクスペリエンスを改善できるため、ウェブサイトのアクセシビリティを強化するための重要なツールです。
NAV要素は、プライマリナビゲーションバーとセカンダリリンクの場合、単一ページで複数回使用できます。すべてのナビゲーションリンクには必須ではありませんが、サイトのアクセシビリティとSEOを改善するための主要なナビゲーションブロックに推奨されます。
- 現在のスクリーンリーダーはNAV要素を認識できない場合がありますが、支援技術が進化し続けているため、その使用は奨励されており、Webサイトは将来アクセスできるようにします。
-
この要素がほぼすべてのプロジェクトに表示されると仮定するのは安全です。 NAVは、それが暗示するものを正確に表します:ナビゲーションリンクのグループ。 NAVの最も一般的な用途は、リンクの順序付けられていないリストをラッピングすることですが、他のオプションもあります。また、ページまたはページのセクションの主要なナビゲーションリンクを含むテキストの段落にNAV要素を包むこともできます。
どちらの場合でも、NAV要素は主に重要なナビゲーションのために予約する必要があります。そのため、たとえば、フッター内のリンクの簡単なリストにNAVを使用しないようにすることをお勧めします。
navとアクセシビリティ
多くのサイトで実装されている可能性のある設計パターンは、「スキップナビゲーション」リンクです。アイデアは、スクリーンリーダーのユーザーがすでに聞いたことがある場合は、サイトのメインナビゲーションをすばやくスキップできるようにすることです。結局のところ、クリックするたびに大きなサイトのナビゲーションメニュー全体を聞くことができません。
NAV要素には、このニーズを排除する可能性があります。スクリーンリーダーがNAVを見た場合
要素、ユーザーが追加のリンクを必要とせずにナビゲーションをスキップできるようにすることができます。仕様は次のとおりです。
最初のレンダリングで省略されているナビゲーション情報から利益を得ることができるユーザーを対象とするユーザーエージェント(スクリーンリーダーなど)、またはすぐに利用可能になるナビゲーション情報から利益を得ることができるユーザーは、この要素を使用して、最初にリクエストに応じてスキップおよび/または提供するページ上のコンテンツを決定する方法として使用できます。
現在のスクリーンリーダーはNAVを認識できませんが、これは使用してはならないという意味ではありません。支援技術は進化し続け、あなたのページは将来的にウェブ上にある可能性があります。現在、基準を構築することにより、スクリーンリーダーが改善するにつれて、ページが時間とともにアクセスしやすくなるようにします。
ユーザーエージェントとは?
仕様を閲覧すると、ユーザーエージェントという用語によく遭遇します。本当に、それはブラウザの派手な用語であり、ユーザーがページのコンテンツにアクセスするために採用するソフトウェア「エージェント」です。仕様が単に「ブラウザ」と言っていない理由は、ユーザーエージェントにスクリーンリーダー、またはWebページを読むその他の技術的手段を含めることができるためです。
特定のページでNAVを複数回使用できます。サイトの主要なナビゲーションバーがある場合、これにはNAV要素が必要になります。
さらに、現在のページのさまざまな部分(ページ内のアンカーを使用)を指すリンクの二次セットがある場合、これもNAV要素に包まれる可能性があります。
セクションと同様に、NAVの許容可能な使用を構成するものと、状況によっては推奨されない理由(フッター内など)について議論がありました。一部の開発者は、この要素がページネーションまたはパン界のリンク、またはサイトをナビゲートする主要な手段を構成する検索フォームに適していると考えています(Googleの場合のように)。
この決定は、最終的に開発者次第です。 WhatwgのHTML5仕様の主要な編集者であるIan Hicksonは、「class = navを使用するたびに[それを使用してください]を使用してください」という質問に直接回答しました。[コメントを参照]
これは、Alexis Goldstein、Louis Lazaris&Estelle WeylによるHTML5&CSS3からの抜粋です。
その他のチュートリアルを探していますか?
HTML5 NAV要素について詳しく知りたい場合は、SitePointにはHTML5 NAVメニューに関するさまざまなオンラインチュートリアルがあります。
Laura Athanasiouによるインタラクティブなナビゲーションバーの構築「簡単なナビゲーション構造は、サイトの使いやすさを向上させ、情報を簡単に見つけることができます。基本的なHTMLとCSSを使用することで、ユーザーがナビゲーションリンクを越えたときにインタラクションを提供する水平ナビゲーションバーを構築できます。」
Jean-Pierre GassinによるHTML5/CSS3とWebKitでアニメーションドロップダウンナビゲーションメニューを作成します。
レスポンシブでモバイルに優しいWebサイトをゼロから構築する:Annarita TranficiによるセマンティックHTML「まず第一に、クラシックメニューを作成しましょう。この場合、私たちの目的に最も適した要素は、ウェブサイトのナビゲーションセクションを宣言するために使用されるセマンティック要素です。」
ナビゲーションはリストに定義する必要がありますか?クレイグ・バックラー著「質問:リスト要素は必要ですか?」
Craig BucklerによるCSS3スライディングメニューを構築する方法「この記事では、CSSのみを使用してスライドアウトメニューを構築します。最新のブラウザを使用している場合は、素敵な3Dページ効果も表示されます。」
html5 nav要素についてよく尋ねる質問
html5 nav要素の目的は何ですか?これらのリンクは内部である可能性があり、同じページの異なるセクションにつながるか、外部が異なるページにつながります。 NAV要素は、Webサイトのアクセシビリティを改善し、ユーザーがコンテンツを簡単にナビゲートできるようにするのに役立ちます。例:
セクション1 Page?
はい、1つのページで複数のNAV要素を使用できます。各NAV要素には、ナビゲーションリンクの一意セットが含まれている必要があります。これは、ページのさまざまなセクションの個別のナビゲーションバーを作成するのに役立ちます。これは、NAV要素がWebサイトのアクセシビリティを改善し、ユーザーがコンテンツを簡単に移動できるようにするためです。たとえば、ヘッダー要素内にNAV要素をネストして、ページの上部にナビゲーションバーを作成できます。 NAV要素を使用してナビゲーションリンクを定義することにより、検索エンジンがページの異なるページまたはセクションの関係を理解するのを支援できます。他のHTML要素と同様に、CSSプロパティをNAV要素に適用できます。たとえば、ナビゲーションバーの背景色、フォントサイズ、およびマージンを変更できます。両方の要素をナビゲーションに使用できますが、NAV要素は主要なナビゲーションブロックにより適していますが、メニュー要素はコンテキストメニューにより適しています。ただし、PolyFillを使用して、古いブラウザーのNAV要素のサポートを追加できます。 NAV要素は、ウェブサイトのアクセシビリティとSEOの改善に役立つため、主要なナビゲーションブロックに使用することをお勧めします。