Erişilebilir Çerez Banner’ı Nasıl Tasarlanır? Onay İçin WCAG 2.2 Gereksinimleri

Çerez banner’ları (onay pencereleri), çoğu web sitesinde ilk etkileşim noktasıdır. Kullanıcıların gizlilik tercihlerini ifade edebilmesi için kritik oldukları kadar, yanlış tasarlandıklarında erişilebilirlik açısından da en çok sorun çıkaran bileşenlerdendir. Klavye ile kapatılamayan bir modal, ekran okuyucuya okunmayan seçenekler veya “Kabul et” düğmesinin “Reddet”e göre daha görünür olması; hem kullanıcı deneyimini hem de uyumluluğu zedeler.

Bu yazıda, çerez banner’ını WCAG 2.2 gereksinimleriyle uyumlu ve kapsayıcı tasarlamak için uygulanabilir bir kontrol listesi bulacaksınız. Not: Buradaki öneriler hukuki danışmanlık değildir; ancak erişilebilirlik ve kullanıcı arayüzü açısından “eşit ve anlaşılır onay” hedefini destekler.

Çerez banner erişilebilirliği neden önemli?

Çerez onayı, bir “aracın” değil bir “kararın” sunumudur. Erişilebilir değilse, bazı kullanıcılar rıza veremez, tercihlerini değiştiremez veya neye izin verdiklerini anlayamaz. Bu da:

• Engelli kullanıcıların temel haklarına aykırı bir bariyer oluşturur,
• Onayın geçerliliğini tartışmalı hâle getirebilir (anlaşılırlık ve özgürce seçim),
• Marka güvenini ve dönüşümleri olumsuz etkiler.

Ayrıca çerez banner’ları sıklıkla overlay/widget mantığıyla sunulduğundan, “sadece üstüne bir katman ekleyerek” sorunları çözme yaklaşımı da risklidir. Bu konuda daha geniş bir perspektif için Erişilebilirlik Overlay'leri Neden Dava Ediliyor — Gerçek İyileştirme Nasıl Yapılır? yazısına göz atabilirsiniz.

WCAG 2.2 açısından temel prensipler (banner özelinde)

WCAG, çerez banner’larına özel bir bölüm olarak yazılmasa da, banner bir arayüz bileşeni olduğu için ilgili başarı ölçütleri birebir geçerlidir. En çok etkilenen alanlar:

• Klavye erişilebilirliği (işlemler fareye bağlı olmamalı),
• Odak (focus) yönetimi (modal açıldığında odağı doğru yönetmek),
• Programatik ad/rol/değer (ekran okuyucular için doğru etiketleme),
• Yeterli kontrast ve görünür odak (bileşenlerin seçilebilir ve ayırt edilebilir olması),
• Anlaşılabilir dil ve tutarlı seçenekler (kullanıcıyı manipüle etmeyen, net bir seçim seti).

1) Klavye ile tamamen kullanılabilir olmalı

WCAG’nin temel beklentisi: Banner içindeki her şey yalnızca klavye ile erişilebilir ve çalışır olmalı. Pratik kontrol listesi:

• Tab sırası mantıklı mı? Önce başlık/açıklama, sonra ana eylemler (“Tümünü kabul et”, “Reddet”, “Tercihleri yönet”), sonra ayrıntılar.
• Enter/Space ile butonlar çalışıyor mu? Gerçek <button> kullanın; tıklanabilir <div>lerden kaçının.
• Esc ile kapanma (uygunsa): Esc, bannerı kapatsa bile kullanıcıya “tercih verilmeden kapatma” gibi bir tuzak yaratmamalı. Kapatma varsa, kapatınca varsayılanın ne olduğu açıkça belirtilmeli.
• Klavye tuzağı yok: Kullanıcı banner içinde gezinebilir ama bir noktada takılıp kalmamalı; aynı zamanda modal açıkken odak arka sayfaya “kaçmamalı”.

2) Odak yönetimi: Modal açılınca odak nereye gidiyor?

Çerez banner’ı genellikle bir modal/diálogo gibi davranır. WCAG 2.2 bağlamında iyi odak yönetimi, hem klavye kullanıcıları hem ekran okuyucular için belirleyicidir:

