Klavye Tuzakları ve ADA

Odak takılıp kaldığında

2.1.2 başarı ölçütü, klavye odağı bir bileşene klavye arayüzüyle girebiliyorsa, yine yalnızca klavyeyle oradan çıkılabilmesini ister. Çıkmak için değiştirilmemiş ok ya da Tab tuşlarından fazlası ya da başka bir standart çıkış yöntemi gerekiyorsa, kullanıcıya bunun nasıl yapılacağı söylenmelidir.

Pratikte iki nokta önemlidir. Birincisi, odağı sınırlamak uygun olduğunda, örneğin açık bir modal iletişim kutusunda, kullanıcılar nasıl çıkacaklarını bildiği sürece sorun değildir. İkincisi, ölçüt sayfadaki tüm içerik için geçerlidir; başka hiçbir ölçütü karşılamak için kullanılmayan üçüncü taraf bileşenler de buna dahildir. Tuzağa düşüren tek bir bileşen sayfanın geri kalanını erişilmez kılabilir.

Tuzak nadiren kasıtlıdır. Genellikle "yardımcı olmak" için yazılmış bir betikten çıkar: odağı geri çeker, Tab tuşunu yutar ya da çıkışı olmayan bir döngü kurar.

Kamu sitelerinde rastlanan tuzaklar

• Geçerli bir değer girilene kadar odağı alana geri zorlayan fatura ödeme formu.
• Okul kayıt formunda Tab'ı döndüren ve Esc'i yok sayan yardım penceresi.
• Odağı harita içinde tutan, bir CBS tedarikçisinden gömülü parsel ya da imar haritası.
• Dokunmadan kapatılamayan, uygulamadaki tam ekran diyalog.

Bunlarla karşılaşanlar, fareyle etrafından dolaşamayan kişilerdir. Ödeme ya da başvuru adımındaki bir tuzak yalnızca tek bir denetimi değil, bütün hizmeti engeller.

Odağı rehin alan doğrulama

Bazı formlar, değer geçersizse alan odağını bırakınca onu geri odaklar. Klavye kullanıcısı bu durumda ne değeri başka bir yoldan düzeltebilir ne de alandan çıkabilir. Doğrulamayı gönderimde ya da kullanıcı ilerledikten sonra yapın, sorunu metinle gösterin ve odağın kullanıcının yönlendirdiği yere gitmesine izin verin.

<input id="pay-date" name="pay-date">
<script>
  const payDate = document.getElementById("pay-date");
  payDate.addEventListener("blur", () => {
    if (!isValidDate(payDate.value)) payDate.focus();
  });
</script>

<label for="pay-date">Ödeme tarihi (GG.AA.YYYY)</label>
<input id="pay-date" name="pay-date" aria-describedby="pay-date-err">
<p id="pay-date-err" role="alert" hidden>
  15.04.2026 gibi bir tarih girin.
</p>
<script>
  const form = document.querySelector("form");
  const payDate = document.getElementById("pay-date");
  const payDateErr = document.getElementById("pay-date-err");
  form.addEventListener("submit", e => {
    if (!isValidDate(payDate.value)) {
      e.preventDefault();
      payDateErr.hidden = false;
      payDate.focus();   // yalnızca gönderimde ve hata gösterilerek
    }
  });
</script>

Açılır pencereler ve gömülü bileşenler

Bir açılır pencere odağı bilerek içinde tutuyorsa, bir kapat düğmesi koyun, Esc ile kapanmasını sağlayın ve odağı pencereyi açan denetime geri verin.

<div id="help-panel" class="popover">…</div>
<script>
  const helpPanel = document.getElementById("help-panel");
  helpPanel.addEventListener("keydown", e => {
    if (e.key !== "Tab") return;
    const f = [...helpPanel.querySelectorAll("a[href], button")];
    if (e.shiftKey && document.activeElement === f[0]) {
      e.preventDefault(); f.at(-1).focus();
    } else if (!e.shiftKey && document.activeElement === f.at(-1)) {
      e.preventDefault(); f[0].focus();
    }
  });   // Esc yok, kapat düğmesi yok
</script>

<div id="help-panel" class="popover" hidden>
  <button type="button" id="help-close">Kapat</button>
  …
</div>
<script>
  const helpPanel = document.getElementById("help-panel");
  let opener;
  function openHelp() {
    opener = document.activeElement;
    helpPanel.hidden = false;
    helpPanel.querySelector("button").focus();
  }
  function closeHelp() { helpPanel.hidden = true; opener.focus(); }
  document.getElementById("help-close").addEventListener("click", closeHelp);

  helpPanel.addEventListener("keydown", e => {
    if (e.key === "Escape") { closeHelp(); return; }
    if (e.key !== "Tab") return;
    const f = [...helpPanel.querySelectorAll("a[href], button")];
    if (e.shiftKey && document.activeElement === f[0]) {
      e.preventDefault(); f.at(-1).focus();
    } else if (!e.shiftKey && document.activeElement === f.at(-1)) {
      e.preventDefault(); f[0].focus();
    }
  });
