WCAG 3.2.2: Girdi Üzerine

Bu Kuralın Anlamı

WCAG 3.2.2 Girdi Üzerine (On Input), Anlaşılabilir ilkesinin bir parçasıdır ve 3.2 Öngörülebilir rehberi kapsamına girer. Herhangi bir kullanıcı arayüzü bileşeninin ayarını değiştirmenin, kullanıcıya bu davranışın gerçekleşeceği önceden bildirilmedikçe, kendiliğinden bağlam değişikliğine neden olmaması gerektiğini belirtir.

Bağlam değişikliği, bir web sayfasının içeriğinde, sayfanın tamamını aynı anda göremeyen kullanıcıları şaşırtabilecek büyük bir değişikliktir. WCAG spesifikasyonuna göre bağlam değişiklikleri şunları içerir: kullanıcı aracısının (tarayıcı) değişmesi, görünüm alanının (viewport) değişmesi, odağın değişmesi ve sayfanın anlamını önemli ölçüde değiştiren içerik değişiklikleri. Bir formun gönderilmesi, yeni bir pencerenin açılması veya başka bir sayfaya gitmek, bağlam değişikliğine örnektir. Sadece ek içeriğin gösterilmesi, örneğin açılan bir akordeon gibi, buna girmez.

Bu ölçüt özellikle bir arayüz bileşeninin ayarının değiştirilmesi durumuna uygulanır — örneğin bir radyo düğmesinin seçilmesi, bir onay kutusunun işaretlenmesi veya bir <select> açılır menüsünde bir seçeneğin seçilmesi — bir kontrolün etkinleştirilmesinden (bir düğmeye tıklamak gibi) farklı olarak. Bir eylem açık bir etkinleştirme adımı gerektiriyorsa (Enter’a basmak, Gönder’e tıklamak), genellikle bu ölçüt kapsamına girmez. Sorunlu desen, yalnızca bir değerin seçilmesiyle, herhangi bir uyarı olmadan anında gezinme veya önemli bir sayfa yeniden yüklemesinin tetiklenmesidir.

Geçer sayılan durumlar: Kullanıcı seçimlerini işlemek için bir gönder düğmesi kullanan bir form, bu seçimler açılır menüler veya onay kutuları içerse bile, bu ölçütü karşılar. Sayfayı yeniden yüklemeden veya odağı önemli ölçüde kaydırmadan aynı sayfadaki sonuçları filtreleyen bir açılır menü geçer. Kullanıcıları en baştan — örneğin “Bir dil seçmek sayfanın yeniden yüklenmesine neden olacaktır” gibi görünür bir notla — belirli bir girdinin bağlam değişikliğini tetikleyeceği konusunda uyaran bir sayfa da geçer.

Kalır sayılan durumlar: Bir seçenek seçildiği anda kullanıcıyı otomatik olarak yeni bir URL’ye yönlendiren bir ülke veya dil seçici kalır. Radyo düğmesi seçildiğinde, herhangi bir gönder düğmesi olmadan formu otomatik olarak gönderip sayfadan ayrılan bir form kalır. Seçim yapıldığında, herhangi bir uyarı olmaksızın klavye odağını sayfanın yeni bir bölgesine kaydıran bir otomatik tamamlama bileşeni de kalır.

Resmî istisnalar: WCAG spesifikasyonu, kullanıcı bileşeni kullanmadan önce davranış hakkında bilgilendirilmişse, otomatik bağlam değişikliğinin kabul edilebilir olduğunu belirtir. Bu bilgilendirmenin etkileşim gerçekleşmeden önce mevcut olması, sonrasında verilmemesi gerekir.

Neden Önemlidir

Beklenmedik bağlam değişiklikleri, web üzerindeki en şaşırtıcı deneyimlerden biridir ve etkisi, engelli kullanıcılar için dramatik biçimde artar. Bir sayfa aniden gezinme yapar, yeniden yüklenir veya odağı uyarı olmadan kaydırırsa, sayfanın tam görsel düzenini göremeyen kullanıcılar tamamen yönlerini kaybeder.

Ekran okuyucu kullanıcıları özellikle savunmasızdır. NVDA veya JAWS kullanan görme engelli bir kullanıcı bir açılır menüde seçenek seçtiğinde sayfa hemen yeniden yüklenir veya gezinirse, ekran okuyucu yeni sayfa bağlamını baştan duyurur. Kullanıcı nerede olduğunu, ne yaptığını kaybeder ve yönünü bulmak için tüm sayfayı yeniden dolaşmak zorunda kalır. Bu küçük bir rahatsızlık değildir — görevi bağımsız olarak tamamlamayı tamamen imkânsız hâle getirebilir.

