ADA ve kaydırma, sıkıştırma hareketleri

Kaydırma ve sıkıştırma hareketlerinden ne bekleniyor?

Çok noktalı hareket iki veya daha fazla parmakla aynı anda yapılır; iki parmakla yakınlaştırma gibi. Yol temelli hareket ise işaretçinin izlediği rotaya bağlıdır; neredeyse düz bir çizgide yapılması gereken kaydırma ya da haritada çizilen bir halka gibi. WCAG 2.1, 2.5.1 başarı ölçütüne göre bu hareketlerle yapılabilen her şey, yol temelli hareket gerektirmeyen tek bir işaretçiyle (tek parmak, fare, kalem) de yapılabilmelidir; örneğin dokunma, tıklama ya da bir düğmeyle.

Yalnızca klavye desteği bu ölçütü karşılamaz. Klavye kullanamayan ama dokunabilen ya da tıklayabilen insanlar vardır; bu yüzden tek işaretçili alternatif işaretçiyle çalışan, tercihen görünür bir kontrol olmalıdır. Hareket zorunluysa (imza gibi) kalabilir. Tarayıcının, işletim sisteminin veya yardımcı teknolojinin ayırdığı hareketler kapsam dışıdır.

Alternatif yoksa kimler takılır?

• Baş işaretçisi, ağızlık çubuğu veya göz izleme kullananlar; bunlar aynı anda tek noktayı gösterebilir.
• Tremoru olan ya da ince motor kontrolü sınırlı olanlar; düz bir kaydırma veya sabit iki parmak hareketi onlar için güvenilir değildir.
• Telefonu tek elle tutanlar ya da tekerlekli sandalyeye monte tablet kullananlar.
• Bilişsel engeli olanlar; etiketli bir düğmeyi gizli bir harekete göre daha kolay bulurlar.

Kamu hizmeti sitelerinde sık görülen sorunlar

Belediye ve kurum siteleri çoğu zaman tüketici ürünlerinden gelen bileşenleri olduğu gibi kullanır: ay değiştirmek için yalnızca kaydırılan bir park rezervasyon takvimi, ödünç kitabı yenilemek için satırın yana çekildiği bir kütüphane uygulaması, taranmış proje paftalarını yalnızca iki parmakla büyüten bir ruhsat görüntüleyici ya da sokağın etrafına halka çizmeyi isteyen bir parsel arama haritası. Bunların her biri vatandaşın tamamlaması gereken bir hizmettir. ADA Title II kuralı WCAG 2.1 A ve AA düzeyini esas aldığından, bir şehir veya ilçe uygulamasındaki yalnızca harekete dayalı kontrol bu ölçüte göre değerlendirilir. Mobil uygulamalar da kapsamdadır; bkz. mobil uygulamalar.

Web örnekleri: takvim, ödünç listesi, pafta görüntüleyici, alan arama

Park rezervasyon takvimi

let baslangicX = 0;
takvim.addEventListener("touchstart", e => { baslangicX = e.touches[0].clientX; });
takvim.addEventListener("touchend", e => {
  const dx = e.changedTouches[0].clientX - baslangicX;
  if (dx < -60) ayGoster(simdiki + 1);  // tek yol kaydırma
  if (dx > 60)  ayGoster(simdiki - 1);
});

<button type="button" id="onceki-ay">Önceki ay</button>
<button type="button" id="sonraki-ay">Sonraki ay</button>
<script>
  document.getElementById("onceki-ay")
    .addEventListener("click", () => ayGoster(simdiki - 1));
  document.getElementById("sonraki-ay")
    .addEventListener("click", () => ayGoster(simdiki + 1));
  // Kaydırma işleyicisi kısayol olarak kalabilir.
</script>

Kütüphane ödünçleri: yenilemek için kaydır

<li class="odunc" data-kaydirinca-goster="yenile">
  <span>Çalıkuşu</span>
  <span>Son tarih: 3 Mayıs</span>
</li>

<li class="odunc">
  <span>Çalıkuşu</span>
  <span>Son tarih: 3 Mayıs</span>
  <button type="button" data-yenile="1042">Yenile</button>
</li>

Ruhsat çizimleri için pafta görüntüleyici

gorunum.addEventListener("touchmove", e => {
  if (e.touches.length === 2) {
    yakinlastir(mesafe(e.touches) / sonMesafe);  // yalnızca iki parmak
  }
});

