İşaretçi İptali

Kısaca

Bir düğmeye bastığınızı fark edip parmağınızı düğmenin dışına kaydırarak vazgeçebilmek, çoğumuzun farkında olmadan kullandığı bir güvenlik ağıdır. Bu ağ yalnızca işlem bırakma anında (up-event) gerçekleştiğinde çalışır. İşlem basma anında (down-event) tetikleniyorsa, yanlış bir dokunuş geri alınamaz.

Bu kriter, tek bir işaretçiyle (fare, parmak, kalem) yapılan işlemlerde yanlışlıkla tetiklenmeye karşı en az bir önlem ister: işlemin bırakma anında gerçekleşmesi ve bırakmadan önce iptal edilebilmesi, ya da işlemin tamamlandıktan sonra geri alınabilmesi. Basma anında tetikleme yalnızca işlevin doğası bunu gerektiriyorsa kabul edilir.

Neleri kapsar?

• Bırakma anında tetikleme: İşlemin click veya pointerup ile gerçekleşmesi.
• İptal: Kullanıcının işaretçiyi hedefin dışına kaydırıp bırakarak işlemi gerçekleştirmeden vazgeçebilmesi.
• Geri alma: İşlem tamamlandıktan sonra sonucunun geri alınabilmesi.
• Sürükle-bırak: Bırakılan konuma göre işlem yapılması ve geçersiz bir yere bırakıldığında işlemin iptal olması.
• İstisnalar: Piyano tuşu gibi anında tepki gerektiren işlevler ve oyunlarda joystick kontrolü gibi iptali anlamsız olan durumlar.
• Kapsam dışı notlar: Çok parmaklı ve yol tabanlı hareketlerin alternatifleri bir önceki kriterin (İşaretçi Hareketleri) konusudur.

Kimleri etkiler?

El titremesi, spastisite veya kas kontrolü güçlüğü olan kişiler ekrana yanlışlıkla dokunabilir ya da istemedikleri bir düğmeye basabilir. Az gören kullanıcılar ekranı büyüttüklerinde düğmeleri tam görmeden dokunabilir. Bilişsel engeli olan kullanıcılar ise neye bastıklarını fark edip vazgeçmek için zamana ihtiyaç duyabilir. Ekran okuyucu kullanıcıları da ekranı keşfederken yanlışlıkla öğeleri etkinleştirebilir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 97–98 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Basma anında tetiklenen işlem

mousedown, pointerdown veya touchstart ile tetiklenen işlemler kullanıcıya vazgeçme fırsatı vermez. click olayı bırakma anında oluşur ve işaretçi hedef dışında bırakıldığında tetiklenmez.

gonderDugmesi.addEventListener("pointerdown", () => {
  basvuruyuGonder();
});

gonderDugmesi.addEventListener("click", () => {
  basvuruyuGonder();
});

2. Yerleşik düğme davranışı

Yerleşik button ve a öğeleri bırakma anında çalışır ve iptal davranışını kendiliğinden sağlar. Özel bileşenlerde bu davranışı yeniden yazmaya çalışmak yerine bu öğeleri kullanın.

<div class="dugme" ontouchstart="kaydiSil()">Kaydı sil</div>

<button type="button" onclick="kaydiSil()">Kaydı sil</button>

3. Geri alma imkânı

Kalıcı sonuçları olan işlemlerde geri alma seçeneği ek bir güvence sağlar. Bildirim ekran okuyucuya da duyurulmalıdır.

<div id="bildirim" role="status"></div>

<script>
  let silinen = null;

  function belgeyiSil(belge) {
    silinen = belge;
    listedenKaldir(belge); // Kendi fonksiyonunuz
    const alan = document.getElementById("bildirim");
    alan.innerHTML = "";
    const mesaj = document.createElement("span");
    mesaj.textContent = `${belge.ad} silindi. `;
    const geriAl = document.createElement("button");
    geriAl.type = "button";
    geriAl.textContent = "Geri al";
    geriAl.addEventListener("click", () => {
      listeyeEkle(silinen); // Kendi fonksiyonunuz
      alan.textContent = `${silinen.ad} geri yüklendi.`;
    });
    alan.append(mesaj, geriAl);
  }
