Girdide

Kısaca

İnsanlar bir açılır listeyi değiştirir, bir kutuyu işaretler ya da bir alana yazarlar; sayfanın tepki vermesini beklemezler. Bir seçeneği seçmek anında başka bir sayfa yüklüyor ya da formu gönderiyorsa, klavyeyle gezenler ya da seçenekler arasında hâlâ gezinenler işlerini bitirmeden savrulur.

Bu kriter, herhangi bir kullanıcı arayüzü bileşeninin ayarını değiştirmenin, kullanıcı bileşeni kullanmadan önce bu davranıştan haberdar edilmedikçe, otomatik olarak bir bağlam değişikliğine yol açmamasını ister.

Neleri kapsar?

• Bağlam değişikliği nedir: Bağlam değişikliği, sayfanın tamamını göremeyen kullanıcıların yönünü şaşırtabilecek büyük bir değişikliktir: kullanıcı aracında, görünüm alanında, odakta ya da sayfanın anlamını değiştiren içerikte bir değişiklik.
• Ayar değiştirmek: Bir onay kutusunu işaretlemek, bir radyo düğmesi ya da liste öğesi seçmek ve bir metin alanına yazmak bir ayarı değiştirir. Bir bağlantıyı ya da düğmeyi etkinleştirmek ayar değiştirmek değildir.
• Etkinleştirme farklıdır: Bir formu gönderen ve gezinen ya da iletişim kutusu açan düğme etkinleştirmedir. Basılı düğme gibi bir durumu değiştiren düğme ise bir ayarı değiştirir.
• Önceden bilgi vermek: Bir ayar değişikliği bağlam değişikliğine yol açacaksa, kullanıcılara kontrole varmadan önce söyleyin (G13); örneğin "Dil seçmek sayfayı yeniden yükler".
• Gönder düğmesi: En güvenilir yol, değişikliği bir gönder düğmesinin (G80) ya da bir seçim listesinin yanındaki düğmenin (H84) arkasına koymaktır.
• İçerik değişiklikleri sorun değil: Bir listeyi yerinde güncellemek, bir seçime bağlı bir alanı göstermek ya da canlı toplam, odak taşınmıyor ve sayfanın anlamı değişmiyorsa bağlam değişikliği değildir.
• Kapsam dışı: Odak alındığında olan değişiklikler 3.2.1'dir. Hata işleme 3.3.1'dir.

Kimleri etkiler?

Bir listenin değerini ok tuşlarıyla gezerek değiştiren ve her değişikliği tetikleyen klavye kullanıcıları. Sayfanın değiştiğini göremeyen ekran okuyucu kullanıcıları. Ekranın yalnızca bir bölümünü gören az görenler. Öngörülebilir davranışa ihtiyaç duyan bilişsel engelli kişiler. Yanlışlıkla ayar değiştiren hareket engelli kişiler.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Girdide öngörülebilir davranış, "anlaşılabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 3.2.2'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 3.2.2 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Değişince gezinen bir select

Seçenekler arasında ok tuşlarıyla gezen klavye kullanıcısı ilk seçenekte başka yere gönderilir. Bir düğme ekleyin (H84).

<select onchange="location.href=this.value">
  <option value="/en">English</option>
  <option value="/tr">Türkçe</option>
</select>

<label for="lang">Dil</label>
<select id="lang">
  <option value="/en">English</option>
  <option value="/tr">Türkçe</option>
</select>
<button type="button" onclick="location.href=lang.value">Git</button>

2. Son alan doldurulunca gönderilen form

Uyarı olmadan otomatik gönderim hatadır (F36). Göndermeyi kullanıcıya bırakın.

lastField.addEventListener("input", () => form.submit());

<form>
  …
  <button type="submit">Gönder</button>
</form>

3. Pencere açan radyo düğmesi

Bir seçim değiştiğinde önceden uyarmadan yeni pencere açmak hatadır (F37).

<input type="radio" name="mirror" onchange="window.open(this.value)">

<input type="radio" name="mirror" id="m1" value="/dl/1"> <label for="m1">Yansı 1</label>
<button type="button">Seçili yansıdan indir</button>

4. Değişiklikten önce uyarın (G13)

Ayar bir değişikliği tetiklemek zorundaysa, bunu kontrolden önce söyleyin.

<select onchange="reloadInLanguage(this.value)">…</select>

<p id="note">Dil seçmek sayfayı yeniden yükler.</p>
<label for="lang">Dil</label>
<select id="lang" aria-describedby="note" onchange="reloadInLanguage(this.value)">…</select>

