ADA ve yanlış dokunuşu iptal etme

Yanlış dokunuşlar ve bırakma anının önemi

Herkes parmağını yanlış yere koyabilir. Tremoru, kısıtlı el becerisi veya zayıf hedefleme yeteneği olanlar bunu çok daha sık yaşar. WCAG 2.1, 2.5.2 başarı ölçütü, tek işaretçiyle çalışan işlevler için şunlardan en az birinin doğru olmasını ister:

• Aşağı olayı yok: işaretçi aşağı olayı (fare düğmesine basma, parmakla dokunma) işlevin hiçbir bölümünü çalıştırmaz.
• İptal veya geri alma: işlev yukarı olayında (bırakırken) tamamlanır; kullanıcı tamamlanmadan önce iptal edebilir ya da sonrasında geri alabilir.
• Yukarı olayıyla geri çevirme: yukarı olayı, aşağı olayının yaptığı her şeyi geri çevirir.
• Zorunlu: aşağı olayında tamamlamak zorunludur; ekrandaki piyano tuşu gibi. Klavye veya tuş takımı basışını taklit etmek zorunlu sayılır.

En güvenilir yol birincisidir: işlev bırakıldığında çalışsın; yerel click ve düğme etkinleştirmesi zaten böyle davranır. Kullanıcı bırakmadan önce işaretçiyi hedeften kaydırabilir ve hiçbir şey olmaz.

ADA açısından: ödemeler, başvurular ve silme işlemleri

Bir kamu sitesindeki en riskli kontroller geri alınamayanlardır: fatura sayfasındaki Şimdi öde, mahkeme e-başvurusundaki Gönder, ilçe sağlık randevusundaki Randevuyu iptal et. Bunlar dokunma anında çalışırsa kaçan bir dokunuş gerçek bir işleme dönüşür. Title II kuralı, kamu kurumunun sağladığı web içeriğine ve mobil uygulamalara WCAG 2.1’i uygular; bu yüzden bir düğmenin basışa nasıl tepki verdiği de test edilen konulardandır. İlgili: yaygın engeller.

Web örnekleri: ödeme, başvuru, sürükle-bırak, silme

Su faturası ödeme düğmesi

<div role="button" tabindex="0" onpointerdown="faturaOde()">
  84,20 TL öde
</div>

<button type="button" id="fatura-ode">84,20 TL öde</button>
<script>
  document.getElementById("fatura-ode")
    .addEventListener("click", faturaOde);   // bırakınca çalışır
</script>

Mahkeme e-başvurusunda pointerdown ile gönderme

basvuruGonder.addEventListener("pointerdown", () => {
  basvuruyuIlet(dosyaNo);
});

basvuruGonder.addEventListener("click", () => {
  basvuruyuIlet(dosyaNo);
});

Okulu tercih listesine sürükleme

document.addEventListener("pointerup", e => {
  tercihiBirak(e.target);     // bırakılan yere her zaman işler
});

let surukleniyor = false;
document.addEventListener("keydown", e => {
  if (e.key === "Escape" && surukleniyor) { surukleVazgec(); surukleniyor = false; }
});
document.addEventListener("pointerup", e => {
  if (!surukleniyor) return;
  if (!gecerliAlanMi(e.target)) { surukleVazgec(); return; } // dışarıda bırakıldı: iptal
  tercihiBirak(e.target);
  geriAlGoster("2. tercihe taşındı", sonTasimayiGeriAl);     // geri alma öner
  surukleniyor = false;
});

Mobil örnekler: SwiftUI ve Jetpack Compose

SwiftUI Button ve Compose clickable ya da Button zaten kontrolün içinde bırakınca çalışır. Sorun, geliştiriciler kendi dokunma işlemesini yazınca başlar.

// SwiftUI
Text("84,20 TL öde")
  .gesture(DragGesture(minimumDistance: 0)
    .onChanged { _ in faturaOde() })   // ilk dokunuşta çalışır

// SwiftUI
Button("84,20 TL öde") {
  faturaOde()                          // kontrolün içinde bırakınca çalışır
}

// Jetpack Compose
Box(Modifier.pointerInput(Unit) {
  detectTapGestures(onPress = { faturaOde() })   // basınca çalışır
}) { Text("84,20 TL öde") }

// Jetpack Compose
Button(onClick = { faturaOde() }) {          // bırakınca çalışır
  Text("84,20 TL öde")
}

Önce elle kontrol, sonra araçlar

1. Her kontrole basılı tutun ve bırakmadan önce ne olduğuna bakın. Bir şey olmuşsa (sayfa değişti, ödeme başladı, öğe silindi) bu bir aşağı olayı eylemidir.
2. Basın, kontrolün dışına kaydırın ve bırakın. Eylem çalışmamalıdır.
3. Bir öğeyi sürükleyin, sonra Escape’e basın veya hedefin dışında bırakın. Öğe yerine dönmeli ya da sormalıdır.
4. Kodda iş işlevlerini çağıran mousedown, touchstart, pointerdown ve onPress işleyicilerini arayın. Her sonucun bir gerekçesi olmalıdır.
5. Otomatik denetleyiciler bunu nadiren sınar. En riskli beş altı kontrol için elle bir tur planlayın.

Tipik hatalar

• Daha çevik hissettirsin diye mousedown veya pointerdown kullanmak.
• Geri almayı yalnızca bazı eylemler için sunmak: bırakınca işleyen ve geri dönüşü olmayan bir kontrol varsa onu bu sayfadaki diğer seçeneklerle karşılaştırın.
• Onay iletişim kutusunu tek çözüm saymak; kutudaki düğme de dokunma anında çalışabilir.
• Yalnızca daha hızlı olan bir işlevi zorunlu saymak. Özel bir ekran tuş takımında yazmak gerçek bir istisna olabilir; Öde düğmesi olamaz.

Yayına almadan önce

• Düğmeler ve bağlantılar bırakınca çalışıyor (yerel click veya eşdeğeri).
• Sürükle-bırak iptal edilebiliyor ya da sonucu geri alınabiliyor.
• Aşağı olayında çalışan her eylem zorunlu olarak belgelenmiş.

Kaynaklar

• Understanding SC 2.5.2: Pointer Cancellation (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.