Langsung ke konten
Mera News

Panduan penerbit, bab 3

Pop-up dan persetujuan

Terakhir ditinjau November 2026

Setiap kotak yang muncul di atas artikel berdiri di antara pembaca dan alasan mereka datang. Sebagian diwajibkan hukum. Banyak yang tidak. Bab ini membahas apa yang diminta Google, apa yang dikatakan regulator Eropa tentang persetujuan, dan cara membangun prompt yang bisa dipakai dengan keyboard dan pembaca layar. Ini bukan nasihat hukum, jadi periksakan banner Anda kepada penasihat hukum Anda sendiri.

Apa yang diminta Google

Google menggambarkan interstitial yang mengganggu sebagai elemen halaman yang menghalangi pandangan pembaca terhadap konten, dan memperingatkan bahwa hal itu bisa menurunkan kinerja di pencarian. Panduannya spesifik:

  • Jangan menutupi seluruh halaman.
  • Jangan mengirim pembaca ke halaman terpisah untuk persetujuan atau input. Jika setiap URL dialihkan ke satu halaman persetujuan, semua halaman kecuali yang itu bisa hilang dari hasil pencarian.
  • Gunakan banner yang memakai sebagian kecil layar, bukan interstitial layar penuh.
  • Terapkan kehati-hatian yang sama pada semua dialog promosi, termasuk ajakan newsletter dan ajakan memasang aplikasi.

Untuk pemasangan aplikasi, Google menunjuk opsi yang didukung browser, seperti Smart App Banner di Safari, atau banner HTML biasa yang menaut ke toko yang tepat.

Interstitial yang diwajibkan hukum dikecualikan dari panduan ini. Pembatasan usia adalah contoh dari Google. Jika Anda memerlukannya, biarkan konten tetap ada di halaman di bawah lapisan itu agar tetap bisa diindeks.

Better Ads Standards mencakup periklanan. Iklan pop-up tercantum untuk desktop dan seluler. Di seluler, iklan prestitial tercantum dengan atau tanpa hitung mundur. Di desktop, format yang tercantum adalah prestitial dengan hitung mundur, dan yang bisa langsung ditutup tidak berada di bawah standar.

Apa yang dikatakan regulator Eropa tentang persetujuan

European Data Protection Board (EDPB) telah menerbitkan pedoman tentang persetujuan dan laporan dari satuan tugas banner cookie-nya. Laporan satuan tugas itu mencatat ambang minimum yang disepakati untuk menangani pengaduan, dan aturan nasional tetap berlaku, jadi anggaplah poin-poin ini sebagai dasar.

  • Tidak ada yang memerlukan persetujuan berjalan lebih dulu. Cookie yang memerlukan persetujuan tidak boleh dipasang sebelum pembaca menyetujuinya lewat tindakan positif.
  • Menggulir bukan persetujuan. Pedoman menyatakan menggulir atau menggeser tidak dalam keadaan apa pun dianggap sebagai tindakan yang jelas dan afirmatif.
  • Kotak yang sudah dicentang bukan persetujuan. Begitu pula diam, atau sekadar melanjutkan memakai layanan.
  • Sediakan cara untuk menolak. Sebagian besar otoritas dalam satuan tugas memandang banner tanpa opsi menolak pada lapisan mana pun yang memiliki tombol setuju sebagai pelanggaran.
  • Jangan sembunyikan penolakan. Tautan menolak yang terkubur dalam paragraf, tanpa apa pun yang menarik perhatian ke sana, tidak menghasilkan persetujuan yang sah. Warna dan kontras tombol dinilai kasus per kasus.
  • Akses tidak boleh bergantung pada menerima. Pedoman memberi contoh halaman yang memblokir semua konten sampai pembaca mengeklik "Terima cookie" sebagai persetujuan yang tidak diberikan secara bebas.
  • Mencabut harus semudah menyetujui. Jika persetujuan hanya butuh satu klik, mencabutnya pun harus begitu. Tautan permanen di tempat yang terlihat dan standar adalah salah satu opsi, dan satuan tugas juga menyebut ikon kecil.

Bangun prompt yang bisa dipakai semua orang

Banner yang tidak memblokir halaman

Banner kecil membiarkan pembaca melanjutkan, yang lebih disukai Google. Banner tetap harus memenuhi WCAG 2.2. Kriteria keberhasilan 2.4.11, Focus Not Obscured (Minimum), gagal jika banner menempel menutupi sepenuhnya item yang sedang difokuskan keyboard. Tambahkan scroll padding sebesar tinggi banner:

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

Tumpuk banner di atas halaman, atau sediakan ruangnya, agar artikel tidak terdorong ke bawah dan menambah pergeseran tata letak.

Dialog modal

Jika prompt harus menghentikan pembaca, bangun sebagai dialog modal sungguhan dengan pola W3C.

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • Pindahkan fokus ke dalam dialog saat dialog terbuka.
  • Tab dan Shift + Tab berputar di antara kontrol di dalam dialog dan kembali ke awal di setiap ujung.
  • Escape menutup dialog. Anggap itu sebagai belum memilih, bukan sebagai menerima.
  • Saat dialog menutup, kembalikan fokus ke elemen yang membukanya. Jika dialog terbuka saat halaman dimuat, pindahkan fokus ke awal konten.

Di ponsel

  • Tambatkan banner di bagian bawah layar, dan biarkan judul tetap terlihat di atasnya.
  • Susun tombol selebar penuh agar mudah diketuk, dengan Terima dan Tolak berukuran sama.
  • Jaga teks tetap singkat dan pindahkan rinciannya ke lapisan kedua.
  • Periksa tata letak pada lebar 320 piksel CSS dan dengan teks diperbesar hingga 200%. Tombol harus tetap terjangkau tanpa gulir ke samping.

Di desktop

  • Gunakan bilah bawah atau panel di sudut, dan biarkan artikel tetap bebas.
  • Pastikan setiap kontrol berfungsi dengan keyboard, dengan indikator fokus yang terlihat.
  • Jaga teks pada rasio kontras minimal 4.5:1, atau 3:1 untuk teks besar.

Daftar periksa

  • Muat beranda dan sebuah artikel dengan profil browser baru, di ponsel dan di desktop. Hitung apa yang muncul di atas konten.
  • Hapus setiap lapisan layar penuh yang tidak diwajibkan hukum.
  • Hapus setiap pengalihan ke halaman persetujuan terpisah.
  • Pastikan tidak ada tag yang memerlukan persetujuan berjalan sebelum pembaca setuju.
  • Sediakan opsi menolak di setiap tempat ada opsi menerima, sebagai tombol dengan bobot yang sama.
  • Hapus kotak yang sudah dicentang dan logika apa pun yang menganggap menggulir sebagai persetujuan.
  • Tambahkan tautan atau ikon permanen untuk mengubah pilihan privasi, di setiap halaman.
  • Telusuri banner dengan Tab tanpa mouse, dan pastikan fokus tetap terlihat dan tidak pernah hilang di balik banner.
  • Uji modal dengan pembaca layar, termasuk Escape dan pengembalian fokus.
  • Ganti pop-up pemasangan aplikasi buatan sendiri dengan banner kecil.

Sumber