ADA ve değişince eylem yapan kontroller

Bir ayarı değiştirmek sizi başka yere götürmemeli

Listeden seçenek seçmek, kutuyu işaretlemek ya da alana yazmak birer ayar değişikliğidir. WCAG 2.1, 3.2.2 başarı ölçütü, herhangi bir kullanıcı arayüzü bileşeninin ayarını değiştirmenin otomatik olarak bağlam değişikliğine (yeni sayfa, yeni pencere, gönderilen form, taşınan odak) yol açmamasını ister; kullanıcıya bileşeni kullanmadan önce bu davranış anlatılmışsa istisnadır.

Bu, ekranın tamamını aynı anda göremeyenleri korur: ekran okuyucu kullananlar, büyüteç kullananlar ve öngörülebilir sonuçlara ihtiyaç duyan bilişsel engelliler. Klavye kullanıcılarını da korur: bazı tarayıcılarda seçim listesinde ok tuşlarıyla gezmek her seçenekte bir değişim olayı tetikler; bu yüzden kendiliğinden gezinen bir seçim listesi sonraki seçenekleri ulaşılamaz kılabilir.

Kapsam dışı olanlar

• Bir formu gönderen ya da odağı taşıyan bağlantı ve düğmeler ayar değişikliği değil etkinleştirmedir; bu ölçüt onları yönetmez.
• Bağlamı değiştirmeyen içerik değişiklikleri, örneğin açılan menü, sekme paneli veya aynı sayfada yerinde yenilenen sonuçlar, bu ölçütü ihlal etmez.

Kamu formları ve ADA açısı

Kamu sayfaları kısayolları sever: açılır listeden sağlık merkezi seçince sayfa o merkeze atlar, "Hatırlatma gönderilsin" kutusunu işaretleyince form gönderilir, posta kodunun beşinci hanesini girince sayfa yenilenir. Böyle bir listede Aşağı oka basan klavye kullanıcısı sonraki seçeneğin sayfasına gidebilir ve diğerlerine hiç ulaşamayabilir. DOJ’un web erişilebilirliği rehberi, erişilemeyen formları yaygın engeller arasında sayar; bkz. yaygın engeller.

Web kodu: konum seçiciler, otomatik gönderme, onay kutuları

Sağlık merkezi seçim listesi

<select onchange="location.href = this.value">
  <option value="/merkezler/kuzey">Kuzey merkezi</option>
  <option value="/merkezler/guney">Güney merkezi</option>
</select>

<label for="merkez">Sağlık merkezi</label>
<select id="merkez" name="merkez">
  <option value="/merkezler/kuzey">Kuzey merkezi</option>
  <option value="/merkezler/guney">Güney merkezi</option>
</select>
<button type="button" id="merkezi-goster">Merkezi göster</button>
<script>
  document.getElementById("merkezi-goster").onclick =
    () => location.href = document.getElementById("merkez").value;
</script>

Kendiliğinden gönderilen posta kodu

posta.addEventListener("input", () => {
  if (posta.value.length === 5) form.submit();
});

<label for="posta">Posta kodu</label>
<input id="posta" name="posta" inputmode="numeric" autocomplete="postal-code">
<button type="submit">Ofisleri bul</button>

Önceden duyurulan, sayfayı yenileyen değişiklik

<select name="donem" onchange="this.form.submit()">
  <option>Aylık</option><option>Üç aylık</option>
</select>

<p id="donem-notu">Bunu değiştirmek sayfayı yeni toplamlarla yeniler.</p>
<label for="donem">Fatura dönemi</label>
<!-- Önceden bildirim bunu mümkün kılar; ok tuşlarıyla gezen klavye
     kullanıcıları için düğme yine de daha güvenlidir. -->
<select id="donem" name="donem" aria-describedby="donem-notu"
        onchange="this.form.submit()">
  <option>Aylık</option><option>Üç aylık</option>
</select>

Mobil kod: SwiftUI ve Jetpack Compose

// SwiftUI
Picker("Sağlık merkezi", selection: $merkez) {
  ForEach(merkezler) { Text($0.ad).tag($0) }
}
.onChange(of: merkez) { _ in merkezeGit(merkez) }

// SwiftUI
Picker("Sağlık merkezi", selection: $merkez) {
  ForEach(merkezler) { Text($0.ad).tag($0) }
}
Button("Merkezi göster") { merkezeGit(merkez) }

// Jetpack Compose
Checkbox(
  checked = hatirlat,
  onCheckedChange = { hatirlat = it; tercihleriGonder() }  // gönderiyor veya gezdiriyorsa ihlaldir
)

// Jetpack Compose
Row(verticalAlignment = Alignment.CenterVertically) {
  Checkbox(checked = hatirlat, onCheckedChange = { hatirlat = it })
  Text("Bana hatırlatma gönderin")
}
Button(onClick = { tercihleriGonder() }) { Text("Tercihleri kaydet") }

Kendiliğinden eylem yapan kontroller için test turu

1. Yalnızca klavye kullanın: her seçim listesine, radyo grubuna, onay kutusuna ve metin alanına Tab ile gidin ve değerini değiştirin. Gezinen, gönderen, pencere açan veya odağı taşıyan her şeyi not edin.
2. Seçim listelerinde fareyle değil ok tuşlarıyla gezin. Tarayıcılar farklı davrandığından hedef kitlenizin kullandıklarını test edin.
3. Kontrolden önce, ne olacağını söyleyen görünür bir yönerge olup olmadığına bakın. Davranış baştan duyuruluyorsa serbesttir.
4. Kod araması: submit, location veya window.open çağıran onchange, oninput, change ve input dinleyicileri.
5. Araçlar niyeti anlamaz. Bir denetleyici işleyiciyi bulabilir ama bağlamı değiştirip değiştirmediğine bir insan karar verir.

Bilinen tuzaklar

• Alanın altındaki küçük gri bir satırı "önceden bildirim" saymak.
• Biçim "bilindiği" için son karakterde otomatik göndermek.
• Tüm sayfayı yeniden kurup odağı en üste sıfırlayan filtreleme.
• Seçilince açılır pencere çıkaran radyo düğmeleri.
• Bölünmüş alanlar (tarih, telefon, kart numarası) arasında belirli sayıda karakterden sonra odağı otomatik ilerletmek.

Yayına almadan önce

• Yeni sayfaya, pencereye veya gönderime götüren her kontrol açık bir düğme ya da bağlantıyla etkinleştiriliyor.
• Bir ayarın bağlamı değiştirdiği yerlerde kullanıcılara kontrolden önce söyleniyor.
• Sayfa içi güncellemeler odağı kullanıcının bıraktığı yerde tutuyor.

Kaynaklar

• Understanding SC 3.2.2: On Input (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.