files/ja/web/accessibility/aria/roles/region_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

---
title: 'ARIA: region ロール'
slug: Web/Accessibility/ARIA/Roles/Region_role
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Region_role
---
<p>\{{ariaref}}</p>

<p><span class="seoSummary"><code>region</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。</span></p>

<pre class="brush: html">&lt;div role="region" aria-label="例"&gt;
  &lt;!-- リージョンのコンテンツ --&gt;
&lt;/div&gt;
</pre>

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

<p><code>region</code> ロールは、ARIA の<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。</p>

<p><code>region</code> ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 <code>region</code> ロールはより汎用の用語であり、識別が必要なセクションが、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code> などの他のランドマークロールのいずれかによって正確に説明できない場合に使用するべきです。</p>

<p><code>region</code> ロールを持つすべての要素には、リージョン（region）内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する <code>aria-labelledby</code> を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、<code>aria-label</code> を使用するべきです。</p>

<p><code>region</code> ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。</p>

<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は <code>&lt;section&gt;</code>）を常に使用するべきです。</p>

<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3>

<dl>
 <dt><span class="highlight-span">aria-labeledby</span></dt>
 <dd>リージョンにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labeledby</code> 属性の値は、セクションのタイトルに使用される要素の ID になります。</dd>
</dl>

<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>

<p>無し</p>

<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>

<p>無し</p>

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

<pre><span class="tag">&lt;div role="region" aria-labeledby="region-heading"&gt;
  &lt;h2 id="region-heading"&gt;</span>この見出しの &lt;code&gt;id&lt;/code&gt; 属性は、このリージョンがアクセス可能な名前を持つのに役立ちます<span class="tag">&lt;/h2&gt;
  &lt;!-- </span>リージョンのコンテンツ<span class="tag"> --&gt;
&lt;/div&gt;</span>
</pre>

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

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

<p>他の関連<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>または<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>が当てはまらない場合にのみ、<code>region</code> ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。</p>

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

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

<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 可能であれば、<code>&lt;section&gt;</code> を代わりに使用することをお勧めします。</p>

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

<p>文書に複数の <code>region</code> ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p>

<pre class="brush: html">&lt;div role="region" aria-labeledby="heading"&gt;
  &lt;h3 id="use-discretion"&gt;慎重に &lt;code&gt;region&lt;/code&gt; ロールを使用してください&lt;/h3&gt;
  &lt;!-- コンテンツ --&gt;
&lt;/div&gt;

...

&lt;div role="region" aria-labeledby="please-reconsider"&gt;
  &lt;h3 id="please-reconsider"&gt;文書構造を再検討してください&lt;/h3&gt;
  &lt;!-- コンテンツ --&gt;
&lt;/div&gt;
</pre>

<p>この例では、リージョンのラベルは <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labeledby</a></code> 属性によって作成されています。</p>

<h3 id="Scrolling_content_areas_with_overflow_text" name="Scrolling_content_areas_with_overflow_text">オーバーフローテキストを含むコンテンツ領域のスクロール</h3>

<p><code>tabindex="0"</code> のコンテンツ領域がある場合は、<code>role="region"</code> を追加して、汎用のリージョンであるとスクリーンリーダーのユーザーに伝えます。 これは、キーボードのみのユーザーがオーバーフローテキストを含むリージョンをスクロールできるようにするためです。</p>

<h3 id="SVG" name="SVG">SVG</h3>

<p><a href="/ja/docs/Web/SVG/Element/svg">SVG</a> の個々のセクションを説明できるようにするために、SVG の領域上に <code>role="region"</code> を <code>aria-label</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","#region","ARIA Region Role")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
  <tr>
   <td>{{SpecName("ARIA Authoring Practices","#aria_lh_region","Region landmark role")}}</td>
   <td>{{Spec2('ARIA Authoring Practices')}}</td>
  </tr>
 </tbody>
</table>

<p> </p>

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

<p> </p>

<p>TBD</p>

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

<ul>
 <li>{{htmlelement("section")}}: 汎用セクション要素</li>
 <li><a href="https://www.w3.org/TR/wai-aria/#region">region (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-section-element/">The section element | HTML5 Doctor</a></li>
</ul>