トースト
Toast
別名: トースト通知、スナックバー、Snackbar、Toast notification
生態（さわってみる）
一言定義
画面の隅に短時間だけ現れて自動的に消える、操作を妨げずに結果を伝える軽量な通知。
分類
使う場面
- 「保存しました」のような、操作の結果を一言伝えれば十分なとき
- ユーザーの操作を止めずに、画面の隅で完結する通知で足りるとき
避ける場面
- ユーザーの応答（確認・選択）が必須であるとき（→アラートダイアログ）
- 通知を消さずに残しておく必要があるとき（→バナー通知）
近縁種との比較
Toast と Snackbar は同じ「一時的な軽量通知」を指す呼称ゆれで、Material Design系は Snackbar、Polaris・Salesforce Lightning・Fluent・Bootstrapなど他の多くのデザインシステムは Toastと呼ぶ。日本語記事でも両方の呼称が流通しているため、本図鑑ではトーストを見出し名として 採用し、操作ボタン（元に戻す等）を持てる点も含めてSnackbarと同一のUIとして扱う。バナー通知が 明示的に閉じるまで残り続けるのに対し、トーストは一定時間で自動的に消える点が最大の違いで、 確認が必須の内容には向かず、その場合はアラートダイアログを使う。
実例リンク
アクセシビリティ
- role
- 通知領域に role="status"（緊急度が高い場合は role="alert"）+ aria-live="polite"
- キーボード操作
- 操作ボタン付きの場合はボタンにTabで到達可能にする。自動消滅までの時間はユーザーが読み切れる長さを確保する
- 補足
- 操作ボタン（元に戻す等）付きの variant は、消えるまでの猶予がユーザーの唯一のアクション機会になるため、通常より長めの表示時間かホバーでの一時停止が望ましい