contentinfo ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用されます。 このセクションは一般的にフッターと呼ばれます。
コンテンツ情報 (contentinfo) ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用します。 このセクションは一般的にフッターと呼ばれます。
<div role="contentinfo"> <h2>フッター</h2> @@ -27,54 +25,54 @@ translation_of: Web/Accessibility/ARIA/Roles/Contentinfo_role説明
-+
contentinfoロールは、ページフッターを識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1ページあたり1つのトップレベルのcontentinfoランドマークロールのみが含まれているべきです。コンテンツ情報 (
-contentinfo) ロールは、ページフッターを識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1ページあたり1つのトップレベルのコンテンツ情報 (contentinfo) ランドマークロールのみが含まれているべきです。各ページには、{{htmlelement("footer")}} 要素を使用するか、または
+role="contentinfo"を宣言することによって作成されたcontentinfoランドマークが1つだけ含まれているべきです。 {{htmlelement("iframe")}} 要素を介して埋め込まれたコンテンツに存在するcontentinfoランドマークは、この制限に含まれません。各ページには、{{htmlelement("footer")}} 要素を使用するか、または
role="contentinfo"を宣言することによって作成されたコンテンツ情報 (contentinfo) ランドマークが1つだけ含まれているべきです。 {{htmlelement("iframe")}} 要素を介して埋め込まれたコンテンツに存在するコンテンツ情報 (contentinfo) ランドマークは、この制限に含まれません。-{{htmlelement("footer")}} 要素を使用すると、自動的にセクションに
+contentinfoロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の既知の問題をテストしてください。{{htmlelement("footer")}} 要素を使用すると、自動的にセクションがコンテンツ情報 (
contentinfo) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、念のため VoiceOver の既知の問題をテストしてください。例
-<body> +<body> -<!-- 他のページのコンテンツ --> + <!-- 他のページのコンテンツ --> - <div role="contentinfo"> + <div role="contentinfo"> <h2>MDN Web Docs</h2> <ul> - <li><a href="#">ウェブ技術</a></li> - <li><a href="#">ウェブ開発について学ぶ</a></li> - <li><a href="#">MDN について</a></li> - <li><a href="#">フィードバック</a></li> + <li><a href="#">ウェブ技術</a></li> + <li><a href="#">ウェブ開発について学ぶ</a></li> + <li><a href="#">MDN について</a></li> + <li><a href="#">フィードバック</a></li> </ul> - <p>© 2005-2018 Mozilla および各貢献者 コンテンツは <a href="#">これらのライセンス</a> の下で公開されています。</p> - </div> -</body> + <p>© 2005-2018 Mozilla および各貢献者 コンテンツは <a href="#">これらのライセンス</a> の下で公開されています。</p> + </div> +</body>アクセシビリティに関する懸念
控えめに使用する
-ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
+ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
ページあたり1つの
-contentinfoランドマーク+
<body>要素-
<body>要素{{htmlelement("body")}} 要素の直接の子孫として使用される文書ごとに1つの
+contentinfoランドマークが存在するべきです。{{htmlelement("body")}} 要素の直接の子孫として使用し、文書ごとに1つだけコンテンツ情報 (
-contentinfo) ランドマークが存在するべきです。メガフッター
+巨大フッター
-文書のフッターの中に追加の {{htmlelement("footer")}} 要素や
+contentinfoランドマークを入れ子にしないでください。 代わりに、他のコンテンツセクショニング要素を使用してください。文書のフッターの中に追加の {{htmlelement("footer")}} 要素やコンテンツ情報 (
contentinfo) ランドマークをネストしないでください。 代わりに、他のコンテンツセクショニング要素を使用してください。ランドマークのラベル付け
複数のランドマーク
-文書に複数の
+contentinfoランドマークロールや {{htmlelement("footer")}} 要素がある場合は、各ランドマークのaria-label属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。文書に複数のコンテンツ情報 (
contentinfo) ランドマークロールや {{htmlelement("footer")}} 要素がある場合は、各ランドマークのaria-label属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。<body> @@ -97,20 +95,20 @@ translation_of: Web/Accessibility/ARIA/Roles/Contentinfo_role冗長な説明
-スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、
+aria-label="フッター"のrole="contentinfo"の宣言は、"contentinfo フッター" として重複してアナウンスすることができます。スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、
aria-label="フッター"のrole="contentinfo"の宣言は、"contentinfo フッター" として重複してアナウンスされることがあります。ベストプラクティス
好ましい HTML
-{{htmlelement("body")}} 要素の直接の子孫である場合、{{htmlelement("footer")}} 要素を使用すると、自動的にセクションが
+contentinfoロールを持つことを伝えます（VoiceOver の既知の問題は別として）。 可能であれば、代わりに<footer>を使用することをお勧めします。<article>、<aside>、<main>、<nav>、<section>内にネストされた<footer>要素は、contentinfoとはみなされないことに注意してください。{{htmlelement("body")}} 要素の直接の子孫である場合、{{htmlelement("footer")}} 要素を使用すると、自動的にセクションがコンテンツ情報 (
contentinfo) ロールを持つことを伝えます (VoiceOver の既知の問題は別として)。 可能であれば、代わりに<footer>を使用することをお勧めします。<article>、<aside>、<main>、<nav>、<section>内にネストされた<footer>要素は、コンテンツ情報 (contentinfo) とはみなされないことに注意してください。追加された利点
ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。