ARIA: contentinfo ロール

{{ariaref}}

contentinfo ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用されます。 このセクションは一般的にフッターと呼ばれます。

<div role="contentinfo">
  <h2>フッター</h2>
  <!-- フッターのコンテンツ -->
</div>

これはウェブサイトのフッターです。 代わりに <footer> 要素を使用することをお勧めします。

<footer>
  <h2>フッター</h2>
  <!-- フッターのコンテンツ -->
</footer>

説明

contentinfo ロールは、ページフッターを識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1ページあたり1つのトップレベルの contentinfo ランドマークロールのみが含まれているべきです。

各ページには、<footer> 要素を使用するか、または role="contentinfo" を宣言することによって作成された contentinfo ランドマークが1つだけ含まれているべきです。 <iframe> 要素を介して埋め込まれたコンテンツに存在する contentinfo ランドマークは、この制限に含まれません。

<footer> 要素を使用すると、自動的にセクションに contentinfo ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の既知の問題をテストしてください。

例

<body>

  <!-- 他のページのコンテンツ -->

  <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>
    </ul>
    <p>© 2005-2018 Mozilla および各貢献者 コンテンツは <a href="#">これらのライセンス</a> の下で公開されています。</p>
  </div>
</body>

アクセシビリティに関する懸念

控えめに使用する

ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ページあたり1つの contentinfo ランドマーク

<body> 要素

<body> 要素の直接の子孫として使用される文書ごとに1つの contentinfo ランドマークが存在するべきです。

メガフッター

文書のフッターの中に追加の <footer> 要素や contentinfo ランドマークを入れ子にしないでください。 代わりに、他のコンテンツセクショニング要素を使用してください。

ランドマークのラベル付け

複数のランドマーク

文書に複数の contentinfo ランドマークロールや <footer> 要素がある場合は、各ランドマークの aria-label 属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。

<body>

  ...

  <article>
    <h2>毎日パッタイ</h2>
    <!-- 記事のコンテンツ -->
    <footer aria-label="毎日パッタイのメタデータ">
      <p><a href="#">リサ</a>によって<time datetime="2018-09-23 12:17">5月16日</time>に投稿されました。</p>
    </footer>
  </article>

  ...

  <footer aria-label="フッター">
    <!-- フッターのコンテンツ -->
  </footer>
</body>

冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="フッター" の role="contentinfo" の宣言は、"contentinfo フッター" として重複してアナウンスすることができます。

ベストプラクティス

好ましい HTML

<body> 要素の直接の子孫である場合、<footer> 要素を使用すると、自動的にセクションが contentinfo ロールを持つことを伝えます（VoiceOver の既知の問題は別として）。 可能であれば、代わりに <footer> を使用することをお勧めします。 <article>、<aside>、<main>、<nav>、<section> 内にネストされた <footer> 要素は、contentinfo とはみなされないことに注意してください。

追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。

仕様

スクリーンリーダーのサポート

関連情報