• Açılışta odak: Banner açılınca odak banner kapsayıcısına veya ilk anlamlı öğeye (ör. “Çerez tercihleri” başlığı veya birincil eylem) taşınmalı.
• Odak tuzağı (focus trap): Modal açıkken Tab/Shift+Tab odağı modal içinde döndürmeli (arka sayfaya gitmemeli).
• Kapanışta odak geri dönüşü: Banner kapanınca odak, banner açılmadan önceki tetikleyici öğeye (ör. “Çerez ayarları” bağlantısı) geri dönmeli.
• Görünür odak: Odak halkası CSS ile kaldırılmamalı; yeterince belirgin olmalı.

Bu noktada WCAG 2.2’nin “odak görünürlüğü” beklentileri daha pratik bir önem kazanır: Kullanıcı nerede olduğunu her an anlayabilmelidir.

3) Ekran okuyucu uyumu: Doğru semantik ve duyurular

Ekran okuyucuların banner’ı doğru “anlaması” için, görsel düzen yetmez; semantik gerekir. Uygulanabilir öneriler:

• Doğru rol: Modal için role="dialog" veya role="alertdialog" (içeriğin aciliyetine göre) ve aria-modal="true" kullanın.
• Başlık ve açıklama bağlama: aria-labelledby ile başlığı, aria-describedby ile kısa açıklamayı bağlayın.
• Buton adları açık olmalı: “Tamam” yerine “Tüm çerezleri kabul et”, “Gerekli dışındakileri reddet” gibi net adlar kullanın.
• Ana sayfayı okumayı engelleyin: Modal açıkken arka planın ekran okuyucu tarafından dolaşılmasını önlemek için uygun yöntemleri (ör. inert veya arka alanı erişilemez kılma) değerlendirin.
• Tercih anahtarları: Kategori anahtarlarında (toggle) gerçek input type="checkbox" veya ARIA uyumlu switch deseni kullanın; durum (açık/kapalı) programatik olarak iletilmeli.

4) “Kabul et” ve “Reddet” seçeneklerinde eşitlik ve netlik

WCAG doğrudan “eşit görsel ağırlık” kuralı koymasa da, algılanabilirlik ve anlaşılabilirlik ilkeleri gereği kullanıcıyı yanıltan veya seçenekleri gizleyen tasarımlar erişilebilirlik açısından sorunlu hâle gelebilir. İyi uygulamalar:

• Reddet seçeneği banner içinde bulunabilir olmalı (tercih ekranına gömülmüş, zor bulunan bir link olmamalı).
• Buton hiyerarşisi dengeli olmalı: “Kabul et” dev, “Reddet” küçük link gibi olmamalı.
• Dil açık ve kısa olmalı: Teknik çerez kategorilerini kısa açıklamalarla destekleyin.
• Zaman baskısı yaratmayın: Geri sayım, otomatik kaybolma gibi örüntüler erişilebilirlik ve güven açısından kötü deneyimdir.

Gizlilik sinyalleri ve evrensel opt-out yaklaşımları da bu tartışmanın parçası. Daha fazlası için Global Privacy Control ve Evrensel Opt-Out Sinyalleri: Yürürlüğe Girmeden Hazırlanın yazısı, teknik ve ürün bakışı açısından faydalı olur.

5) Renk kontrastı, metin boyutu ve dokunmatik hedefler

Banner’ın özellikle mobilde erişilebilir olması için görsel erişilebilirlik şarttır:

• Kontrast: Metin ve arka plan arasında yeterli kontrast sağlayın; butonlar “devre dışı” veya ikincil durumda bile okunabilir kalmalı.
• Yazı boyutu ve satır aralığı: Kullanıcı tarayıcıda yakınlaştırdığında içerik taşmamalı, üst üste binmemeli.
• Dokunmatik hedef boyutu: WCAG 2.2, hedef boyutu beklentilerini güçlendirdi. Butonlar/anahtarlar birbirine çok yakın olmamalı; yanlış tıklamayı azaltın.
• Hareket/animasyon: Banner açılış animasyonlarını azaltın; “prefers-reduced-motion” tercihini destekleyin.

6) “Tercihleri yönet” ekranı: Asıl erişilebilirlik sınavı

Birçok sitede ilk banner nispeten basittir; asıl sorun “çerez ayarları” panelinde başlar. Kontrol edin:

