H97: nav 要素を使用して、関連したリンクをグループ化する

適用 (対象)

関係のあるリンクを含む HTML5 文書。

これは達成方法 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす慣習的な達成方法) に関する達成方法である。

解説

この達成方法の目的は、HTML5 nav 要素を使ってナビゲーションリンクをグループ化することである。nav 要素は、HTML5 のいくつかの区分される要素の一つである。このマークアップを使うと、スクリーンリーダーのような支援技術の利用者が過去に場所を確認してスキップしたリンクを分類するのが容易になる。セマンティックな構造を使うと、カスタムスタイルシートでそれらの関係性を維持しながらリンクのグループの提示を変更できる。nav 要素がページ上で複数回使用されている場合は、aria-label 又は aria-labelledby 属性を使用してナビゲーショングループを区別する。

リンクのグループ全てを　nav 要素でマークアップする必要は無い。例として、リンクはリストのような他の構造にグループ化されることもあり、またはページの分離されたセクションを表現しない場合 ARIA マークアップを使うこともある。

訳注

WAIC では H97 に関するアクセシビリティサポーテッド（AS）情報を提供している。2020 年 3 月版のアクセシビリティサポーテッド（AS）情報: H97 も参照されたい。

事例

例 1: 一つの nav 要素に囲まれたナビゲーションリンク

この例は、アクセシビリティカリキュラムにおけるナビゲーションリンクを分類するために nav 要素を使う。

				 <nav>
				    <a href="../webaccessibility.html">Web Accessibility</a>
				    <a href="../docaccessibility.html">Document Accessibility</a>
					<a href="../mobileaccessibility.html">Mobile Accessibility</a>
				 </nav>

例 2: 多くの nav 要素

この例は、文書中に一つ以上の nav 要素があるときに、ナビゲーション分類を識別するために aria-label 属性と nav 要素を使う。

			<nav aria-label="Site menu">
			  <ul>
				  <li>...a list of links site navigation link here ...</li>
			  </ul>
			</nav>
			...
			<article>
			  <nav aria-label="Related links">
				...a list of related links here ...
			  </nav>
			</article>

例 3: 一般的な多くの nav 要素

以下の例は、同じページに二つ以上のナビゲーションメニューが存在し、ラベルとして参照されうるページ上に既存のテキストが無いという状況での良い事例である。

			<nav aria-label="primary">
				<a href="home.html">Home</a>
				<a href="about-us.html">About Us</a>
				<a href="products.html">Products</a>
			</nav>

			<nav aria-label="secondary">
				<a href="adverts.html">Our Advertisers</a>
				<a href="related.html">Related Links</a>
				<a href="subsidiaries.html">Subsidiaries</a>
			</nav>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

HTML5 nav element

訳注

上記 HTML5 nav element はリンクが切れている。HTML §4.3.4 The nav element を代わりに参照できる。

検証

手順

視覚的に寄せ集められておりページのセクションを表現するリンクが nav 要素で囲まれていることを確認する。

期待される結果

#1 の結果が真である。

nav 要素を使用して、関連したリンクをグループ化する

達成方法に関する重要な情報