- Toast通知UI は、アクセシビリティ上の問題により GitHub ではもはや推奨されていない
- 自動的に消える 一時的な通知の仕組み は、視覚的・機能的アクセシビリティ基準（WCAG）に違反するおそれがある
- GitHub は、バナー（banner）、ダイアログ（dialog） などの 持続的でアクセシブルなフィードバック方法 を代替案として提示
- Toast には、大画面、マルチタスク、バナー無視現象 など、ユーザビリティ上の問題も多数ある
- アクセシビリティと一貫したユーザー体験のため、Primerデザインシステム全体でToastの使用を中止
Toastの概要
- Toast は、画面下部の隅に一時的に表示される 小さな長方形の通知ウィンドウ で、ユーザーまたはシステムの操作によってトリガーされる
- 一定時間が経過すると自動的に消える仕組みで、アクセシビリティとユーザビリティの問題 を内包している
- GitHub はこうした理由から、より安定的でアクセシブルなコミュニケーション方法 を推奨している
Toastの代替案
- 用途に応じて適切なUIを選ぶ必要がある
- 単純な成功通知は、追加のフィードバックがなくても 結果画面そのもので確認可能
- 複雑な作業では、バナー や 段階的なコンテンツ表示 で成功状態を伝える
- 失敗した操作では、バナー または ダイアログ を通じてエラー情報を提供する
- フォーム送信 の場合、単純なフォームは追加確認不要で、複雑なフォームでは 中間確認ページ や バナー を使う
- 入力検証 には、Primer の既存の フォーム検証コンポーネント を活用する
- 長時間かかる作業 は、バナーまたはメール・プッシュ通知など 別チャネル を通じて完了状態を伝える
- セッションの非同期化 が発生した場合は、ダイアログやバナーで 再読み込みの必要性 を案内する
アクセシビリティに関する考慮事項 (Accessibility Considerations)
- Toast UI は、複数の WCAG達成基準 に違反する可能性がある
- 2.2.1 Timing Adjustable (A) : ユーザーが自分で閉じるまで維持されるべき
- 1.3.2 Meaningful Sequence (A) : DOM順序と視覚的順序の不一致により、支援技術利用時に混乱が生じる
- 2.1.1 Keyboard (A) : キーボードでトースト内のインタラクションを操作できなければならない
- 4.1.3 Status Messages (AA) : 支援技術に対して非侵襲的に存在を知らせる必要がある
- そのほか違反する可能性のある基準
- 1.4.4 Resize text (AA) : テキストサイズを変更した際に、画面の遮蔽やオーバーフローが発生するおそれ
- 1.4.10 Reflow (AA) : 水平スクロール時にもキーボードアクセシビリティの確保が必要
- 2.4.3 Focus Order (A) : フォーカス順序が混乱する可能性
- 3.2.4 Consistent Identification (AA) : コードの一貫性を維持する必要がある
ユーザビリティに関する考慮事項 (Usability Considerations)
- 大画面 では、Toast が視界の外に位置して認識されない場合がある
- 自動消去 の場合、ユーザーが別の作業中だとメッセージを見逃すおそれがある
- UIの遮蔽: Toast が下部ボタンなど重要な要素を覆ってしまうことがある
- 画面拡大を使うユーザー は、拡大領域の外にある Toast を見られない可能性がある
- ワーキングメモリの問題: 自動的に消えるため情報を再確認できない
- バナー無視現象: 過剰な使用によってユーザーが無視する傾向がある
- 位置の不一致: トリガーされたUIとToastの物理的距離により、関連性が分かりにくくなる
- 誤った閉じる動作: Escキーで他のUIまで一緒に閉じてしまう問題が起こりうる
追加の参考資料
1件のコメント
Hacker Newsのコメント
toast()呼び出しが簡単なため乱用されがちだが、useAlerts()のような構造に変えるほうがはるかに良いと提案していた