<button type="button" id="yakinlastir">Yakınlaştır</button>
<button type="button" id="uzaklastir">Uzaklaştır</button>
<script>
  document.getElementById("yakinlastir")
    .addEventListener("click", () => olcekle(1.25));
  document.getElementById("uzaklastir")
    .addEventListener("click", () => olcekle(0.8));
  // İki parmakla sıkıştırma olcekle() çağırmaya devam edebilir.
</script>

Mobil örnekler: SwiftUI ve Jetpack Compose

Yerel uygulamalarda da özel hareket tanıyıcılarla aynı sorun çıkar. Hareketi tutabilirsiniz; ancak aynı işi tek parmakla yapan bir düğme veya menü öğesi ekleyin.

// SwiftUI
Image("kat_plani")
  .scaleEffect(olcek)
  .gesture(MagnificationGesture().onChanged { olcek = $0 })

// SwiftUI
VStack {
  Image("kat_plani").scaleEffect(olcek)
    .gesture(MagnificationGesture().onChanged { olcek = $0 })
  HStack {
    Button("Uzaklaştır") { olcek = max(1, olcek - 0.25) }
    Button("Yakınlaştır") { olcek = min(4, olcek + 0.25) }
  }
}

// Jetpack Compose
Image(
  painter = painterResource(R.drawable.kat_plani),
  contentDescription = "Klinik kat planı",
  modifier = Modifier.pointerInput(Unit) {
    detectTransformGestures { _, _, zoom, _ -> olcek *= zoom }
  }
)

// Jetpack Compose
Column {
  Image(
    painter = painterResource(R.drawable.kat_plani),
    contentDescription = "Klinik kat planı",
    modifier = Modifier
      .graphicsLayer(scaleX = olcek, scaleY = olcek)
      .pointerInput(Unit) {
        detectTransformGestures { _, _, zoom, _ -> olcek *= zoom }
      }
  )
  Row {
    Button(onClick = { olcek = (olcek - 0.25f).coerceAtLeast(1f) }) { Text("Uzaklaştır") }
    Button(onClick = { olcek = (olcek + 0.25f).coerceAtMost(4f) }) { Text("Yakınlaştır") }
  }
}

Nasıl denetlenir?

1. Kaydırma, sıkıştırma, iki parmakla kaydırma, döndürme veya çizilen şekil ile bir şey tetiklenen her yeri listeleyin.
2. Dokunmatik bir cihazda her görevi yalnızca dokunuşlarla bitirmeyi deneyin. Sonuca ulaşmak için hareket gerekiyorsa not alın.
3. Fare ya da yalnızca kalemle çalışan bir düzende aynı sonuca sade tıklamalarla ulaşılabildiğini doğrulayın.
4. Platformun ekran okuyucusu açıkken de deneyin: özel hareketler okuyucuyla sık çakışır, bu nedenle düğme orada da güvenilir yoldur.
5. Araçlar: DOM içinde touchstart, touchmove ve pointermove işleyicilerini aramak listeyi çıkarmanıza yardım eder; ancak bir araç düğme alternatifinin var olup olmadığını söyleyemez. Bunu bir insan yapmalıdır.

Yinelenen kusurlar

• Klavye desteğini alternatif saymak. Klavye kısayolu yalnızca işaretçisi olan birine yardım etmez.
• Alternatif düğmeyi bir hareket algılanana kadar gizlemek.
• Kaydırıcı sürüklemesini yol temelli hareket sanmak. Belirli bir yol gerektirmeyen sürükleme bu ölçütün hedefi değildir; yine de kontrolün çubuğa dokunarak da çalıştığını kontrol edin.
• Uyum için hareketi kaldırmak. Tek işaretçili bir yol varsa hareketi kolaylık olarak tutabilirsiniz.

Yayına almadan önce

• Her kaydırma, sıkıştırma veya çizilen yolun tek dokunuşluk, tercihen ekranda görünen bir karşılığı var.
• Bu karşılığın erişilebilir adı görünen metniyle eşleşiyor.
• Kalan harekete bağlı özellikler gerçekten zorunlu (el yazısı imza gibi) ve nedenini yazıya döktünüz.

Kaynaklar

• Understanding SC 2.5.1: Pointer Gestures (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.