From 91bea6bd04ae368a889436799187eeebb11d33a1 Mon Sep 17 00:00:00 2001 From: Wind1808 <42607060+Wind1808@users.noreply.github.com> Date: Fri, 16 Apr 2021 00:05:26 +0900 Subject: ARIA: alert ロール の更新 (#460) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../accessibility/aria/roles/alert_role/index.html | 28 ++++++++++++++-------- 1 file changed, 18 insertions(+), 10 deletions(-) (limited to 'files/ja') 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 --- -

\{{ariaref}}alert ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりに alertdialog ロールを使用するべきです。

+

アラート (alert) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (alertdialog) ロールを使用するべきです。

説明

-

5つのライブリージョンロールの1つである alert ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。

+

5つのライブリージョンロールの1つである アラート (alert) ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。

-

alert ロールは、アラート(alert)メッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 role="alert" の設定は、aria-live="assertive"aria-atomic="true" の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。

+

アラート (alert) ロールは、アラートメッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 role="alert" の設定は、aria-live="assertive"aria-atomic="true" の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。

-

alert ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。

+

アラート (alert) ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。

@@ -25,21 +25,22 @@ translation_of: Web/Accessibility/ARIA/Roles/Alert_Role

CSS だけでアラートをトリガーすることは可能ですが、ブラウザやスクリーンリーダーのサポートが増え、イベントハンドラやフォームの検証などのより大きなユーザーインタラクションの一部として、より適切な場合が多いため、JavaScript を使用する方がよいでしょう。 JavaScript を使用すると、開発者はアラートの追加と削除を適切に制御できます。

-
<button type="button" onclick="triggerAlert">アラートをトリガー</button>
+
<button type="button">アラートをトリガー</button>
 <p class="alert">ボタンを押すとアラートがトリガーされます。</p>
 
-
function triggerAlert() {
+
const btn = document.querySelector('button');
+btn.addEventListener('click', triggerAlert);
+
+function triggerAlert() {
   var alertEl = document.querySelector('.alert');
-  alertEl.addAttribute("role", "alert");
+  alertEl.setAttribute("role", "alert");
 }
 
-

(訳注:ARIA ライブリージョンによると、alert ロールを動的に追加してもトリガーされないそうです。)

-

アクセシビリティに関する懸念

-

alert ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。

+

アラート (alert) ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。

仕様

@@ -68,3 +69,10 @@ translation_of: Web/Accessibility/ARIA/Roles/Alert_Role
  • ARIA ライブリージョン
  • alert ロールの使用
  • + + + -- cgit v1.2.3-54-g00ecf