Yalnızca klavye kullanan kullanıcılar, fare kullanamayan motor bozukluğu olan kişiler de dâhil, benzer bir sorunla karşılaşır. Bir formda Tab ve ok tuşlarıyla gezinirken, istemeden bir bağlam değişikliğini tetikleyebilirler. İnce motor kontrolü olmadan, istenmeyen bir sayfa gezinmesinden kurtulmak ciddi çaba gerektirebilir.

Bilişsel engeller sorunu daha da ağırlaştırır. Dikkat eksikliği, öğrenme güçlüğü veya hafıza bozukluğu olan kullanıcılar, ne olduğunu anlamak için öngörülebilir, istikrarlı arayüzlere güvenir. Ani bağlam değişiklikleri, oturum boyunca oluşturdukları zihinsel modeli bozar ve çoğu zaman yeniden başlamaya veya görevi bırakmaya zorlar.

Vestibüler bozukluğu olan kullanıcılar, özellikle değişiklik animasyon veya kaydırma konumu değişikliklerini içeriyorsa, sayfalar beklenmedik şekilde değiştiğinde fiziksel rahatsızlık veya baş dönmesi yaşayabilir.

Somut bir gerçek dünya senaryosu: Türkiye’de bir e-ticaret ödeme sayfasında, kullanıcının açılır menüden ilini seçtiğini düşünün. Bu seçim, kargo seçeneklerini güncellemek için sayfayı anında yeniden yüklüyorsa, ekran okuyucu kullanan bir kullanıcı kendini bir anda sayfanın en üstünde, ne olduğuna dair hiçbir işaret olmadan bulabilir. Nerede olduklarını bulmak için tüm form alanlarını yeniden dolaşmak zorunda kalırlar ve önceki girdilerinin korunup korunmadığını bilmezler. Bu tür sürtünmeler, kullanıcıların satın alma işlemini tamamen bırakmasına neden olabilir.

Kullanılabilirlik ve SEO açısından, öngörülebilir davranan sayfaların hemen çıkma oranları daha düşüktür. Kullanıcılar hayal kırıklığıyla sayfayı terk etme olasılığı daha azdır ve arama motoru tarayıcıları, beklenmedik yönlendirmeler tarama yollarına müdahale etmeden içeriği daha güvenilir şekilde dizine ekleyebilir.

İlgili Axe-core Kuralları

WCAG 3.2.2 Girdi Üzerine, manuel test gerektirir. axe-core gibi otomatik araçlar, bu ölçütün ihlallerini güvenilir şekilde tespit edemez; çünkü sorunlu davranış bağlamsaldır ve yalnızca belirli bir HTML özniteliğinin veya yapının varlığına/yokluğuna değil, bir etkileşimin arkasındaki niyete bağlıdır. Bir araç, bir <select> öğesinin bir onchange olay işleyicisine sahip olduğunu tespit edebilir, ancak bu işleyicinin bağlam değişikliğini tetikleyip tetiklemediğini, kullanıcıya bunun hakkında önceden bilgi verilip verilmediğini veya ortaya çıkan davranışın pratikte şaşırtıcı olup olmadığını belirleyemez.

• Manuel Test Gerekli — onchange Gezinme Desenleri: Otomatik tarayıcılar, JavaScript olay işleyicilerine (özellikle onchange) sahip <select>, <input type='radio'> ve <input type='checkbox'> öğelerini işaretleyebilir, ancak bu işleyicilerin bağlam değişikliğine neden olup olmadığını belirleyemez. Bir insan testçi, bu tür her kontrolle etkileşime geçmeli ve sayfanın, kullanıcıdan açık bir etkinleştirme adımı olmadan gezinip gezinmediğini, yeniden yüklenip yüklenmediğini, odağı dramatik biçimde farklı bir bölgeye kaydırıp kaydırmadığını veya yeni bir pencere açıp açmadığını gözlemlemelidir.
• Manuel Test Gerekli — Ön Uyarının Varlığı ve Yeterliliği: Bir bağlam değişikliği tespit edilse bile, otomatik bir araç, kullanıcıya kontrolle etkileşime geçmeden önce bu konuda yeterince uyarı verilip verilmediğini belirleyemez. Bir insan, herhangi bir ön bildirimin bileşenle karşılaşılmadan önce görünür olduğunu, açık bir dille yazıldığını ve gerçekleşecek davranışı gerçekten tanımladığını doğrulamalıdır.
• Manuel Test Gerekli — Girdi Sonrası Odak Yönetimi: Bazı ihlaller, doğrudan gezinme yerine, girdideki değişiklik üzerine odağın beklenmedik bir konuma taşınması şeklinde ortaya çıkar. Otomatik araçlar, onchange olaylarının tetiklediği odak hedeflerini güvenilir şekilde izleyemez ve ortaya çıkan odak konumunun şaşırtıcı bir bağlam değişikliği oluşturup oluşturmadığını doğrulayamaz.

