Klavye Kilitlenmesinin Olmaması

Kısaca

Klavye kilitlenmesi, kullanıcının Tab ile bir bileşene girdikten sonra oradan çıkamaması durumudur. Fare kullanan kişi başka bir yere tıklayıp kurtulabilir; klavye kullanan kişi ise sayfayı yenilemekten başka çaresi olmadan orada kalır.

Bu kriter, klavyeyle girilen her yerden klavyeyle çıkılabilmesini ister. Çıkış için standart dışı bir tuş gerekiyorsa (Tab, Shift+Tab, Escape dışında), bu tuşun kullanıcıya bildirilmesi gerekir.

Neleri kapsar?

• Modal diyaloglar: Odağı içeride tutması beklenen ama Escape ve kapatma düğmesiyle çıkış sunması gereken pencereler.
• Kendiliğinden açılan pencereler: Bildirim, çerez onayı veya kampanya pencereleri.
• Gömülü içerikler: iframe içindeki oynatıcılar, haritalar, ödeme formları ve üçüncü taraf bileşenler.
• Zengin metin editörleri: Tab tuşunu girinti için kullanan metin alanları.
• Mobilde odak yönetimi: Ekran okuyucuyla gezinirken bir bileşenin veya katmanın dışına çıkılabilmesi.
• Kapsam dışı notlar: Bileşenin klavyeyle kullanılabilir olması bir önceki kriterin (Klavye Erişimi) konusudur.

Kimleri etkiler?

Yalnızca klavye kullanan kişiler, ekran okuyucu kullanan kör kullanıcılar ve anahtar cihazlarıyla gezinen motor engelli kullanıcılar doğrudan etkilenir. Bu kullanıcılar için bir kilitlenme, sayfanın geri kalanının tamamen kullanılamaz hâle gelmesi anlamına gelir. Ekran okuyucu kullanıcıları ayrıca odağın nerede sıkıştığını göremedikleri için durumu anlamakta da zorlanır.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 69–70 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Çıkışı olmayan odak tuzağı

Modal pencerelerde odağı içeride tutmak doğru bir uygulamadır; ancak Escape ve görünür bir kapatma düğmesiyle çıkış her zaman mümkün olmalıdır.

// Odak döngüsü var, ama hiçbir çıkış yolu yok
modal.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    e.preventDefault();
    sonrakiOgeyeOdaklan();
  }
});

modal.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    modaliKapat();          // odağı açan düğmeye geri verir
    return;
  }
  if (e.key === "Tab") {
    odagiModalIcindeTut(e); // ilk ve son öğe arasında döngü
  }
});
// Modal içinde görünür bir "Kapat" düğmesi de bulunur.

2. Yerleşik dialog ile güvenli modal

showModal() ile açılan dialog, arka planı etkisiz kılar, Escape ile kapanır ve odağı tarayıcı düzeyinde yönetir. Kendi odak tuzağınızı yazmanıza gerek kalmaz.

<dialog id="cerez-diyalog" aria-labelledby="cerez-baslik">
  <h2 id="cerez-baslik">Çerez tercihleri</h2>
  <p>Zorunlu çerezler dışındaki çerezleri kabul ediyor musunuz?</p>
  <form method="dialog">
    <button value="red">Yalnızca zorunlu çerezler</button>
    <button value="kabul">Tümünü kabul et</button>
  </form>
</dialog>

<script>
  const acan = document.activeElement;
  const diyalog = document.getElementById("cerez-diyalog");
  diyalog.showModal();
  diyalog.addEventListener("close", () => acan?.focus());
</script>

3. Odağı modala almadan içeriği gösterme

Modal olmayan bir bildirim veya bilgi kutusu odağı hiç hapsetmemelidir; kullanıcı Tab ile sayfada ilerlemeye devam edebilmelidir.

<div class="bilgi-kutusu" tabindex="0"
     onblur="this.focus()">
  Sistem bakımı 22.00'de başlayacaktır.
</div>

<div class="bilgi-kutusu" role="status">
  Sistem bakımı 22.00'de başlayacaktır.
  <button type="button" aria-label="Bildirimi kapat">×</button>
</div>

4. Tab tuşunu yakalayan metin editörü

Kod veya girinti gerektiren editörler Tab'ı kendisi kullanabilir; bu durumda çıkış yolu açıkça belirtilmeli ve çalışmalıdır.

<label for="aciklama">Başvuru açıklaması</label>
<p id="editor-ipucu">
  Bu alanda Tab tuşu girinti ekler. Alandan çıkmak için
  önce Escape'e, ardından Tab'a basın.
</p>
<textarea id="aciklama" aria-describedby="editor-ipucu"></textarea>

