- An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
- Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound.
- It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.
+ アラートは、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。動的にレンダリングされたアラートは、ほとんどのスクリーンリーダーで自動的にアナウンスされ、一部のオペレーティングシステムでは、アラート音が鳴る場合があります。現時点でスクリーンリーダーは、ページの読み込みが完了する前にページ上に存在するアラートを、利用者に通知しないことに注意することが重要です。
- Because alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working, it is crucial they do not affect keyboard focus.
- The Alert Dialog Pattern is designed for situations where interrupting work flow is necessary.
+ アラートは、重要かつ一刻を争うかもしれない情報を、利用者の作業継続を妨げることなく提供することを目的としているため、キーボードフォーカスに影響を与えないようにすることが非常に重要です。アラートダイアログ パターンは、ワークフローを中断する必要がある状況のために設計されたものです。
- It is also important to avoid designing alerts that disappear automatically.
- An alert that disappears too quickly can lead to failure to meet
- WCAG 2.0 success criterion 2.2.3.
- Another critical design consideration is the frequency of interruption caused by alerts.
- Frequent interruptions inhibit usability for people with visual and cognitive disabilities, which makes meeting the requirements of
- WCAG 2.0 success criterion 2.2.4 more difficult.
+ アラートが自動的に消えるように設計しないことも重要です。あまりにも早く消えるアラートは、WCAG 2.1 達成基準 2.2.3 を満たすことができなくなる可能性があります。アラートによる割り込みの頻度も重要な設計上の考慮事項です。頻繁な割り込みは、視覚や認知に障害を持つ人々の利用性を阻害するため、WCAG 2.1 達成基準 2.2.4 の要件を満たすことが難しくなります。
- The below example demonstrates the Alert Pattern.
- Activating the Trigger Alert button causes a message to be inserted into the example alert element.
+ 以下の例は、アラート パターンのデモンストレーションです。アラートをトリガーするボタンを動作させると、この例のアラートの要素の中にメッセージが挿入されます。
This is just a test. A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.
- Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert.
- For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.
+ アラートは重要な情報のため、支援技術はアラートのテキストの変更に注意を向けるための特別な動作を提供する場合があります。例えば、スクリーンリーダーは他のすべての読み上げに割り込んで、新しいアラートテキストの前に特別な音又はフレーズでアナウンスする場合があります。
-
Keyboard Support
-
No keyboard interaction needed.
+
キーボードのサポート
+
キーボードによるインタラクションは必要ありません。
-
Role, Property, State, and Tabindex Attributes
+
ロール、プロパティ、ステート、及び tabindex 属性
-
Role
-
Attribute
-
Element
-
Usage
+
ロール
+
属性
+
要素
+
使用法
@@ -87,18 +86,18 @@
Role, Property, State, and Tabindex Attributes
alert
div
-
Identifies the element as the container where alert content will be added or updated.
+
アラートのコンテンツが追加又は更新されるコンテナとしての要素を識別します。
aria-live=assertive
-
Implicit on div
+
div に暗黙的に割り当て
-
This does not have to be declared in the code because it is implicit in the alert role.
-
Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes.