Girdi Üzerine

Kısaca

Bir açılır listede seçenekler arasında klavyeyle gezinen kullanıcı, her yön tuşuna bastığında aslında değeri değiştirir. Liste her değişiklikte sayfayı başka bir yere götürüyorsa, kullanıcı istediği seçeneğe hiç ulaşamaz. Benzer şekilde bir radyo düğmesini seçmek formu kendiliğinden gönderiyorsa, kullanıcı seçimini gözden geçirme fırsatını kaybeder.

Bu kriter, kullanıcı girdisinin kendiliğinden bağlam değişikliğine yol açmamasını ister. Değişiklik ya "Devam", "Gönder" gibi açık bir düğmeyle başlatılmalı ya da kullanıcı bu davranış hakkında önceden açıkça bilgilendirilmelidir.

Neleri kapsar?

• Açılır listeler: Seçim yapılınca kendiliğinden yeni sayfaya geçen listeler.
• Radyo düğmeleri ve onay kutuları: İşaretlenince formu gönderen veya pencere açan seçenekler.
• Metin alanları: Belirli bir uzunluğa ulaşınca formu gönderen veya odağı başka alana taşıyan alanlar.
• Önceden bilgilendirme: Kaçınılmaz bir otomatik davranış varsa bunun bileşenden önce açıkça belirtilmesi.
• Kapsam dışı: Seçime göre aynı sayfada yeni alanların görünmesi gibi, kullanıcıyı yerinden etmeyen içerik değişiklikleri bağlam değişikliği sayılmaz. Yalnızca odaklanmanın etkisi bir önceki kriterin (Odaklanma Üzerine) konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör kullanıcılar ve yalnızca klavye kullanan kişiler, açılır listelerde seçenekleri yön tuşlarıyla tek tek gezerek inceler; otomatik yönlendirme bu incelemeyi imkânsız kılar. Bilişsel engeli olan kullanıcılar beklenmedik sayfa değişikliklerinde yönlerini kaybeder. Motor engelli kişiler yanlış seçenekleri daha sık seçebileceği için seçimi onaylamadan önce düzeltme imkânına ihtiyaç duyar.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 107–108 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. Seçimle yönlendiren açılır liste

<label for="il">İl seçin</label>
<select id="il" onchange="location.href='/il/' + this.value">
  <option value="adana">Adana</option>
  <option value="ankara">Ankara</option>
  …
</select>

<form action="/il-sec" method="get">
  <label for="il">İl seçin</label>
  <select id="il" name="il">
    <option value="adana">Adana</option>
    <option value="ankara">Ankara</option>
    …
  </select>
  <button type="submit">İl sayfasına git</button>
</form>

2. Seçimle gönderilen form

<fieldset>
  <legend>Bildirim tercihi</legend>
  <input type="radio" id="sms" name="bildirim"
         onchange="this.form.submit()">
  <label for="sms">SMS</label>
  …
</fieldset>

<fieldset>
  <legend>Bildirim tercihi</legend>
  <input type="radio" id="sms" name="bildirim" value="sms">
  <label for="sms">SMS</label>
  …
</fieldset>
<button type="submit">Tercihi kaydet</button>

3. Alanlar arasında otomatik geçiş

Doğrulama kodu gibi parçalı alanlarda, bir alan dolunca odağı kendiliğinden sonrakine taşımak kullanıcıyı şaşırtabilir. En sade çözüm tek bir alan kullanmaktır; otomatik geçiş korunacaksa bu davranış alandan önce açıkça belirtilmelidir.

<input maxlength="1" oninput="this.nextElementSibling.focus()">
<input maxlength="1" oninput="this.nextElementSibling.focus()">
…

<label for="kod">Doğrulama kodu</label>
<input id="kod" inputmode="numeric" maxlength="6"
       autocomplete="one-time-code"
       aria-describedby="kod-ipucu">
<p id="kod-ipucu">Cep telefonunuza gelen 6 haneli kod</p>

4. Önceden bilgilendirme

Otomatik davranıştan vazgeçilemiyorsa kullanıcı bileşene ulaşmadan önce bunu öğrenmelidir. Açıklama bileşenle aria-describedby ile ilişkilendirilebilir.

<p id="dil-uyari">
  Dil seçtiğinizde sayfa seçtiğiniz dilde yeniden yüklenir.
</p>
<label for="dil">Site dili</label>
<select id="dil" aria-describedby="dil-uyari"
        onchange="diliDegistir(this.value)">
  <option value="tr" selected>Türkçe</option>
  <option value="en">English</option>
