Cookieバナー
Cookie banner
別名: Cookieバナー、同意バナー、Consent banner、Cookie banner、Cookie consent
生態(さわってみる)
一言定義
ページ読み込み時に自動的に現れ、Cookieの利用について同意・拒否・詳細設定を求める帯状UI。
分類
使う場面
- 法規制上、Cookie利用について明示的な同意取得が必要なとき
- 同意/拒否/詳細設定という複数段階の選択肢を、初回訪問時にまとめて提示したいとき
避ける場面
- 恒常的に表示し続ける一般的なお知らせを出したいとき(→バナー通知)
- 同意なしに閲覧を続けさせたくない、より強い制止力が必要なとき(→モーダル)
近縁種との比較
バナー通知とはページ上部・下部に帯状に表示され続ける点が似ているが、バナー通知が汎用的なお知らせ全般を扱うのに対し、Cookieバナーはページ読み込み時に自動で現れCookie利用への同意取得という規制対応目的に用途を絞り、同意・拒否・詳細設定という決まった選択肢を持つ点で異なる。モーダルとも背面に重なる点は似ているが、モーダルが背面操作を完全に止める前面ウィンドウであるのに対し、Cookieバナーは画面の一部(多くは下端)に留まり、背面のページ閲覧自体は妨げない点で異なる。
実例リンク
アクセシビリティ
- role
- role="region"にaria-label="Cookieの利用について"を付ける。背面の操作を止めない点でモーダルと異なる
- キーボード操作
- 同意/拒否/設定の各ボタンをTabで移動できる。設定ポップオーバーはEscで閉じられる
- 補足
- 実装では選んだ結果を実際のCookie等に保存するが、本デモではCookieを発行せず、セッション内(このページを開いている間)のみ有効なメモリ上のフラグで再表示を抑制する