Nasıl Test Edilir

1. Otomatik tarama temel çizgisi: Sayfada WCAG 3.2 kapsamındaki işaretlenmiş sorunları belirlemek için axe DevTools veya Lighthouse çalıştırın. 3.2.2’nin kendisi manuel test gerektirse de, axe başlangıç noktası sağlayabilecek ilgili sorunları (örneğin eksik etiketler veya odak yönetimi problemleri) ortaya çıkarabilir. Özellikle <select> açılır menüler, radyo grupları ve onay kutuları olmak üzere tüm form kontrollerini manuel takip için not edin.
2. Değişim işleyicisine sahip tüm girdi kontrollerini belirleyin: Tarayıcı Geliştirici Araçları’nda sayfanın JavaScript’ini inceleyin veya Olay Dinleyicileri panelini kullanarak onchange, oninput veya eşdeğer olay dinleyicisine sahip herhangi bir <select>, <input type='radio'>, <input type='checkbox'> veya özel bileşeni belirleyin.
3. Manuel klavye etkileşim testi: Yalnızca klavye kullanarak (gezinme için Tab, radyo/seçim seçenekleri için ok tuşları) belirlenen her kontrolle etkileşime geçin. Bir seçeneğin seçilmesinin sayfanın gezinmesine, yeniden yüklenmesine, yeni bir pencere açmasına veya odağı sayfanın önemli ölçüde farklı bir bölümüne taşımasına neden olup olmadığını gözlemleyin. Eğer evet ise, kontrolle karşılaşılmadan önce görünür bir uyarının gösterilip gösterilmediğini doğrulayın.
4. NVDA + Firefox testi: NVDA etkin durumdayken Firefox’u başlatın. NVDA’nın sanal imlecini (ok tuşları) kullanarak her form kontrolüne gidin ve ardından form modu (Enter veya Boşluk) ile etkileşime geçin. Açılır menülerde ve radyo gruplarında seçenekler seçin ve sayfa yüklemesi, gezinme veya büyük bir bağlam değişikliğini belirten beklenmedik duyuruları dinleyin. NVDA’nın yeni bir sayfa başlığı veya dramatik biçimde farklı bir bölge okuyup okumadığını not edin.
5. VoiceOver + Safari testi (macOS/iOS): VoiceOver’ı etkinleştirin ve VO+Sağ ok ile her kontrole gidin. Açılır menüler ve onay kutularıyla etkileşime geçin. Bir bağlam değişikliği gerçekleşirse, VoiceOver genellikle yeni sayfayı veya odak kaymasını duyurur. Kullanıcının önceden uyarılıp uyarılmadığını belirleyin.
6. JAWS + Chrome testi: JAWS’ı sanal imleç modunda kullanarak sayfada gezinin. Form kontrolleriyle etkileşime geçin ve JAWS’ın, bir gönder düğmesi etkinleştirilmeden hemen sonra bağlam değişikliğini (sayfa başlığı değişimi, yeni URL, okuma konumunun kayması) duyurup duyurmadığını izleyin.
7. Görsel gözlem testi: Yardımcı teknoloji kullanmayan gören kullanıcılar için, her açılır menü ve radyo grubunda seçenekler seçin ve sayfanın beklenmedik şekilde gezinip gezinmediğini veya yeniden yüklenip yüklenmediğini gözlemleyin. Eğer öyleyse, kontrol öncesinde görünür herhangi bir açıklama metninin bu davranış hakkında uyarıda bulunup bulunmadığını kontrol edin.

