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を発行せず、セッション内(このページを開いている間)のみ有効なメモリ上のフラグで再表示を抑制する