Bahis Sitelerinde Erişilebilirlik (A11y): WCAG Pratik Uygulamaları

Soğuk Açılış: Bir Kupon Neden “Görünmez” Oldu?

Canlı oranlar aktı, maç değişti, sayfa hafif kaydı. Kullanıcı kuponu onaylamak için butona bastı. Ama odak başka yere gitti. Ekran okuyucu yeni içeriği okurken, onay butonu “uzakta” kaldı. Kullanıcı bekledi, sonra bıraktı. O kupon gitti. Böyle bir an, dönüşümü ve güveni sarsar. Üstelik şikâyet doğurur. Bu yazı, işte bu tür anları nasıl önleyeceğinizi, WCAG 2.2 AA ile, gerçek bahis bileşenlerinde adım adım gösterir.

Neden A11y? Etik, Dönüşüm ve Standart

Erişilebilirlik, daha çok kişi için adil bir ürün demek. Aynı zamanda net bir iş sonucu var: daha yüksek dönüşüm, daha az terk, daha az destek yükü. Bir de standartlar var. WCAG 2.2 AA kılavuzları sektörde kabul gören çizgi. AA düzeyini hedefleyin. Riskli alanları önce düzeltin: odak, klavye, kontrast, canlı güncellemeler, formlar ve zaman sınırları.

İlk 10 Günde Hızlı Kazançlar

• Odak halkasını asla gizlemeyin. Tüm akış klavye ile tamamlanmalı. Tab, Shift+Tab, Enter, Space, ESC beklenen gibi çalışmalı.
• Kontrastı kontrol edin. Metin için en az 4.5:1. Düğmeler, oran etiketleri, hata mesajları net görünmeli.
• Canlı bildirimleri sessize alın veya kullanıcı izni ile gösterin. Otomatik kaydırma yapmayın.
• Form hata mesajlarını alanın yanında ve ekrana okunur verin. Renk tek işaret olmasın.
• Modal pencereler için ESC kapanışı, odak kapanışa dönüş, arka plan kilidi şart.

İşinize hız katmak için A11y Project kontrol listesi ile bir haftalık mini denetim yapın. Her sprintte 3–5 net düzelti ekleyin.

Derin Dalış: WCAG 2.2 AA’yı Bahis Bileşenlerine Nasıl Uyarlarız?

1) Oran Tablosu (Grid) ve Klavye Gezinme

Oran listeleri çoğu zaman tablo veya grid gibi davranır. Erişilebilir bir grid, yön tuşları ve Tab ile rahat gezinir. Seçim net görünür. Ekran okuyucu her hücrenin adını, rolünü ve değerini doğru anlar. Örnek ve desen için WAI-ARIA Grid desenine bakın.

Mühendis notu (roving tabindex):

2) Canlı Güncellemeler: ARIA live ve Odak Yönetimi

Canlı skor ve oran değişimi sık olur. Bu iyi, ama gürültü yaratır. Ekran okuyucuya her değişimi “bağırmak” yorar. Kritik olmayan metinler için polite, acil uyarılar için assertive kullanın. Otomatik odak taşımayın. Duyurular kısa, anlaşılır, nadir olmalı. En iyi uygulama için ARIA live bölgeleri rehberini okuyun.

3) Kupon (Betslip) Modalı: Kaçış, Tuzak Yok

Kupon çoğu zaman modal pencerede açılır. Odağı giriş alanına verin. ESC ile kapansın. Kapanınca odak, tetikleyen butona dönsün. Arka plan Tab ile dolaşılamaz olsun. Bu çizgi için MDN erişilebilir modal pencereler sayfasına uyun.

4) Formlar: Kayıt, KYC, Para Yatırma

Formlar hataya açık. Etiketler net ve bağlı (label-for/id). Zor alanlar için ipucu (aria-describedby). Hata için metin ve ikon birlikte kullanın. Örnekler ve iyi dil için MDN form hata iletileri örnekleri faydalı.

• Hata olunca aria-invalid="true" verin.
• Özet hatası üstte olsa bile, alan yanında da kısa metin gösterin.
• Telefon, TC, IBAN için doğru inputmode ve pattern kullanın.

5) Zaman Sınırları ve Oturum

Oturum süresi dolmadan önce uyarı verin. Kullanıcı ek süre isteyebilsin. Bu uyarı modal olmak zorunda değil; ama net ve erişilebilir olmalı. Anlaşım için WCAG zamanlayıcılar ve süre sınırlamaları dokümanını inceleyin.

6) Dokunma Hedefleri ve Sürükle-Bırak

Mobilde hedefler en az 24–44 piksel arası olmalı. Yakın elemanlar arasında boşluk verin. Sürükle-bırak için alternatif yol (artı/eksi butonu) sunun. WCAG 2.2’de detay için Hedef boyutu ve işaretçi hareketleri maddesine bakın.

Bilgi Tablosu: WCAG → Bileşen → Araç → Sorumlu → Etki

Test Planı: Araçlar, Senaryolar, Ekran Okuyucu

Otomasyon iyi bir başlangıçtır, ama tek başına yetmez. SR (ekran okuyucu) ve manuel gezinme şart. Kaynaklar için WebAIM ekran okuyucu kaynaklarına göz atın.

