UI Component Lab English

← コンポーネント一覧

フィードバック

Alert アラート（ノティフィケーションバナー）

ページの中に表示する重要なメッセージ。作業を中断させずに、すぐ読み上げられる。

別名

見分けるポイント

アイコンと短い文の入った色付きの箱で、関連する内容の近くかページの上部に出る。色でエラー・警告・成功・お知らせの種類を表す。

挙動

  • role="alert" の要素に中身を入れると、フォーカスを動かさずにスクリーンリーダーが読み上げる。
  • ページを読み込んだ時点ですでにあるアラートは読み上げられない。
  • 読む時間を確保するため、自動で消さない。

キーボード操作

キー動作
—なし。アラートはフォーカスを受けないので、そのまま作業を続けられる。

使い分け・注意点

  • 成功、エラー、警告、情報などの種類は、色だけでなくアイコンと文言でも区別する。
  • 閉じられるようにする場合は、閉じた状態を保ち、もう一度表示する手段を用意する。
  • トースト: アラートはページの中に残り、トーストはページの上に浮かんで自動で消える。
  • モーダルダイアログ: アラートは作業を中断させずに知らせ、アラートダイアログ（モーダルの一種）は応答するまで作業を止める。

出典