</select>

Not: Bu yöntem kriteri karşılasa da klavye kullanıcısının seçenekler arasında gezinirken sayfanın yeniden yüklenmesi sorununu tamamen çözmez. Mümkünse açık bir düğme tercih edin.

5. Kabul edilebilir: aynı sayfada içerik değişimi

Seçime bağlı olarak formda yeni alanların görünmesi bağlam değişikliği değildir. Yeni alanlar, seçimi yapan bileşenden hemen sonra gelmelidir.

<fieldset>
  <legend>Başvuru türü</legend>
  <input type="radio" id="bireysel" name="tur" value="bireysel" checked>
  <label for="bireysel">Bireysel</label>
  <input type="radio" id="kurumsal" name="tur" value="kurumsal"
         aria-controls="kurum-alanlari">
  <label for="kurumsal">Kurumsal</label>
</fieldset>
<div id="kurum-alanlari" hidden>
  <label for="vkn">Vergi kimlik numarası</label>
  <input id="vkn" inputmode="numeric">
</div>

<script>
  document.querySelectorAll('[name="tur"]').forEach((secenek) => {
    secenek.addEventListener("change", () => {
      document.getElementById("kurum-alanlari").hidden =
        document.getElementById("kurumsal").checked === false;
    });
  });
</script>

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct IlSecimi: View {
    @State private var il = "Ankara"
    @State private var ilEkraninaGit = false
    let iller = ["Adana", "Ankara", "İstanbul", "İzmir"]

    var body: some View {
        Form {
            Picker("İl", selection: $il) {
                ForEach(iller, id: \.self) { Text($0) }
            }
            // Hatalı: .onChange(of: il) { _, _ in ilEkraninaGit = true }

            // Doğru: ekran değişikliği açık bir eylemle başlar
            Button("İl sayfasına git") { ilEkraninaGit = true }
        }
        .navigationDestination(isPresented: $ilEkraninaGit) {
            IlSayfasi(il: il) // Kendi ekranınız
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier

@Composable
fun BildirimTercihi(kaydet: (String) -> Unit) {
    var secim by remember { mutableStateOf("SMS") }

    Column {
        Column(Modifier.selectableGroup()) {
            listOf("SMS", "E-posta").forEach { secenek ->
                Row(
                    Modifier.selectable(
                        selected = secim == secenek,
                        // Hatalı: onClick = { secim = secenek; kaydet(secenek) }
                        onClick = { secim = secenek }
                    )
                ) {
                    RadioButton(selected = secim == secenek, onClick = null)
                    Text(secenek)
                }
            }
        }
        // Doğru: kaydetme açık bir düğmeyle yapılır
        Button(onClick = { kaydet(secim) }) { Text("Tercihi kaydet") }
    }
}

Nasıl test edilir?

• Açılır listelerde klavyeyle gezinin: Listeye odaklanıp yön tuşlarıyla seçenekleri değiştirin. Sayfa her değişiklikte yenileniyor veya başka yere gidiyor mu?
• Seçenekleri işaretleyin: Radyo düğmelerini ve onay kutularını işaretleyin. Form kendiliğinden gönderiliyor veya pencere açılıyor mu?
• Alanları doldurun: Metin alanlarına veri girin. Belirli bir uzunluğa ulaşınca odak kendiliğinden taşınıyor veya form gönderiliyor mu? Taşınıyorsa bu önceden belirtilmiş mi?
• Otomatik araçların sınırı: Otomatik araçlar onchange içinde yönlendirme yapan bazı basit kalıpları işaretleyebilir. Ancak girdinin sonucunu ve önceden bilgilendirme yapılıp yapılmadığını değerlendiremez; bu kriter elle test edilmelidir.

Sık yapılan hatalar

• "Hızlı bağlantılar" açılır listesi: Kurum sitelerinde sık görülen, seçim yapılır yapılmaz yönlendiren listeler.
• Sıralama ve filtre listelerinde sayfa yenileme: "Sırala" listesinden seçim yapınca sayfanın yeniden yüklenmesi ve odağın kaybolması.
• Doğrulama kodu alanlarında otomatik gönderim: Son hane girildiğinde formun kullanıcı onayı olmadan gönderilmesi.
• Bilgilendirmeyi bileşenden sonra koymak: Uyarının ancak seçim yapıldıktan sonra fark edilecek bir yerde olması.

Kaynaklar

• Understanding SC 3.2.2: On Input (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, kullanıcı girdisi, ö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.