files/ja/web/accessibility/aria/roles/contentinfo_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

---
title: 'ARIA: contentinfo ロール'
slug: Web/Accessibility/ARIA/Roles/Contentinfo_role
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Contentinfo_role
---
<div>\{{ariaref}}</div>

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

<pre class="brush: html">&lt;div role="contentinfo"&gt;
  &lt;h2&gt;フッター&lt;/h2&gt;
  &lt;!-- フッターのコンテンツ --&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: html">&lt;footer&gt;
  &lt;h2&gt;フッター&lt;/h2&gt;
  &lt;!-- フッターのコンテンツ --&gt;
&lt;/footer&gt;
</pre>

<h2 id="Description" name="Description">説明</h2>

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

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

<div class="note">
<p>{{htmlelement("footer")}} 要素を使用すると、自動的にセクションに <code>contentinfo</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題をテスト</a>してください。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<pre><span class="tag">&lt;body&gt;

  </span>&lt;!-- 他のページのコンテンツ --&gt;

<span class="tag">  &lt;div role="contentinfo"&gt;
    &lt;h2&gt;MDN Web Docs&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;</span>ウェブ技術<span class="tag">&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;</span>ウェブ開発について学ぶ<span class="tag">&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;</span>MDN について<span class="tag">&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;</span>フィードバック<span class="tag">&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;</span>© 2005-2018 Mozilla および各貢献者 コンテンツは &lt;a href="#"&gt;これらのライセンス&lt;/a&gt; の下で公開されています。<span class="tag">&lt;/p&gt;</span>
<span class="tag">  &lt;/div&gt;
&lt;/body&gt;</span>
</pre>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2>

<h3 id="Use_sparingly" name="Use_sparingly">控えめに使用する</h3>

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

<h3 id="One_contentinfo_landmark_per_page" name="One_contentinfo_landmark_per_page">ページあたり1つの <code>contentinfo</code> ランドマーク</h3>

<h4 id="The_&lt;body>_element" name="The_&lt;body>_element"><code>&lt;body&gt;</code> 要素</h4>

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

<h4 id="Mega-footers" name="Mega-footers">メガフッター</h4>

<p>文書のフッターの中に追加の {{htmlelement("footer")}} 要素や <code>contentinfo</code> ランドマークを入れ子にしないでください。 代わりに、他の<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>を使用してください。</p>

<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3>

<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4>

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

<pre class="brush: html">&lt;body&gt;

  ...

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

  ...

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

<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4>

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

<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>

<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3>

<p>{{htmlelement("body")}} 要素の直接の子孫である場合、{{htmlelement("footer")}} 要素を使用すると、自動的にセクションが <code>contentinfo</code> ロールを持つことを伝えます（VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題</a>は別として）。 可能であれば、代わりに <code>&lt;footer&gt;</code> を使用することをお勧めします。 <code>&lt;article&gt;</code>、<code>&lt;aside&gt;</code>、<code>&lt;main&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;section&gt;</code> 内にネストされた <code>&lt;footer&gt;</code> 要素は、<code>contentinfo</code> とはみなされないことに注意してください。</p>

<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>

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

<ul>
 <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li>
</ul>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
  </tr>
  <tr>
   <td>{{SpecName("ARIA","#contentinfo","contentinfo landmark role")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
  <tr>
   <td>{{SpecName("ARIA Authoring Practices","#aria_lh_contentinfo","contentinfo landmark role")}}</td>
   <td>{{Spec2('ARIA Authoring Practices')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{htmlelement("footer")}}: フッター要素</li>
 <li><a href="https://www.w3.org/TR/wai-aria/#contentinfo">contentinfo (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li>
 <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li>
 <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li>
 <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li>
 <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li>
 <li><a href="http://html5doctor.com/the-footer-element-update/">The Footer Element Update | HTML5 Doctor</a></li>
</ul>