Odaklanma Üzerine

Kısaca

Klavye ve ekran okuyucu kullanıcıları sayfayı keşfetmek için öğeler arasında odakla gezinir. Bir öğeye yalnızca gelmek onu seçmek anlamına gelmez. Odak bir alana geldiğinde sayfa başka bir yere gidiyor, bir pencere açılıyor veya form gönderiliyorsa, kullanıcı sayfayı keşfedemez hâle gelir.

Bu kriter, odaklanmanın tek başına bağlam değişikliğine yol açmamasını ister. Bağlam değişikliği; yeni sayfaya veya ekrana geçiş, yeni pencere ya da diyalog açılması, odağın başka bir yere taşınması veya sayfanın anlamını değiştiren büyük içerik değişiklikleridir. Bu değişiklikler kullanıcının açık bir eylemiyle (tıklama, Enter) başlamalıdır.

Neleri kapsar?

• Yönlendirme: Odak alındığında başka bir sayfaya veya ekrana geçilmesi.
• Pencere ve diyalog açılması: Odaklanınca açılan pop-up, yeni sekme veya modal.
• Form gönderimi: Bir alana veya düğmeye odaklanınca formun gönderilmesi.
• Odağın taşınması: Odak bir öğeye gelince kendiliğinden başka bir öğeye atlaması.
• Kapsam dışı: Odaklanınca görünen ipuçları, alt menüler veya odak göstergeleri bağlam değişikliği sayılmaz. Bir değer girildiğinde veya seçildiğinde oluşan değişiklikler bir sonraki kriterin (Girdi Üzerine) konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör kullanıcılar sayfayı odakla keşfeder; beklenmedik bir değişiklik olduğunda nerede olduklarını anlamakta zorlanır. Yalnızca klavye kullanan kişiler için odakla tetiklenen bir yönlendirme, ilgili öğenin ötesine geçmeyi imkânsız kılabilir. Bilişsel engeli olan kullanıcılar ve ekranı büyüten az gören kişiler de öngörülemeyen değişikliklerden olumsuz etkilenir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 105–106 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. Odaklanınca yönlendiren bağlantı

<a href="/kampanya" onfocus="location.href=this.href">
  Yaz kampanyası
</a>

<a href="/kampanya">Yaz kampanyası</a>

2. Odaklanınca açılan diyalog

Bir alana gelindiğinde yardım penceresi açmak yerine, yardımı bir düğmeyle veya alanın yanında açıklama olarak sunun.

<label for="iban">IBAN</label>
<input id="iban"
       onfocus="document.getElementById('iban-yardim').showModal()">

<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-ipucu">
<p id="iban-ipucu">TR ile başlayan 26 karakter</p>
<button type="button"
        onclick="document.getElementById('iban-yardim').showModal()">
  IBAN nedir?
</button>

3. Odak taşıyan alan

Bir alana odaklanıldığında odağı kendiliğinden başka bir öğeye göndermek, klavye kullanıcısının o alanı atlamasını veya geri dönmesini engeller.

saltOkunurAlan.addEventListener("focus", () => {
  document.getElementById("sonraki-alan").focus();
});

<label for="basvuru-no">Başvuru numarası</label>
<input id="basvuru-no" value="2026-48213" readonly>
<!-- Salt okunur alan odak alabilir; odak taşınmaz -->

4. Odaklanınca gönderilen form

<button type="submit" onfocus="this.form.submit()">
  Başvuruyu gönder
</button>

<button type="submit">Başvuruyu gönder</button>

5. Kabul edilebilir: odakta görünen içerik

Odaklanınca bir ipucu veya alt menü göstermek bağlam değişikliği değildir; kullanıcı aynı yerde kalır.

<li class="menu-ogesi">
  <a href="/hizmetler">Hizmetler</a>
  <ul class="alt-menu">…</ul>
</li>

<style>
  .menu-ogesi:focus-within .alt-menu { display: block; }
</style>

Mobil için kod örnekleri

Mobilde ekran okuyucu odağı bir öğeye geldiğinde veya bir metin alanı klavye odağı aldığında, kullanıcı çift dokunmadan ya da bir düğmeye basmadan ekran değişmemelidir.

iOS (SwiftUI)

import SwiftUI

struct AdresSecimi: View {
    @State private var adres = ""
    @State private var haritaAcik = false
    @FocusState private var adresOdakta: Bool

    var body: some View {
        Form {
            TextField("Açık adres", text: $adres)
                .focused($adresOdakta)
            // Hatalı: odak gelince harita ekranı açılır
            // .onChange(of: adresOdakta) { _, odak in if odak { haritaAcik = true } }

            // Doğru: harita yalnızca açık bir eylemle açılır
            Button("Haritadan seç") { haritaAcik = true }
        }
        .sheet(isPresented: $haritaAcik) { HaritadanSecim() } // Kendi ekranınız
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged

@Composable
fun AdresSecimi(haritayiAc: () -> Unit) {
    var adres by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(
            value = adres,
            onValueChange = { adres = it },
            label = { Text("Açık adres") },
            // Hatalı: Modifier.onFocusChanged { if (it.isFocused) haritayiAc() }
            modifier = Modifier
        )
        // Doğru: ekran değişikliği açık bir düğmeyle başlar
        Button(onClick = haritayiAc) { Text("Haritadan seç") }
    }
}

Nasıl test edilir?

• Tab ile gezinin, hiçbir şeyi çalıştırmayın: Sayfadaki tüm öğeler arasında yalnızca Tab ve Shift+Tab ile ilerleyin. Enter veya Space'e basmadan sayfa değişiyor, pencere açılıyor ya da odak başka yere atlıyor mu?
• Ekran okuyucuyla keşfedin: Mobilde öğeler arasında kaydırarak gezinin, çift dokunmayın. Beklenmedik bir ekran değişikliği oluyor mu?
• Kodu inceleyin: focus, focusin, onFocusChange ve benzeri olay dinleyicilerinin ne yaptığını kontrol edin.
• Otomatik araçların sınırı: Otomatik araçlar bu kriteri değerlendiremez; odak olayının sonucunu yalnızca elle test belirleyebilir.

Sık yapılan hatalar

• Odakla açılan kampanya pencereleri: Belirli bir alana gelindiğinde tetiklenen pazarlama pencereleri.
• Odak gelince açılan tarih seçici diyalogları: Klavye kullanıcısının tarihi yazmasını engelleyen modal takvimler.
• Odak gelince yeni sekme açmak: Bağlantıya odaklanınca önizleme veya yeni pencere açılması.
• Salt okunur alanları atlatmak: Odağı başka alana zorla taşımak yerine öğeyi odak sırasından çıkarmak veya salt okunur bırakmak daha doğrudur.

Kaynaklar

• Understanding SC 3.2.1: On Focus (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Bağlam değişikliği, odak, öngörülebilirlik 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.