<script>
  const alan = document.getElementById("aciklama");
  let girintiModu = true;
  alan.addEventListener("focus", () => { girintiModu = true; });
  alan.addEventListener("keydown", (e) => {
    if (e.key === "Escape") { girintiModu = false; return; }
    if (e.key === "Tab" && girintiModu && !e.shiftKey) {
      e.preventDefault();
      alan.setRangeText("\t", alan.selectionStart, alan.selectionEnd, "end");
    }
  });
</script>

5. Gömülü içerikler

Harita, oynatıcı veya ödeme formu gibi üçüncü taraf içerikleri yayına almadan önce klavyeyle test edin. Odağı iade etmeyen bir bileşen varsa, kullanıcıya bileşeni atlama imkânı verin.

<a href="#harita-sonrasi" class="atla">Haritayı atla</a>
<iframe title="Hizmet binalarının konumu"
        src="https://harita.ornek.gov.tr/embed"></iframe>
<div id="harita-sonrasi" tabindex="-1">
  <h2>Adres ve ulaşım bilgileri</h2>
  …
</div>

Atlama bağlantısı yardımcı olur ama kilitlenmeyi tek başına çözmez: kullanıcı yanlışlıkla bileşene girerse yine çıkabilmelidir. Sorun sürüyorsa bileşen sağlayıcısıyla görüşülmeli veya alternatif bir bileşen kullanılmalıdır.

Mobil için kod örnekleri

Mobilde kilitlenme genellikle özel katmanlarda, modal olmayan ama arka planı kapatan görünümlerde veya kapatma düğmesi erişilebilir olmayan pencerelerde ortaya çıkar. Standart sayfa (sheet) ve diyalog bileşenleri hem kapatma hareketlerini hem geri tuşunu destekler.

iOS (SwiftUI)

import SwiftUI

struct BasvuruOzeti: View {
    @State private var detayAcik = false

    var body: some View {
        Button("Başvuru detaylarını göster") { detayAcik = true }
            .sheet(isPresented: $detayAcik) {
                NavigationStack {
                    Text("Başvuru no: 2026-48213")
                        .toolbar {
                            // Görünür ve erişilebilir kapatma düğmesi
                            ToolbarItem(placement: .cancellationAction) {
                                Button("Kapat") { detayAcik = false }
                            }
                        }
                }
                // Sayfa VoiceOver'ın iki parmakla "Z" çizme (geri) hareketiyle de kapanır.
            }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun SilmeOnayi(acik: Boolean, onKapat: () -> Unit, onSil: () -> Unit) {
    if (acik) {
        AlertDialog(
            // Geri tuşu, dışarı dokunma ve TalkBack geri hareketi bu çağrıyı tetikler.
            onDismissRequest = onKapat,
            title = { Text("Başvuru silinsin mi?") },
            text = { Text("Bu işlem geri alınamaz.") },
            confirmButton = { TextButton(onClick = onSil) { Text("Sil") } },
            dismissButton = { TextButton(onClick = onKapat) { Text("Vazgeç") } }
        )
    }
}

Nasıl test edilir?

• Her bileşene girip çıkın: Sayfada Tab ile ilerleyerek her bileşene girin; ardından Tab, Shift+Tab ve gerekiyorsa Escape ile çıkmayı deneyin.
• Diyalog ve açılır pencereleri kapatın: Her pencere Escape ile ve görünür bir düğmeyle kapanıyor mu? Kapandıktan sonra odak mantıklı bir yere dönüyor mu?
• Gömülü içerikleri ayrıca test edin: iframe içindeki oynatıcılar, haritalar ve formlar odağı sayfaya geri veriyor mu?
• Mobilde geri hareketini deneyin: Ekran okuyucu açıkken her katmanı ve pencereyi geri hareketiyle kapatabiliyor musunuz?
• Otomatik araçların sınırı: Otomatik araçlar klavye kilitlenmesini tespit edemez; bu kriter yalnızca elle klavye testiyle doğrulanabilir.

Sık yapılan hatalar

• Escape'i dinlemeyen modallar: Odağı içeride tutan ama Escape ile kapanmayan pencereler.
• Odağı geri zorlayan betikler: blur olayında odağı aynı öğeye geri veren kodlar.
• Kapatma düğmesini odaklanamaz yapmak: Kapatma simgesinin div olması nedeniyle tek çıkış yolunun klavyeyle kullanılamaması.
• Test edilmemiş üçüncü taraf bileşenler: Sohbet pencereleri, oynatıcılar ve ödeme formları en sık kilitlenme kaynaklarıdır.
• Arka planı kapatıp odağı yönetmemek: Mobilde yarı saydam bir katman açıldığında ekran okuyucu odağının arkadaki içerikte kalması ya da katmana hiç girmemesi.

Kaynaklar

• Understanding SC 2.1.2: No Keyboard Trap (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Klavye kilitlenmesi, odak yönetimi, modal diyalog ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.