</script>

Gömülü tedarikçi içeriği en zor durumdur, çünkü kodunu siz denetlemezsiniz. İçeri ve dışarı Tab ile geçerek test edin. Düzeltilemiyorsa çıkış tuşunu kullanıcıya söyleyin ve aynı işlevi tuzağa düşürmeyen bir biçimde de sunun:

<iframe src="https://gis.vendor.example/parcels"></iframe>

<iframe src="https://gis.vendor.example/parcels"
        title="Parsel haritası"></iframe>
<p>Klavye odağı haritada mı kaldı? Esc'e, ardından Tab'a basın.
   <a href="/parsel-ara">Parsel numarasıyla arama</a> da yapabilirsiniz.</p>

Mobil uygulamalardaki diyaloglar

Anahtar cihazı ya da klavye kullanılan bir telefon veya tablette, görünür bir kapatma denetimi olmayan tam ekran sunum çıkmaz sokağa dönüşebilir. Her zaman bir Kapat eylemi koyun. SwiftUI tam ekran örtüsünün yerleşik bir kapatma yolu yoktur; Compose diyaloğu ise geri eylemine yanıt vermelidir. NavigationStack iOS 16 ya da üstünü gerektirir.

SwiftUI:

.fullScreenCover(isPresented: $showHelp) {
    HelpView()   // kapatmanın yolu yok
}

.fullScreenCover(isPresented: $showHelp) {
    NavigationStack {
        HelpView()
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Kapat") { showHelp = false }
                }
            }
    }
}

Jetpack Compose:

if (showHelp) {
    Dialog(onDismissRequest = { }) {   // geri ve dış dokunuşlar yok sayılıyor
        HelpContent()
    }
}

if (showHelp) {
    Dialog(onDismissRequest = { showHelp = false }) {
        Column {
            HelpContent()
            TextButton(onClick = { showHelp = false }) { Text("Kapat") }
        }
    }
}

Tab ile gir, Tab ile çık: nasıl test edilir

1. Ana görevin her sayfasını, ardından açılan her bileşeni gezin: açılır pencereler, tarih seçiciler, sohbet kutuları, gömülü haritalar, belge görüntüleyicileri.
2. Her birinde sizi çıkaran tuşu not edin. Bu Tab, Shift+Tab, bir ok tuşu ya da Esc değilse, sayfanın bunu söyleyip söylemediğini kontrol edin.
3. Formlara hatalı değerler girin ve klavyeyle uzaklaşın. Odak sizin yönlendirdiğiniz yere gitmelidir.
4. Her şeyi, üretimde çalıştığı gibi tüm üçüncü taraf betikler açıkken tekrarlayın.

axe gibi araçlar bazı örüntüleri yakalayabilir, ama tuzak çoğu zaman çalışma anındaki betik davranışına bağlıdır; bu yüzden önce insan testi gelir.

Tuzak yaratan hatalar

• Çıkış yolu tanımlamadan Tab üzerinde preventDefault() çağırmak.
• blur ya da focusout olayında alanı yeniden odaklamak.
• Kapat düğmesi ve Esc işlemesi olmayan bir diyalog içinde odağı döndürmek.
• Bir eklenti ya da tedarikçi bileşeni gömüp içinden hiç Tab ile geçmemek.
• Çıkış tuşunu yalnızca kimsenin bulamayacağı bir yardım sayfasında belgelemek.

ADA açısı ve yayın öncesi liste

WCAG 2.1.2 üçüncü taraf bileşenler dahil sayfadaki tüm içeriğe uygulanır; bu yüzden tuzağa düşüren gömülü bir harita dipnot olarak bırakılmamalı, düzeltilmeli ya da değiştirilmelidir.

Şunlar tamamsa yayına alın:

• Odağı tutan her bileşenden klavyeyle çıkılabiliyor.
• Standart olmayan her çıkış tuşu bileşenin yanında belirtilmiş.
• Doğrulama odağı kendiliğinden geri götürmüyor.
• Her diyalogda görünür bir Kapat eylemi var ve Esc ya da geri tuşuna yanıt veriyor.

Tedarikçi içeriği için tedarikçiler ve üçüncü taraf içerik sayfasına bakın.

Kaynaklar

• Understanding SC 2.1.2: No Keyboard Trap (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.