blob: 283e1d50425ccac344b93d9ae92b83647ff02646 (
plain)
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: 'ARIA: dialog ロール'
slug: Web/Accessibility/ARIA/Roles/dialog_role
tags:
- ARIA
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/dialog_role
---
<p>\{{ariaref}}</p>
<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> ロールは、ウェブアプリケーションまたはウェブページの他の部分からコンテンツまたは UI を分離する HTML ベースのアプリケーションのダイアログまたはウィンドウをマークアップするために使用されます。 ダイアログは、通常、オーバーレイを使用してページコンテンツの残りの部分の上に配置されます。 ダイアログは非モーダル（ダイアログの外のコンテンツとやりとりすることは可能です）またはモーダル（ダイアログ内のコンテンツのみがやり取りできる）のいずれかになります。</span></p>
<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>>
<h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2>
<p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p>
<button>閉じる</button>
</div></pre>
<h2 id="Description" name="Description">説明</h2>
<p>ダイアログの要素を <code>dialog</code> ロールと共にマークアップすると、支援技術がダイアログのコンテンツをグループ化し、ページのコンテンツの他の部分から分離されたものとして識別するのに役立ちます。 ただし、<code>role="dialog"</code> だけを追加するだけでは、ダイアログをアクセス可能にするには不十分です。 さらに、次のことを行う必要があります。</p>
<ul>
<li>ダイアログには適切なラベルを付ける必要があります。</li>
<li>キーボードのフォーカスを正しく管理する必要があります。</li>
</ul>
<p>以下のセクションでは、これら2つの要件がどのように満たされるかについて説明します。</p>
<h4 id="Labeling" name="Labeling">ラベリング</h4>
<p>ダイアログ自体がフォーカスを受け取れる必要はありませんが、それでもラベルを付ける必要があります。 ダイアログに与えられたラベルは、ダイアログ内のインタラクティブコントロールのコンテキスト情報を提供します。 つまり、ダイアログのラベルは、その内部のコントロールのグループラベルのように動作します（<code><legend></code> 要素が <code><fieldset></code> 要素内のコントロールのグループラベルを提供する方法と同様です）。</p>
<p>ダイアログにすでに表示されているタイトルバーがある場合、そのバーの中のテキストを使用してダイアログ自体にラベルを付けることができます。 これを達成する最善の方法は、<code>role="dialog"</code> 要素に <code>aria-labelledby</code> 属性を使用することです。 さらに、ダイアログにダイアログタイトルの他に説明的なテキストが含まれている場合、このテキストは <code>aria-describedby</code> 属性を使用してダイアログに関連付けることができます。 このアプローチは、次のコードスニペットに示されています。</p>
<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>>
<h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2>
<p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p>
<button>閉じる</button>
</div></pre>
<p> </p>
<div class="note">非仮想モードで動作するスクリーンリーダーが知覚するためには、ダイアログのタイトルと説明のテキストにフォーカスを合わせる必要はありません。 ARIA の dialog ロールとラベリング手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログへ移動したときにダイアログの情報をアナウンスするべきです。</div>
<p> </p>
<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>
<p> </p>
<h4 id="Focus_management" name="Focus_management">フォーカス管理 </h4>
<p>ダイアログには、キーボードフォーカスをどのように管理するべきかについての特定の要件があります。</p>
<ul>
<li>ダイアログには常に少なくとも1つのフォーカス可能なコントロールを持つべきです。 多くのダイアログでは、[閉じる]、[OK]、[キャンセル]などのボタンがあります。 必要なコントロールに加えて、ダイアログには、フォーム全体やタブのような他のコンテナウィジェットも含め、任意の数のフォーカス可能な要素を含めることができます。</li>
<li>ダイアログが画面に表示されたら、キーボードのフォーカス（その制御はダイアログの目的に依存する）を、ダイアログ内のデフォルトのフォーカス可能なコントロールに移動するべきです。 基本的なメッセージのみを提供するダイアログでは、[OK] ボタンになります。 フォームを含むダイアログでは、フォームの最初のフィールドになります。</li>
<li>ダイアログが閉じられた後、キーボードフォーカスは、ダイアログに移動する前の位置に戻すべきです。 それ以外の場合は、フォーカスをページの先頭にドロップすることができます。</li>
<li>ほとんどのダイアログでは、ダイアログのタブ順序がラップすることが予想されます。 つまり、ユーザーがダイアログ内のフォーカス可能な要素をタブで移動すると、最後のものに達した後、最初のフォーカス可能な要素にフォーカスが移ります。 言い換えれば、タブ順序は、ダイアログ内に含まれている必要があります。</li>
<li>ダイアログを移動またはサイズ変更できる場合は、マウスユーザーだけでなくキーボードユーザーもこれらの操作を実行できる必要があります。 同様に、ダイアログがツールバーやコンテキストメニューのような特別な機能を提供する場合、これらはキーボードユーザーが到達可能で操作可能でなければなりません。</li>
<li>ダイアログはモーダルでも非モーダルでもよい。 モーダルダイアログが画面に表示されると、ダイアログの外にあるページコンテンツと対話することはできません。 つまり、モーダルダイアログが表示されている限り、メインアプリケーションの UI またはページコンテンツは一時的に無効になっているとみなされます。 非モーダルダイアログの場合、ダイアログが表示されている間もダイアログの外のコンテンツと対話することは可能です。 非モーダルダイアログでは、開いているダイアログとメインページの間でフォーカスを移動できるグローバルなキーボードショートカットが必要です。 詳細については、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Guides/Managing_Modal_and_Non_Modal_Dialogs">モーダルおよび非モーダルダイアログの管理</a>ガイドを参照してください。</li>
</ul>
<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3>
<dl>
<dt><code><span class="highlight-span">aria-labelledby</span></code></dt>
<dd>ダイアログにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labelledby</code> 属性の値は、ダイアログのタイトルに使用される要素の ID になります。</dd>
<dt><code>aria-describedby</code></dt>
<dd>この属性を使用して、ダイアログの内容を記述します。</dd>
</dl>
<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3>
<p><code>dialog</code> ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。</p>
<ul>
<li>オペレーティングシステムのアクセシビリティ API でダイアログとして要素を公開します。</li>
</ul>
<p>ダイアログが正しくラベル付けされ、フォーカスがダイアログ内のコントロールに移動されると、スクリーンリーダーは、フォーカスされた要素をアナウンスする前にダイアログのアクセシブルロール、名前、および任意で説明をアナウンスするべきです。</p>
<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div>
<h2 id="Examples" name="Examples">例</h2>
<h4 id="Example_1_A_dialog_containing_a_form" name="Example_1_A_dialog_containing_a_form">例 1: フォームを含むダイアログ</h4>
<pre class="brush: html"> <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
<h2 id="dialog1Title">加入申込書</h2>
<p id="dialog1Desc">私たちは、この情報を第三者と共有することはありません。</p>
<form>
<p>
<label for="firstName">名</label>
<input id="firstName" type="text" />
</p>
<p>
<label for="lastName">姓</label>
<input id="lastName" type="text"/>
</p>
<p>
<label for="interests">興味</label>
<textarea id="interests"></textarea>
</p>
<p>
<input type="checkbox" id="autoLogin"/>
<label for="autoLogin">自動ログイン</label>
</p>
<p>
<input type="submit" value="情報を保存する"/>
</p>
</form>
</div></pre>
<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content" name="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">例 2: フォールバックコンテンツとしての fieldset に基づくダイアログ</h4>
<p>ARIA マークアップをサポートしていないブラウザーや AT 製品をサポートするには、フォールバックコンテンツとして <code>fieldset</code> 要素にダイアログマークアップを適用することもできます。 このようにして、ダイアログのタイトルは正しくアナウンスされます。</p>
<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
<strong><legend></strong>
<span id="dialog1Title">あなたの個人情報が更新されました。</span>
<span id="dialog1Desc">詳細は、ユーザーアカウントのセクションでいつでも変更できます。</span>
</legend>
<button>閉じる</button>
</fieldset></pre>
<h4 id="Working_Examples" name="Working_Examples">動作する例</h4>
<ul>
<li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI ダイアログ</a></li>
</ul>
<h3 id="Notes" name="Notes">注</h3>
<div class="note"><strong>注</strong>: キーボードユーザーがダイアログの外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーの仮想カーソルを使用するためにスクリーンリーダーのユーザーは仮想的にそのコンテンツをナビゲートすることができます。 このため、ダイアログは <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></code> ロールの特別なケースとみなされます。 非仮想ナビゲーションモードでは、スクリーンリーダーのユーザーがナビゲートすることが予想されます。</div>
<ul>
</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","#dialog","dialog")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
</tbody>
</table>
<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>
<p>近日公開</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdiialog_Role">ARIA: alertdialog ロール</a></li>
<li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">alertdialog ロールの使用</a></li>
</ul>
|