Nasıl Düzeltilir

Otomatik gönderim yapan select açılır menüsü — Hatalı

<!-- KÖTÜ: Bir ülke seçmek sayfayı anında yönlendiriyor -->
<label for='country'>Ülke Seçin</label>
<select id='country' name='country' onchange='window.location.href="/region/" + this.value'>
  <option value='tr'>Turkey</option>
  <option value='de'>Germany</option>
  <option value='us'>United States</option>
</select>

Otomatik gönderim yapan select açılır menüsü — Doğru

<!-- İYİ: Seçim, bir gönder düğmesiyle onaylanıyor; otomatik gezinme yok -->
<form action='/region/' method='get'>
  <label for='country'>Ülke Seçin</label>
  <select id='country' name='country'>
    <option value='tr'>Turkey</option>
    <option value='de'>Germany</option>
    <option value='us'>United States</option>
  </select>
  <!-- Açık bir gönder düğmesi, gezinmenin ne zaman olacağı üzerinde kullanıcıya kontrol verir -->
  <button type='submit'>Git</button>
</form>

Radyo düğmesi otomatik gönderim deseni — Hatalı

<!-- KÖTÜ: Bir ödeme yöntemi seçmek formu anında gönderiyor -->
<fieldset>
  <legend>Ödeme Yöntemi</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='this.form.submit()'>
    Kredi Kartı
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='this.form.submit()'>
    Banka Havalesi
  </label>
</fieldset>

Radyo düğmesi otomatik gönderim deseni — Doğru

<!-- İYİ: onchange gezinme yapmadan yalnızca UI durumunu güncelleyebilir; gönderim kullanıcı eylemi gerektirir -->
<fieldset>
  <legend>Ödeme Yöntemi</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='showPaymentDetails(this.value)'>
    Kredi Kartı
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='showPaymentDetails(this.value)'>
    Banka Havalesi
  </label>
</fieldset>
<!-- showPaymentDetails() ek alanları satır içinde gösterir — bağlam değişikliği yok -->
<div id='payment-details' aria-live='polite'></div>
<button type='submit'>Ödemeyi Onayla</button>

Ön uyarılı dil değiştirici — Doğru

<!-- KABUL EDİLEBİLİR: Kullanıcı, seçim yapmadan önce sayfanın yeniden yükleneceği konusunda uyarılıyor -->
<p id='lang-notice'>Bir dil seçmek sayfayı hemen yeniden yükleyecektir.</p>
<label for='lang-select'>Dil</label>
<select
  id='lang-select'
  name='lang'
  aria-describedby='lang-notice'
  onchange='window.location.href="/" + this.value + "/"'
>
  <option value='en'>English</option>
  <option value='tr'>Türkçe</option>
  <option value='de'>Deutsch</option>
</select>
<!-- aria-describedby, ekran okuyucu kullanıcıları için uyarıyı kontrole bağlar -->

Yaygın Hatalar