5. Bağlam değişikliği olmayan bir değişiklik

Bir listeyi odağı taşımadan yerinde filtrelemek, izin verilen bir içerik değişikliğidir.

<select onchange="location.href='/sonuclar?renk='+this.value">…</select>

<label for="color">Renk</label>
<select id="color">…</select>
<ul id="results" aria-live="polite">…</ul>
<script>
color.addEventListener("change", () => updateResultsInPlace(color.value));
</script>

6. Odağı taşıyan onay kutusu

Bir kutu işaretlendiğinde odağı başka yere taşımak kullanıcıların yönünü şaşırtır.

agree.addEventListener("change", () => submitBtn.focus());

<input type="checkbox" id="agree"> <label for="agree">Kabul ediyorum</label>
<button type="submit">Devam</button>

Mobil için kod örnekleri

Mobilde seçiciler, anahtarlar ve bölümlü kontroller çoğu zaman hemen gezinir. Ya açık bir eylemi bekleyin ya da kullanıcıyı önceden bilgilendirin.

iOS (SwiftUI)

import SwiftUI

struct LanguageSettings: View {
    @State private var language = "en"

    var body: some View {
        VStack {
            Picker("Dil", selection: $language) {
                Text("English").tag("en")
                Text("Türkçe").tag("tr")
            }
            // Değişiklik, bir seçeneği seçmekle değil, açık bir eylemle uygulanır
            Button("Uygula") { applyLanguage(language) }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Row
import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun NotificationsSetting(onApplied: (Boolean) -> Unit) {
    var enabled by remember { mutableStateOf(false) }
    Row {
        Text("E-posta bildirimleri")
        // Anahtar yalnızca ayarı değiştirir; gezinmez
        Switch(checked = enabled, onCheckedChange = { enabled = it })
    }
    Button(onClick = { onApplied(enabled) }) { Text("Kaydet") }

    // Kaçının: onCheckedChange = { startActivity(...) }
}

Nasıl test edilir?

• Her kontrolü değiştirin: Her seçim listesinin, radyo düğmesinin, onay kutusunun ve alanın değerini değiştirin. Kendiliğinden bir şey açılıyor, gezinti yapılıyor ya da gönderiliyor mu?
• Klavyeyi kullanın: Bir seçim listesinde ok tuşlarıyla gezin. Bir düğmeye basmadan sayfa tepki veriyor mu?
• Uyarıyı arayın: Bir değişiklik bağlam değişikliğine yol açıyorsa, kullanıcı kontrole varmadan önce bilgilendiriliyor mu?
• Kodu arayın: submit(), window.open(), location ya da focus() çağıran onchange, change ve input işleyicilerini arayın.
• İstisnaları kontrol edin: İçerik, odak yerinde kalarak yerinde mi güncelleniyor?
• Formları kontrol edin: Bağlamı değiştiren her formun bir gönder düğmesi var mı?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar bir değişiklik işleyicisinin ne yaptığını söyleyemez. Kontrolleri bir kişi kullanmalıdır.

Sık yapılan hatalar

• Select değişince gezinmek: Klasik hata ve ok tuşu kullanıcıları için bir klavye tuzağı.
• Otomatik form gönderimi: Form, son alan doldurulur doldurulmaz gönderilir (F36).
• Değişimde yeni pencereler: Pencere açan bir radyo düğmesi ya da onay kutusu (F37).
• Yeniden yükleyen dil seçiciler: Düğme de uyarı da yok.
• Çok geç gelen uyarılar: Bilgi, kontrol kullanılmadan önce erişilebilir olmalıdır.
• Değişimde odağı taşımak: Bir değer değişince başka bir kontrole atlamak.
• Ayarı etkinleştirmeyle karıştırmak: Düğme etkinleştirmedir, anahtar ayardır.
• Özel kontrolleri unutmak: Özel açılır listeler ve kaydırıcılar çoğu zaman her değişikliğe tepki verir.

Kaynaklar

• Understanding SC 3.2.2: On Input (W3C), İngilizce, yeni sekmede açılır
• G80: Providing a submit button to initiate a change of context (W3C), İngilizce, yeni sekmede açılır
• H84: Using a button with a select element to perform an action (W3C), İngilizce, yeni sekmede açılır
• G13: Describing what will happen before a change to a form control that causes a change of context to occur is made (W3C), İngilizce, yeni sekmede açılır
• F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value (W3C), İngilizce, yeni sekmede açılır
• F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.