ADA ve odakta sürpriz olmaması

Bir alana gelmek bir komut değildir

Klavye ve anahtar kullanıcıları sayfada Tab tuşuyla gezinir. Ekran okuyucu kullanıcıları da öyle yapar; fare kullanıcıları ise bir alana tıklayarak odak verir. Bütün bu durumlarda odak almak yalnızca "buradayım" demektir. WCAG 2.1, 3.2.1 başarı ölçütü, herhangi bir kullanıcı arayüzü bileşeni odak aldığında bağlam değişikliği başlatmamasını ister: yeni pencere yok, form gönderimi yok, odağın başka bir kontrole atlaması yok, yeni sayfaya gitme yok.

Bir kontrolü etkinleştirmek, örneğin düğmede Enter’a basmak, bağlamı meşru biçimde değiştirebilir. Bu başka kurallarla ilgilidir. Bu ölçüt yalnızca varış anıyla ilgilidir. Bağlamı değiştirmeden beliren içerik (araç ipucu, açılan menü, satır içi ipucu), odak da taşınmadıkça ihlal değildir.

Bağlam değişikliği sayılanlar

• Yeni pencere veya sekme açmak.
• Bir formu göndermek.
• Klavye odağını kullanıcının seçtiğinden farklı bir bileşene taşımak.
• Ana içeriği başka bir sayfa sayılacak biçimde değiştirmek ya da görünümü yönelimi bozacak şekilde değiştirmek.

Kamu sitelerinin takıldığı yerler (ADA açısı)

Sık görülen örüntü, formları hızlandırmak için eklenen kolaylıklardır: odak alır almaz tam ekran bir katman açan arama kutusu, yardım penceresi açan bir posta kodu alanı ya da odak alır almaz odağı gün alanına iten bir ay alanı. Mahkeme e-başvurusunda ya da ruhsat formunda Tab ile ilerleyen kullanıcı için bunların her biri yolculuğu ele geçirir. Kural mobil uygulamadaki alanlar arası atlama için de aynen geçerlidir. İlgili: mobil uygulamalar ve Title II kuralı.

Web kodu: arama, yardım pencereleri, alan atlamaları, menüler

Toplu taşıma planlayıcıda arama katmanı

<input id="yolculuk-arama" onfocus="tamEkranAramaAc()">

<input id="yolculuk-arama" aria-label="Durak ara">
<button type="button" id="aramayi-ac">Tam ekran aramayı aç</button>
<script>
  document.getElementById("aramayi-ac")
    .addEventListener("click", tamEkranAramaAc);
</script>

Odakta yeni pencerede açılan yardım

<input id="ruhsat-no" onfocus="window.open('/yardim/ruhsat-numarasi')">

<label for="ruhsat-no">Ruhsat numarası</label>
<input id="ruhsat-no" aria-describedby="ruhsat-yardim">
<p id="ruhsat-yardim">Ruhsat kartının sağ üst köşesinde yazılıdır.
  <a href="/yardim/ruhsat-numarasi" target="_blank" rel="noopener">Daha fazla yardım (yeni sekmede açılır)</a>
</p>

Odağı başka alana iten alan

ay.addEventListener("focus", () => gun.focus());

<!-- Alanlar arasında kullanıcı kendisi geçsin -->
<label for="ay">Ay</label><input id="ay" inputmode="numeric">
<label for="gun">Gün</label><input id="gun" inputmode="numeric">
<label for="yil">Yıl</label><input id="yil" inputmode="numeric">

Mobil kod: SwiftUI ve Jetpack Compose

// SwiftUI
@FocusState private var odak: Alan?
...
.onChange(of: odak) { yeni in
  if yeni == .adres { tamEkranAramaGoster = true }
}

// SwiftUI
TextField("Adres", text: $adres)
Button("Tam ekran aramayı aç") { tamEkranAramaGoster = true }

// Jetpack Compose
OutlinedTextField(
  value = sorgu, onValueChange = { sorgu = it },
  modifier = Modifier.onFocusChanged {
    if (it.isFocused) navController.navigate("arama")
  }
)

// Jetpack Compose
OutlinedTextField(value = sorgu, onValueChange = { sorgu = it })
TextButton(onClick = { navController.navigate("arama") }) {
  Text("Tam ekran aramayı aç")
}

Önce klavyeyle test turu

1. Yalnızca Tab tuşuyla bir sayfadaki her form ve menüde gezinin. Enter ya da Boşluk’a basmadan açılan, atlayan veya sayfa değiştiren bir şey olup olmadığına bakın.
2. Aynısını ekran okuyucuyla yapın; programatik odakta tetiklenen işleyicileri ortaya çıkarabilir.
3. Fareyle metin alanlarına tıklayın ve katman ya da yeni pencere açılıp açılmadığını izleyin.
4. Kodda onfocus, addEventListener("focus", focusin ve yerel kodda gezinen ya da odağı taşıyan odak değişimi geri çağrılarını arayın.
5. Araçlar: statik denetimler satır içi odak işleyicilerini işaretler ama bağlamı değiştirip değiştirmediklerine karar veremez. Elle bir tur planlayın.

Tuzaklar

• Üzerine gelmeyi ve odağı aynı olay saymak. Alt menüyü odakta açmak ancak odağı taşımıyor ve sayfayı değiştirmiyorsa sorun değildir.
• Başka yerdeki odağa yanıt olarak odağı otomatik bir iletişim kutusuna taşımak.
• Başka bir alan odak alır almaz odağı "yardımcı" bir alana taşımak. (Karakter yazılınca otomatik ilerlemek girdide çalışan bir davranıştır, 3.2.2 kapsamındadır.)
• Bir alan odak alır almaz odağı başka bir kontrole yönlendirmek; örneğin bir sihirbaz adımını başlatmak.

Yayına almadan önce

• Her sayfada Tab ile gezinmek beklenmedik şekilde hiçbir şeyi açmıyor, göndermiyor, gezdirmiyor veya odağı taşımıyor.
• Bir yere atlayan her kısayolun açık bir düğmesi var.
• Yardım ve ek bilgi yerinde ya da kullanıcının izlemeyi seçtiği bir bağlantıyla beliriyor.

Kaynaklar

• Understanding SC 3.2.1: On Focus (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.