• Bir <select> öğesinin onchange özniteliğine doğrudan window.location.href atamaları eklemek ve bir gönder düğmesi olmadan, kullanıcı bir seçenek seçer seçmez anında sayfa gezinmesine neden olmak.
• Bir radyo düğmesinin onchange işleyicisi içinde this.form.submit() kullanmak; bu, kullanıcı seçimlerini gözden geçiremeden, bir radyo seçeneği seçildiği anda formun tamamını gönderir ve sayfadan ayrılmaya neden olur.
• Ön uyarıyı DOM’da kontrolün sonrasına yerleştirmek; böylece ekran okuyucu kullanıcıları ve klavye ile gezinme yapanlar, tetiklediği davranış hakkındaki uyarıyı duymadan veya okumadan önce kontrolle karşılaşır.
• Ön uyarıyı yalnızca araç ipucu (tooltip) veya yer tutucu metin olarak göstermek ve bunun yardımcı teknolojilere güvenilir şekilde iletilmemesi; bu da ekran okuyucu kullanıcılarını, girdilerinin ardından bir bağlam değişikliği olacağına dair hiçbir işaret olmadan bırakır.
• <div> ve <ul> öğeleri kullanarak özel açılır menü bileşenleri oluşturmak ve seçim üzerine JavaScript ile gezinme tetiklemek, ancak bunları 3.2.2 kapsamında incelenmesi gereken etkileşimli kontroller olarak tanımlamaya imkân verecek anlamsal yapıyı sağlamamak.
• Bir formdaki son alanda (örneğin bir PIN veya OTP girişi) gerekli karakter sayısına ulaşıldığında, kullanıcıya bunun olacağı bildirilmeden otomatik form gönderimi tetiklemek.
• Bir onay kutusunun işaretlenmesine yanıt olarak bir modal iletişim kutusu veya yeni tarayıcı penceresi açmak ve önceden herhangi bir uyarı vermemek — bu, kullanıcının görünüm alanını ve odağını önemli ölçüde kaydırdığı için bir bağlam değişikliğidir.
• Öngörülebilir sayfa içi içerik güncellemelerini bağlam değişiklikleriyle karıştırmak ve zaten kabul edilebilir olan etkileşimlerin (canlı arama filtresi gibi) etrafına gereksiz gönder düğmeleri eklemek; bu, arayüzü kalabalıklaştırabilir — ekipler, satır içi ve şaşırtıcı olmayan güncellemelerin bir gönderim adımı gerektirmediğini anlamalıdır.
• Yalnızca otomatik erişilebilirlik taramalarına güvenmek ve zorunlu manuel klavye ve ekran okuyucu testlerini yapmadan, hiçbir otomatik kural işaretlemediği için 3.2.2’yi geçmiş saymak.
• Bir sonuç listesinde sıralama veya filtreleme için kullanılan bir <select> öğesine bağlam değişikliğine neden olan bir onchange işleyicisi uygulamak ve bu seçimin AJAX güncellemesi yerine tam sayfa yeniden yüklemesine neden olması, ayrıca bu yeniden yüklemenin seçim üzerine gerçekleşeceği konusunda kullanıcıları uyarmamak.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye’nin 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanmış olup, WCAG 2.2’ye dayalı zorunlu web erişilebilirliği gereklilikleri getirmektedir. WCAG 3.2.2 Girdi Üzerine, genelge kapsamında asgari uyum düzeyini temsil eden Seviye A ölçütüdür — bu da uyumun isteğe bağlı değil, kapsamdaki tüm kuruluşlar için yasal olarak zorunlu olduğu anlamına gelir.

Genelge, iki kademeli bir uygulama takvimi tanımlar. Kamu kurumları — bakanlıklar, belediyeler, devlet üniversiteleri ve kamu kurumları dâhil — genelgenin yayımlanmasından itibaren bir yıl içinde Seviye A’ya tam uyum sağlamak zorundadır. Düzenleme kapsamındaki özel sektör kuruluşlarının uyum için iki yıllık bir süresi vardır.

Genelge kapsamında açıkça sayılan ve bu nedenle dijital hizmetlerinin WCAG 3.2.2 ile uyumlu olmasını sağlamak zorunda olan kuruluş türleri şunlardır: e-ticaret platformları, tüm idari kademelerdeki kamu kurumları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, lisanslı seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MEB) tarafından yetkilendirilmiş özel okullar.

Bu kuruluşlar için, WCAG 3.2.2 ihlali — örneğin bir bankacılık portalında seçim üzerine otomatik yönlendirme yapan bir dil seçici veya bir bölüm radyo düğmesi seçildiğinde otomatik olarak gönderilen bir hastane randevu formu — doğrudan düzenleyici uyumsuzluk anlamına gelir. Türkiye’de kayda değer bir engelli kullanıcı nüfusu olduğu ve kamu dijital hizmetlerinin giderek vatandaşların kamu hizmetlerine erişimi için birincil kanal hâline geldiği düşünüldüğünde, bu ölçütü görmezden gelmenin pratik sonuçları önemlidir.

Genelgeye tabi kuruluşlar, WCAG 3.2.2 testini QA sürecinde zorunlu bir denetim adımı olarak ele almalıdır. Otomatik araçlar bu ölçütün ihlallerini tespit edemediğinden, NVDA ve JAWS ile klavye etkileşimini, ekran okuyucu davranışını ve tüm onchange odaklı etkileşimlerin açık incelemesini kapsayan, eğitimli erişilebilirlik uzmanları tarafından yapılan manuel testler uyum sürecine dâhil edilmelidir. Test sonuçlarının ve (ön uyarılar mevcut olmak kaydıyla) kabul edilen istisnaların belgelenmesi, düzenleyici kurumlara gerekli özenin gösterildiğini kanıtlamak açısından tavsiye edilir.