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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
---
title: ARIA ライブリージョン
slug: Web/Accessibility/ARIA/ARIA_Live_Regions
tags:
- ARIA
- Accessibility
- ariaLive
translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
---
<p>JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。</p>
<div class="note">
<p><strong>注記</strong>: 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から（かつ空で）存在しなければなりません。続いて後に起こる変更は通知されます。</p>
<p>単に読み込まれた最初のマークアップに <code>aria-live</code> 属性もしくは 特化したライブリージョン <code>role</code> （例えば <code>role="alert"</code> など）を含めても何も効果はありません。</p>
<p><code>aria-live</code> 属性もしくは特化した <code>role</code> をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。</p>
<p>常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加／変更をしてください。</p>
</div>
<h2 id="Simple_Live_Regions" name="Simple_Live_Regions"><span class="mw-headline" id="Live_Region_State">単純なライブリージョン</span></h2>
<p>ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。</p>
<ol>
<li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code> はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は <code>off</code>、<code>polite</code>、<code> assertive</code> で、デフォルトは <code>off</code> です。この属性は間違いなく最も重要な属性です。</li>
<li>
<p class="comment"><code><strong>aria-controls</strong></code>: <code>aria-controls=[IDLIST]</code> は領域とそれをコントロールするものを関連付けるために使用されます。領域は <code>div</code> の <code>id</code> のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば <code>aria-controls="myRegionID1 myRegionsID2"</code>。</p>
<div class="warning">ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。</div>
</li>
</ol>
<p>通常、<code>aria-live="polite"</code> のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。</p>
<p>重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、<code>aria-live="off"</code> で黙らせます。</p>
<h3 id="Dropdown_box_updates_useful_onscreen_information" name="Dropdown_box_updates_useful_onscreen_information">有益な画面上の情報を更新するドロップダウンボックス</h3>
<p>ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><fieldset>
<legend>Planet information</legend>
<label for="planetsSelect">Planet:</label>
<select id="planetsSelect" aria-controls="planetInfo">
<option value="">Select a planet&hellip;</option>
<option value="mercury">Mercury</option>
<option value="venus">Venus</option>
<option value="earth">Earth</option>
<option value="mars">Mars</option>
</select>
<button id="renderPlanetInfoButton">Go</button>
</fieldset>
<div role="region" id="planetInfo" aria-live="polite">
<h2 id="planetTitle">No planet selected</h2>
<p id="planetDescription">Select a planet to view its description</p>
</div>
<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">const PLANETS_INFO = {
mercury: {
title: 'Mercury',
description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.'
},
venus: {
title: "Venus",
description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.'
},
earth: {
title: "Earth",
description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.'
},
mars: {
title: "Mars",
description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".'
}
};
function renderPlanetInfo(planet) {
const planetTitle = document.querySelector('#planetTitle');
const planetDescription = document.querySelector('#planetDescription');
if (planet in PLANETS_INFO) {
planetTitle.textContent = PLANETS_INFO[planet].title;
planetDescription.textContent = PLANETS_INFO[planet].description;
} else {
planetTitle.textContent = 'No planet selected';
planetDescription.textContent = 'Select a planet to view its description';
}
}
const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton');
renderPlanetInfoButton.addEventListener('click', event => {
const planetsSelect = document.querySelector('#planetsSelect');
const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value;
renderPlanetInfo(selectedPlanet);
});
</pre>
<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p>
<p>ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは <code>aria-live="polite"</code> を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。</p>
<p>ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:</p>
<p><img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p>
<h2 id="Preferring_Specialized_Live_Region_Roles" name="Preferring_Specialized_Live_Region_Roles">優先する専門のライブリージョンロール</h2>
<p>次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:</p>
<table style="width: 100%;">
<thead>
<tr>
<th scope="col">ロール</th>
<th scope="col">説明</th>
<th scope="col">互換性に関する注意事項</th>
</tr>
</thead>
<tbody>
<tr>
<td>log</td>
<td>チャット、エラー、ゲームもしくは別種のログ</td>
<td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加します。</td>
</tr>
<tr>
<td>status</td>
<td>ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。</td>
<td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加します。</td>
</tr>
<tr>
<td>alert</td>
<td>スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIAフォームのチュートリアルへのリンク)</td>
<td>互換性を最大限にするために、このロールを使う際に <code>aria-live="assertive"</code> を追加するよう勧める人もいます。しかし、<code>aria-live</code> と <code>role=alert</code> の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。</td>
</tr>
<tr>
<td>progressbar</td>
<td>ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。</td>
<td></td>
</tr>
<tr>
<td>marquee</td>
<td>株式相場表示機のようなスクロールするテキストのためのものです。</td>
<td></td>
</tr>
<tr>
<td>timer</td>
<td>カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Advanced_Live_Regions" name="Advanced_Live_Regions">高度なライブリージョン</h2>
<p>(TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。</p>
<p>一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。</p>
<p>The Paciello Group は、<a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">ライブリージョンのサポート状況についての情報</a> (2014) をいくつかもっています。Paul Jadam は特に <a href="http://pauljadam.com/demos/aria-atomic-relevant.html">aira-atomic と aria-relevant のサポート</a>についてのリサーチをしました。</p>
<ol>
<li><code><strong>aria-atomic</strong></code>: <code>aria-atomic=BOOLEAN</code> は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は <code>false</code> または <code>true</code> で、デフォルトは <code>false</code> です。</li>
<li><code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code>: <code>aria-relevant=[LIST_OF_CHANGES]</code> はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は <code>additions</code>、<code>removals</code>、<code>text</code>、<code>all</code> で、 <code>additions text</code> がデフォルトです。</li>
<li><code><strong>aria-labelledby</strong></code>: <code>aria-labelledby=[IDLIST]</code> は領域とラベルを関連付けるために使われます。<code>aria-controls</code> と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。</li>
<li><code><strong>aria-describedby</strong></code>: <code>aria-describedby=[IDLIST]</code> は領域と説明の関連付けを行います。<code>aria-controls</code> と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。</li>
</ol>
<h3 id="Advanced_Use_Case_Clock" name="Advanced_Use_Case_Clock"><span class="mw-headline" id="Use_Case:_Clock">高度なユースケース: Clock</span></h3>
<p><code>aria-atomic</code> についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。</p>
<pre class="notranslate"><div id="clock" role="timer" aria-live="polite"></div>
</pre>
<pre class="brush: js notranslate">/* basic JavaScript to update the clock */
setInterval(function() {
var now = new Date();
document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2);
}, 60000);
</pre>
<p>最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。</p>
<p>一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。</p>
<p><code>aria-atomic="true"</code> はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。</p>
<pre class="notranslate"><div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
</pre>
<h3 id="Advanced_Use_Case_Roster" name="Advanced_Use_Case_Roster"><span class="mw-headline" id="Use_Case:_Roster">高度なユースケース: Roster</span></h3>
<p>チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。</p>
<pre class="notranslate"><ul id="roster" aria-live="polite" aria-relevant="additions removals">
<!-- use JavaScript to add remove users here-->
</ul>
</pre>
<p>ARIA ライブプロパティの内訳:</p>
<ul>
<li><code>aria-live="polite"</code> はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。</li>
<li>追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため <code>aria-atomic</code> は設定されていません (デフォルトの <code>false</code> が入ります)。</li>
<li><code>aria-relevant="additions removals"</code> により追加もしくは削除されたユーザーが読み上げられることを確かにします。</li>
</ul>
<h2 id="関連情報">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></li>
</ul>
|
