バナー通知
Notification banner
別名: バナー、インラインバナー、アラートバナー、アラート、Notification banner、Banner、Alert banner
生態（さわってみる）
一言定義
ページ上部などに表示され、ユーザーが明示的に閉じるまで残り続ける、持続的な状態・注意喚起の通知帯。
分類
使う場面
- メンテナンス予定やアカウント状態など、ユーザーが認識し続けるべき情報を出したいとき
- 消えてほしくない警告・注意喚起を、ページの目立つ位置に置いておきたいとき
避ける場面
- 数秒で消えてよい、操作結果の軽い通知で十分なとき（→トースト）
- 確認や選択などユーザーの応答が必須で、他の操作を止めてでも見せたいとき（→アラートダイアログ）
近縁種との比較
「通知帯」を指す語はAlert（重要な警告全般を指す最も広い語）・Banner（Polaris/Atlassian/GOV.UKがページ上部の持続的な帯として使う語）・Callout（Atlassianの Section message などが使う、文中に埋め込む注意喚起ボックス）・Flag（Atlassian用語で、画面隅に浮くカード型の一時通知）と乱立しており、研究ノートの同義語表もこれを「インページ持続型と一時型で二分される」概念として扱う。本図鑑では79エントリの枠内でこれらを1つに統合し、持続的に残り続ける帯をバナー通知（本エントリ）、数秒で自動的に消える軽量通知をトーストとして2エントリに分けて扱う。CalloutやFlagのような文中埋め込み型・カード型の亜種は、この2エントリのいずれかに準ずる実装として扱い、別カード化はしていない。確認や選択などユーザーの応答が必須なら、より強い制止力を持つアラートダイアログを使う。
実例リンク
アクセシビリティ
- role
- role="region"にaria-labelを付けるか、警告度が高い場合はrole="alert"にする。閉じるボタンはbutton要素にaria-label="通知を閉じる"を付ける
- キーボード操作
- 閉じるボタンをTab+Enter/Spaceで操作可能にする
- 補足
- 「アラート」という語はこの持続的な帯だけでなく、確認を伴う小ダイアログ（→アラートダイアログ）や自動消滅する軽量通知（→トースト）を指すこともある、業界で最も呼称が乱立する領域の一つ。本図鑑ではPolaris・Atlassian・GOV.UKに倣い「バナー通知」を見出し名として採用する