• Kategoriler anlaşılır mı? “Pazarlama”, “Analitik”, “İşlevsel” gibi kategoriler kısa, kullanıcı odaklı açıklamalar içermeli.
• Her kategori için durum ve kapsam net mi? “Gerekli çerezler” neden zorunlu, hangi amaçla kullanılıyor açıklanmalı.
• Satıcı listeleri (varsa): Uzun listelerde arama, filtreleme ve klavye ile gezinme mümkün olmalı.
• Kaydet: “Seçimleri kaydet” eylemi net ve tek olmalı; kaydetmeden çıkınca ne olacağı anlaşılır olmalı.

Çok dilli sitelerde, erişilebilirlik sorunları çeviriyle katlanır: dil değişince buton etiketleri, açıklamalar, hatta metin yönü (RTL) değişebilir. Bu nedenle Çok Dilli Onay: Bir Kez Yazın, Hizmet Verdiğiniz Her Dilde Yayınlayın yaklaşımı hem tutarlılık hem de erişilebilirlik için önemlidir.

7) Çerez banner’ı “bulunabilir” olmalı: Politikalara erişim ve kalıcı bağlantı

Kullanıcı yalnızca ilk ziyaretinde değil, sonrasında da tercihlerini değiştirebilmelidir. İyi bir desen:

• Footer’da veya hesap/ayarlar alanında “Çerez tercihleri” bağlantısı,
• Gizlilik politikası ve mümkünse erişilebilirlik bildirimine banner içinden bağlantı,
• Bu sayfaların da klavye ve ekran okuyucu ile rahat gezilebilir olması.

Bu “bulunabilirlik” konusu çoğu kurumda gözden kaçıyor. Özellikle politika ve bildirim sayfalarının kullanıcılar tarafından gerçekten bulunup bulunmadığını ele alan Erişilebilirlik Bildiriminiz ve Gizlilik Politikanız Yasal Zorunluluk — Peki Kim Bulabiliyor? yazısı, çerez tercihleri bağlantısı tasarımını da düşünürken iyi bir çerçeve sunar.

8) Test ve sürdürülebilir izleme: Bir kere yapmak yetmez

Çerez banner’ları; CMP güncellemeleri, yeni satıcılar, yeni tasarım sistemleri ve A/B testleriyle sık değişir. Bu yüzden erişilebilirliği “yayına al ve unut” şeklinde yönetmek gerçekçi değildir. Pratik bir test yaklaşımı:

• Klavye testi: Mouse’u bırakın; banner’ı açın, tüm seçenekleri değiştirin, kaydedin, kapatın.
• Ekran okuyucu testi: NVDA/JAWS (Windows) veya VoiceOver (macOS/iOS) ile başlık, açıklama, buton adları ve durumların doğru okunduğunu doğrulayın.
• Kontrast ve zoom: 200% zoom’da taşma var mı? Mobilde hedefler yeterince büyük mü?
• Otomatik tarama + manuel doğrulama: Otomasyon hızlı yakalar; ancak odak yönetimi ve gerçek akış mutlaka manuel görülmelidir.

Bu noktada Corpowid (corpowid.ai), sitenizdeki erişilebilirlik sorunlarını otomatik denetimler ve izleme ile görünür kılmanıza yardımcı olabilir; çerez banner’ı gibi sık değişen bileşenlerde geriye dönüşleri (regression) daha erken yakalamak için düzenli kontrol önemlidir.

Sonuç: Erişilebilir onay, daha güvenilir bir deneyimdir

Erişilebilir bir çerez banner’ı; klavye ile kullanılabilen, ekran okuyucuya doğru duyurulan, yeterli kontrast ve hedef boyutu sunan, manipülatif olmayan ve her zaman tekrar bulunabilen bir onay deneyimi demektir. Bu yaklaşım sadece WCAG 2.2 uyumu için değil, daha kapsayıcı ve güven veren bir dijital deneyim için de temel bir yatırımdır. Eğer çerez banner’ınızı düzenli olarak denetlemek ve değişikliklerden sonra erişilebilirliğin korunduğunu takip etmek istiyorsanız, Corpowid (corpowid.ai) gibi bir platformla izleme ve raporlama sürecini sistematikleştirebilirsiniz.

Kapsayıcılığın yalnızca “uyum” değil, daha geniş toplumsal etkilerle de bağlantılı olduğunu hatırlamak faydalı: dijital hizmetler; kriz iletişimi, kamu bilgilendirmesi ve iklim eylemi gibi alanlarda da erişilebilir olmalıdır. Bu perspektif için COP31 ve Erişilebilirlik: İklim Eyleminde Dijital Kapsayıcılık Neden Belirleyici? yazısı iyi bir okuma tamamlayıcısıdır.