Bu kural ne anlama geliyor

WCAG 2.5.2, kontrollerin yanlislikla etkinlestirilmesini ele alır. Kullanıcılar bir işaretçi (fare, dokunmatik, kalem) ile etkilesime girdiginde, eylem yalnızca aşağı olayda (mousedown, touchstart, pointerdown) tetiklenmemelidir. Bunun yerine eylem yukarı olayda (mouseup, touchend, pointerup) tamamlanmalı veya iptal ya da geri alma yolu sağlanmalıdır.

Kriter dört kabul edilebilir yaklaşım belirtir: eylemi yurutmek için aşağı olayi kullanmamak; eylemi yukarı olayda tamamlamak; kullanıcıların birakmadan önce işaretçiyi hedeften uzaklastirabilecegi bir iptal mekanizması sağlamak; veya eylem tamamlandiktan sonra bir geri alma mekanizması sunmak.

Neden önemlidir

Motor engelli kullanıcılar sıklıkla yanlış hedefe yanlislikla dokunur veya tıklar. Eylemler işaretçi-aşağı aninda tetiklenirse, hatayı düzeltme firsati olmaz. Eylemi işaretçi-yukarı anina erteleyerek kullanıcılar parmak veya imleclerini hedeften cekerek eylemi iptal edebilir.

Bu kalıp, çoğu isletim sistemi ve tarayicinin yerel davranisini yansıtır. Standart HTML düğmeleri ve bağlantılar zaten tiklamada (aşağı-sonra-yukarı dizisi) etkinlesir, bu nedenle bu kriter esas olarak mousedown veya touchstart olaylarina bağlanan özel JavaScript etkilesimlerini etkiler.

İlgili axe-core kuralları

İşaretçi iptali için otomatik axe-core kuralı bulunmamaktadır. Test, eylemlerin yalnızca işaretçi-aşağı ile tetiklenmedigini ve kullanıcıların birakmadan önce işaretçiyi hedeften uzaklastirarak iptal edebildigini doğrulamak için manuel etkileşim gerektirir.

Nasıl test edilir

Etkileşimli ogelerde birakmadan basın ve tutun (mousedown/touchstart).
Tutarken işaretçiyi öğeden uzaklastirin, sonra bırakın. Hiçbir eylemin tetiklenmedigini doğrulayın.
Ogeye normal şekilde basın ve bırakın, eylemin yukarı olayda hala çalıştığını onaylayın.
Kod tabanında doğrudan eylem tetikleyen mousedown, touchstart ve pointerdown olay dinleyicilerini arayın.
Asagi olaylarda tetiklenen eylemlerin bir geri alma mekanizması veya iptal yolu olduğunu doğrulayın.

Nasıl düzeltilir

Eylemleri tetiklemek için aşağı olaylar yerine yukarı olaylar kullanın. Yaygın kalıplar asagidadir.

Tiklama işleyicisi — yanlış uygulama

// Iptal yolu olmadan işaretçi-aşağı ile eylemi tetikler
button.addEventListener('pointerdown', (e) => {
  ogeySil(e.target.dataset.id);
});

Tiklama işleyicisi — doğru uygulama

// Click olayi (yukarı-olay) kullanır — birakmadan önce
// işaretçiyi hedeften uzaklastirarak iptal etmeye izin verir
button.addEventListener('click', (e) => {
  ogeySil(e.target.dataset.id);
});

// Veya isabet testi dogrulamasiyla pointerup kullanma
button.addEventListener('pointerup', (e) => {
  const hedef = document.elementFromPoint(e.clientX, e.clientY);
  if (hedef === button || button.contains(hedef)) {
    ogeySil(button.dataset.id);
  }
});

Iptal mekanizması ile dokunma olayları

let aktifHedef = null;

element.addEventListener('pointerdown', (e) => {
  aktifHedef = e.target;
  e.target.classList.add('basilmis'); // Yalnızca görsel geri bildirim
});

element.addEventListener('pointerup', (e) => {
  const birakilan = document.elementFromPoint(e.clientX, e.clientY);
  if (birakilan === aktifHedef) {
    eylemiGerceklestir(aktifHedef); // Yukari olayda eylem
  }
  aktifHedef?.classList.remove('basilmis');
  aktifHedef = null;
});

Sık yapılan hatalar

Yikici eylemleri (silme, gönderme) mousedown veya touchstart olaylarina baglamak.
Kullanıcının iptal etmesine izin vermeden pointerdown ile hemen yeni bir sayfaya yönlendirmek.
Özel sürükle-birak uygulamalarında bırakma eylemini pointerup yerine pointerdown ile gerçekleştirmek.
touchstart ile form gondermesini tetikleyerek kullanıcıların iptal etmek için parmaginiptal dugmesinden kaydirmasini engellemek.
Satin alma veya silme gibi kritik eylemler için HTML niteliklerinde onmousedown kullanmak.

2.5.2 İşaretçi İptali