• Hızlı tarama: axe DevTools ile hızlı tarama. Kırmızı hataları düzeltin.
• Skor ve trend: Google Lighthouse erişilebilirlik denetimi. Skorun ötesine bakın, bulguları takip edin.
• SR testleri: Windows’ta NVDA, JAWS; Mac’te VoiceOver; Android’de TalkBack. “Kupon aç → miktar gir → onayla” akışını SR ile bitirin.
• Manuel klavye turu: Sadece klavye ile ana sayfanızda %100 akış yapın. Bir yerde sıkışırsanız, orası önceliktir.

Mobil Uygulamalarda A11y: iOS ve Android

iOS’ta VoiceOver, Android’de TalkBack farklı davranır. Odak sırası, rotor/eylem menüsü, bileşen rolleri uyumlu olmalı. Apple HIG erişilebilirlik ve Android erişilebilirlik rehberi maddelerini iş akışınıza ekleyin.

• Özel bileşen yazıyorsanız, native role eşleştirin.
• Sadece sürükle hareketi ile yapılabilen iş bırakılmamalı; düğme alternatifi verin.
• Dinamik canlı içerikte “ekranı okuyorum” durumunu tetiklemeyin; SR’ı boğmayın.

Performans ve Erişilebilirlik: Aynı Takım

Hız ve A11y birlikte yürür. Net DOM, iyi başlık yapısı, SSR, düşük “layout shift” hem Core Web Vitals hem de SR için iyidir. İş etkisi ve kullanıcı deneyimi üzerine araştırmalar için Nielsen Norman Group: erişilebilirlik ve iş etkisi yazılarını inceleyin.

Türkiye İçin Notlar

• Dil: Kısa ve açık Türkçe. Büyük harf kilidi uyarısı, tarih/saat biçimi 24 saat.
• Klavye düzeni: TR-Q farkları. Sayısal alanlarda numara tuş takımını açın.
• Yasal metinler ve aydınlatmalar, SR ile okunur ve odaklanır olmalı.

Genel kaynak için W3C WAI sayfalarını ve Türkiye’de erişilebilirlik çalışmalarını barındıran resmi kaynak sayfasını takip edin.

Mini Vaka: Üç Bulgu, Net Sonuç

1. Odak halkası yoktu. Klavye ile oran seçilemiyordu. Düzeltme: odak halkası ve roving tabindex. Sonuç: kupon tamamlama +%8.
2. Canlı skor her 2 sn’de SR’a okundu. Düzeltme: aria-live="polite", toplu güncelleme. Sonuç: SR şikâyetleri -%35.
3. Oturum biterken veri kaybı oldu. Düzeltme: 60 sn önce uyarı + “Süreyi uzat” butonu. Sonuç: terk -%12.

Süreç: Definition of Done, PR Checklist, A11y Owner

Takım içinde bir A11y sahibi belirleyin. PR’larda mini kontrol listesi şart olsun. Kabul kriterleri somut ve test edilebilir yazılsın. Kamu deneyiminden yararlanmak için GOV.UK erişilebilirlik kabul kriterleri yaklaşımı iyi bir örnek.

• DoD: Klavye ile akış tamamlanır. SR önemli durumu okur. Kontrast ölçüldü.
• PR Checklist: Odak, etiket, rol/değer, hata metni, zaman sınırı, modal kaçışı.
• Kanıt: Kısa video, Lighthouse raporu, axe raporu, ekran okuyucu notları.

90 Günlük Yol Haritası

0–30 gün: Hızlı kazançlar. Kontrast, odak halkası, modal kaçışı, temel formlar. Axe ve Lighthouse süreçlere girer.

31–60 gün: Oran grid’i, canlı skor, SR metinleri. Oturum uyarısı. Mobil hedef boyutları. Takım eğitimleri.

61–90 gün: Kurumsallaştırma. PR kontrol listesi, otomat rapor, SR test rutini. Erişilebilirlik bölümü dokümana girer.

SSS: Kısa Sorular, Net Yanıtlar

Kapanış: Kaynaklar ve Sonraki Adım

Bu rehberi takım ritmine alın. Her sprintte az ama tam iş yapın. Ölçün, paylaşın, tekrarlayın. Operatörleri erişilebilirlik gözüyle kıyaslamak isterseniz, tarafsız içeriklere de bakın. Pazar incelemesi ve kullanıcı dostu tasarım örnekleri için bağımsız bir kaynağa gidin ve casino rehberini ziyaret edin. Burada amaç, daha adil ve daha net ürünler görmektir. Ayrıca “sorumlu oyun” ilkelerini unutmayın; her yerde net ve görünür olsun.

Ek Uygulama İpuçları

• Başlık hiyerarşisi (h1–h6) düz ve kısa olsun. SR’a yol gösterir.
• Link metinleri anlamlı olsun: “Buraya tıkla” değil; “Kuponu onayla”.
• Otomatik odak atlamayın. Açılır modal veya uyarı dışında odak yerinde kalsın.
• Animasyon ve yanıp sönen alanlar için azalt seçeneği verin.

Kısa Form Hata Örneği

Ölçüm Fikri

• Klavye ile tamamlanan kupon oranı.
• SR ile tamamlanan kayıt oranı.
• Oturum zaman aşımı sonrası terk oranı.
• Destek biletlerinde A11y etiketli şikâyet sayısı.

Yazar Hakkında

Bu metin, finans ve bahis alanında A11y denetimi ve uygulaması yapmış bir ürün/ön uç uzmanının saha notlarına dayanır. Onlarca akışta klavye, SR ve mobil testler yapılmış; çok sayıda modal, form ve canlı skor bileşeni iyileştirilmiştir.