ARIA: contentinfo ロール
コンテンツ情報 (contentinfo) ランドマークロールは、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用します。 このセクションは一般的にフッターと呼ばれます。
<div role="contentinfo">
<h2>フッター</h2>
<!-- フッターのコンテンツ -->
</div>
これはウェブサイトのフッターです。 代わりに <footer> 要素を使用することをお勧めします。
<footer>
<h2>フッター</h2>
<!-- フッターのコンテンツ -->
</footer>
説明
コンテンツ情報 (contentinfo) ロールは、ページフッターを識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1 ページあたり 1 つのトップレベルのコンテンツ情報 (contentinfo) ランドマークロールのみが含まれているべきです。
各ページには、<footer> 要素を使用するか、または role="contentinfo" を宣言することによって作成されたコンテンツ情報 (contentinfo) ランドマークが 1 つだけ含まれているべきです。 <iframe> 要素を介して埋め込まれたコンテンツに存在するコンテンツ情報 (contentinfo) ランドマークは、この制限に含まれません。
例
<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) とはみなされないことに注意してください。
追加された利点
ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。
- ランドマークブラウザー拡張 (英語)
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # contentinfo |
| Unknown specification |
スクリーンリーダーのサポート
関連情報
<footer>: フッター要素- contentinfo (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- HTML のセクションとアウトラインの使用
- ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group
- Accessible Landmarks | scottohara.me
- The Footer Element Update | HTML5 Doctor
- WAI-ARIA ロール
alertdialog ロールの使用ARIA: alert ロールARIA: application ロールARIA: article ロールARIA: banner ロールARIA: button ロールARIA: cell ロールARIA: checkbox ロールARIA: columnheader ロールARIA: combobox ロールARIA: command ロールARIA: comment ロールARIA: complementary ロールARIA: composite ロールARIA: contentinfo ロールARIA: definition ロールARIA: dialog ロールARIA: directory ロール非推奨;ARIA: document ロールARIA: feed ロールARIA: figure ロールARIA: form ロールARIA: generic ロールARIA: grid ロールARIA: gridcell ロールARIA: heading ロールARIA: img ロールARIA: input ロールARIA: landmark ロールARIA: list ロールARIA: listbox ロールARIA: listitem ロールARIA: main ロールARIA: mark ロールARIA: marquee ロールARIA: math ロールARIA: menu ロールARIA: menubar ロールARIA: menuitem ロールARIA: menuitemcheckbox ロールARIA: menuitemradio ロールARIA: meter ロールARIA: navigation ロールARIA: none ロールARIA: option ロールARIA: radio ロールARIA: radiogroup ロールARIA: range ロールARIA: region ロールARIA: roletype ロールARIA: row ロールARIA: rowgroup ロールARIA: rowheader ロールARIA: scrollbar ロールARIA: search ロールARIA: searchbox ロールARIA: section ロールARIA: sectionhead ロールARIA: select ロールARIA: separator ロールARIA: spinbutton ロールARIA: structure ロールARIA: suggestion ロールARIA: switch ロールARIA: tab ロールARIA: table ロールARIA: tablist ロールARIA: tabpanel ロールARIA: term ロールARIA: textbox ロールARIA: timer ロールARIA: tooltip ロールARIA: tree ロールARIA: treegrid ロールARIA: treeitem ロールARIA: widget ロールARIA: window ロールARIA: 文書構造ロールgroup ロールの使用link ロールの使用log ロールの使用presentation ロールの使用progressbar ロールの使用slider ロールの使用status ロールの使用toolbar ロールの使用