</script>

4. Sürükle-bırak işleminde iptal

Sürükleme işlemi yalnızca geçerli bir hedefe bırakıldığında sonuçlanmalı; başka bir yere bırakmak veya Escape'e basmak işlemi iptal etmelidir.

let suruklenen = null;

kart.addEventListener("pointerdown", (e) => {
  suruklenen = kart;            // yalnızca sürükleme başlar, işlem yapılmaz
  kart.setPointerCapture(e.pointerId);
});

kart.addEventListener("pointerup", (e) => {
  const hedef = document.elementFromPoint(e.clientX, e.clientY)
    ?.closest(".klasor");
  if (suruklenen && hedef) {
    klasoreTasi(suruklenen, hedef); // Kendi fonksiyonunuz
  }
  suruklenen = null;               // hedef dışı bırakma = iptal
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") suruklenen = null;
});

5. İstisna: anında tepki gerektiren işlev

Bir sanal piyano tuşunun basıldığı anda ses çıkarması işlevin gereğidir. Bu tür durumlar istisna kapsamındadır ve dar yorumlanmalıdır.

// İstisna: tuş basıldığında ses hemen başlar
piyanoTusu.addEventListener("pointerdown", () => notayiCal("La"));
piyanoTusu.addEventListener("pointerup", () => notayiDurdur("La"));

Mobil için kod örnekleri

Standart düğmeler her iki platformda da bırakma anında çalışır ve parmak düğmenin dışına kaydırıldığında işlemi iptal eder. Sorunlar genellikle özel hareket tanımlarında ortaya çıkar.

iOS (SwiftUI)

import SwiftUI

struct KayitSatiri: View {
    let sil: () -> Void

    var body: some View {
        HStack {
            Text("Ruhsat başvurusu taslağı")
            Spacer()

            // Hatalı: dokunma başladığı anda siler
            // Image(systemName: "trash")
            //     .gesture(DragGesture(minimumDistance: 0).onChanged { _ in sil() })

            // Doğru: Button bırakma anında çalışır, dışarı kaydırınca iptal olur
            Button(role: .destructive, action: sil) {
                Image(systemName: "trash")
            }
            .accessibilityLabel("Taslağı sil")
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun SilmeDugmesi(sil: () -> Unit) {
    // Hatalı: onPress basma anında tetiklenir
    // Icon(Icons.Filled.Delete, null,
    //     Modifier.pointerInput(Unit) { detectTapGestures(onPress = { sil() }) })

    // Doğru: IconButton (clickable) bırakma anında çalışır
    IconButton(onClick = sil) {
        Icon(Icons.Filled.Delete, contentDescription = "Taslağı sil")
    }
}

Nasıl test edilir?

• Bas, kaydır, bırak: Her düğmeye, bağlantıya ve etkileşimli öğeye fare ile basın, basılı tutarken imleci öğenin dışına çıkarın ve bırakın. İşlem gerçekleşmemeli.
• Dokunmatik ekranda tekrarlayın: Aynı testi parmakla yapın; parmağı öğenin dışına kaydırıp kaldırın.
• Geri almayı doğrulayın: Basma anında çalışması gereken bir işlem varsa, sonucunun geri alınabildiğini veya istisna kapsamında olduğunu kontrol edin.
• Otomatik araçların sınırı: Otomatik araçlar bu kriteri değerlendiremez. Kod incelemesinde mousedown, pointerdown ve touchstart dinleyicilerini aramak sorunlu yerleri bulmaya yardımcı olur, ancak sonuç elle doğrulanmalıdır.

Sık yapılan hatalar

• Hız için basma olayını kullanmak: Mobilde "daha hızlı tepki" amacıyla touchstart kullanmak.
• Özel menülerde basma ile seçim: Açılır menüde seçeneğe basıldığı anda seçimin yapılması.
• İstisnayı geniş yorumlamak: Düğmelerin ve form işlemlerinin neredeyse hiçbiri istisna kapsamında değildir.

Kaynaklar

• Understanding SC 2.5.2: Pointer Cancellation (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — İşaretçi, basma ve bırakma olayı, geri alma ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.