ARIA: alert ロール の更新 (#460)

1 files changed, 18 insertions, 10 deletions

diff --git a/files/ja/web/accessibility/aria/roles/alert_role/index.html b/files/ja/web/accessibility/aria/roles/alert_role/index.html
index 89b0251538..9376d033bf 100644
--- a/files/ja/web/accessibility/aria/roles/alert_role/index.html
+++ b/files/ja/web/accessibility/aria/roles/alert_role/index.html
@@ -7,15 +7,15 @@ tags:
   - Accessibility
 translation_of: Web/Accessibility/ARIA/Roles/Alert_Role
 ---
-<p class="summary">\{{ariaref}}<span class="seoSummary"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></code> ロールを使用するべきです。</span></p>
+<p class="summary"><span class="seoSummary">アラート (<code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code>) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></code>) ロールを使用するべきです。</span></p>
 
 <h2 id="Description" name="Description">説明</h2>
 
-<p>5つのライブリージョンロールの1つである <code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。</p>
+<p>5つのライブリージョンロールの1つである アラート (<code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code>) ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。</p>
 
-<p><code>alert</code> ロールは、アラート（alert）メッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 <code>role="alert"</code> の設定は、<code>aria-live="assertive"</code> と <code>aria-atomic="true"</code> の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。</p>
+<p>アラート (<code>alert</code>) ロールは、アラートメッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 <code>role="alert"</code> の設定は、<code>aria-live="assertive"</code> と <code>aria-atomic="true"</code> の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。</p>
 
-<p><code>alert</code> ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。</p>
+<p>アラート (<code>alert</code>) ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。</p>
 
 <h2 id="Examples" name="Examples">例</h2>
 
@@ -25,21 +25,22 @@ translation_of: Web/Accessibility/ARIA/Roles/Alert_Role
 
 <p>CSS だけでアラートをトリガーすることは可能ですが、ブラウザやスクリーンリーダーのサポートが増え、イベントハンドラやフォームの検証などのより大きなユーザーインタラクションの一部として、より適切な場合が多いため、JavaScript を使用する方がよいでしょう。 JavaScript を使用すると、開発者はアラートの追加と削除を適切に制御できます。</p>
 
-<pre class="brush: html">&lt;button type="button" onclick="triggerAlert"&gt;アラートをトリガー&lt;/button&gt;
+<pre class="brush: html">&lt;button type="button"&gt;アラートをトリガー&lt;/button&gt;
 &lt;p class="alert"&gt;ボタンを押すとアラートがトリガーされます。&lt;/p&gt;
 </pre>
 
-<pre class="brush: js">function triggerAlert() {
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', triggerAlert);
+
+function triggerAlert() {
   var alertEl = document.querySelector('.alert');
-  alertEl.addAttribute("role", "alert");
+  alertEl.setAttribute("role", "alert");
 }
 </pre>
 
-<p>（訳注：<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a>によると、alert ロールを動的に追加してもトリガーされないそうです。）</p>
-
 <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2>
 
-<p><code>alert</code> ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。</p>
+<p>アラート (<code>alert</code>) ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。</p>
 
 <h2 id="Specifications" name="Specifications">仕様</h2>
 
@@ -68,3 +69,10 @@ translation_of: Web/Accessibility/ARIA/Roles/Alert_Role
  <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a></li>
  <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert ロールの使用</a></li>
 </ul>
+
+
+<section id="Quick_links">
+    <ol>
+        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
+    </ol>
+</section>