Kimlik · Cookie banner

Çerez bildirimi

İsteğe bağlı çerezler için izin ister. Kabul ve ret eşit büyüklüktedir. Tercih saklanır.

CSS: kararlı
JavaScript: tercih saklama
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek · tam genişlik

HTML kodunu göster

<div class="kiris-cerez" role="region" aria-label="Çerez tercihi" data-kiris="cerez" data-hep-goster>
  <div class="kiris-kap">
    <div class="kiris-cerez__soru">
      <h2 class="kiris-cerez__baslik">Bu sitede çerez kullanıyoruz</h2>
      <p class="kiris-govde">Zorunlu çerezler siteyi çalıştırır. İsteğe bağlı çerezler kullanımı ölçer ve hizmeti iyileştirir.</p>
      <div class="kiris-button-grubu"><button class="kiris-button" type="button" data-cerez="kabul">İsteğe bağlı çerezleri kabul et</button><button class="kiris-button" type="button" data-cerez="ret">İsteğe bağlı çerezleri reddet</button><a class="kiris-link" href="#">Çerezleri görüntüle</a></div>
    </div>
    <div class="kiris-cerez__onay" hidden>
      <p class="kiris-govde"><span data-cerez-metin></span> Tercihinizi <a class="kiris-link" href="#">çerez sayfasından</a> değiştirebilirsiniz.</p>
      <button class="kiris-button kiris-button--ikincil" type="button" data-cerez-gizle>Mesajı gizle</button>
    </div>
  </div>
</div>

Ne zaman kullanılır

Zorunlu olmayan bir çerez varsa her sitede kullanın. 5651 sayılı Kanun ve KVKK gereğidir.
Yalnız zorunlu çerez varsa kullanmayın. Çerez sayfasına bağlantı yeter.

Erişilebilirlik

Afiş sayfanın en başındadır ve role="region" ile adlandırılır. Odağı çalmaz.
Ret, kabul kadar kolaydır. Karanlık kalıp yoktur. Seçimden sonra afiş bir onay cümlesine döner.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.3 3.2.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FR, DK, BR, CH, IT.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-cookie-banner ile başlayan sınıflar
Davranış betiği, data-kiris="cerez" başlatıcısı