Bu kural ne anlama geliyor

WCAG 2.5.7, sürükleme hareketi gerektiren (basma, tutma ve işaretçiyi hareket ettirme) her işlevin, sürükleme gerektirmeyen tek işaretçi mekanizmasiyla da çalıştırılmasını gerektirir. Bu, sürükle-birak, kaydırıcı ayarlamalari, sıralanabilir listeler ve diğer suruklemne bağlı etkilesimler için tıklama/dokunma alternatifleri sağlamayı ifade eder.

Sürükleme hareketi, bir işaretçi düğmesine basma (veya dokunma), aşağı tutma ve yeni bir konuma hareket ettirmeyi içerir. Alternatif, aynı sonucu ayrik işaretçi eylemleri aracılığıyla sağlamalıdır — örneğin bir başlangıç noktasina tıklama, sonra bir bitiş noktasina tıklama veya artirma/azaltma düğmeleri kullanma.

Neden önemlidir

Sürükleme, hassas bir yol boyunca surdurulen işaretçi temasi gerektirir ve birçok kullanıcı bunu gerçekleştiremez. Titreme, sınırlı kavrama gucu veya motor bozukluklari olan kullanıcılar hareket ederken işaretçi-aşağı basincini surduroemyebilir. Goz takibi, bas takibi veya agiz çubukları ile çalışan kullanıcılar genellikle sürükleme islemlerini hiç gerçekleştiremez.

Konuşma tanıma kullanıcıları da sürükleme etkilesimleriyle zorlanır çünkü ses komutlari genellikle sürekli sürükleme hareketleri yerine ayrik tıklama/dokunma eylemlerini etkinleştirir. Sürüklemesiz alternatifler sağlamak, tüm kullanıcıların motor yeteneklerinden bağımsız olarak gorevleri tamamlayabilmesini sağlar.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Sürükle bağlı işlevselliğin tespiti, sürükleme ile ilgili olayları (dragstart, dragover, drop) veya işaretçi hareket takibini kullanan öğeleri belirlemek için manuel test ve kod incelemesi gerektirir.

Nasıl test edilir

Tüm sürükle-birak etkilesimlerini (sıralanabilir listeler, dosya yükleme alanları, kaydırıcılar, kanban panolari, çizim tuvalileri) belirleyin.
Her suruklenebilir özellik için aynı görevi sürükleme hareketi yapmadan tamamlamayi deneyin.
Tiklama/dokunma tabanlı alternatiflerin (düğmeler, menüler, giriş alanları) mevcut olduğundan emin olun.
Sürükleme islemlerinin klavye esdegerlerine sahip olduğunu doğrulamak için yalnızca klavye gezintisiyle test edin.
Sürükleme islemleri gerçekleştiremeyen yardımcı teknoloji işaretçi emulatorleri kullanın.

Nasıl düzeltilir

Tüm sürükleme tabanlı etkilesimler için tek işaretçi alternatifleri sağlayın.

Siralanabilir liste — yalnızca sürükleme (yanlış)

<!-- Yeniden sıralamak için yalnızca sürükle-birak, alternatif yok -->
<ul id="sıralanabilir">
  <li draggable="true" ondragstart="sürükle(event)">Öğe 1</li>
  <li draggable="true" ondragstart="sürükle(event)">Öğe 2</li>
  <li draggable="true" ondragstart="sürükle(event)">Öğe 3</li>
</ul>

Siralanabilir liste — düğme alternatifleriyle (doğru)

<ul id="sıralanabilir" role="list">
  <li draggable="true">
    <span>Öğe 1</span>
    <div class="sıralama-kontrolleri">
      <button aria-label="Öğe 1 yukarı tasi" onclick="yukariTasi(this)">
        &#x25B2;
      </button>
      <button aria-label="Öğe 1 aşağı tasi" onclick="asagiTasi(this)">
        &#x25BC;
      </button>
    </div>
  </li>
  <li draggable="true">
    <span>Öğe 2</span>
    <div class="sıralama-kontrolleri">
      <button aria-label="Öğe 2 yukarı tasi" onclick="yukariTasi(this)">
        &#x25B2;
      </button>
      <button aria-label="Öğe 2 aşağı tasi" onclick="asagiTasi(this)">
        &#x25BC;
      </button>
    </div>
  </li>
</ul>

Giriş alternatifi ile kaydırıcı

<!-- Sayi girişi alternatifi ile suruklenebilir kaydırıcı -->
<div class="kaydırıcı-kapsayıcı">
  <label for="fiyat-kaydırıcı">Maksimum fiyat</label>
  <input type="range" id="fiyat-kaydırıcı" min="0" max="500"
    value="250" step="10">
  <input type="number" id="fiyat-girişi" min="0" max="500"
    value="250" step="10" aria-label="Maksimum fiyat değeri">
</div>

<script>
  const kaydırıcı = document.getElementById('fiyat-kaydırıcı');
  const giriş = document.getElementById('fiyat-girişi');
  kaydırıcı.addEventListener('input', () => giriş.value = kaydırıcı.value);
  giriş.addEventListener('input', () => kaydırıcı.value = giriş.value);
</script>

Dosya yükleme — düğme alternatifi ile bırakma alanı

<div class="bırakma-alanı"
  ondragover="event.preventDefault()"
  ondrop="birakmaIsle(event)">
  <p>Yüklemek için dosyaları buraya sürükleyin</p>
  <!-- Sürüklemesiz alternatif -->
  <label for="dosya-yükleme" class="yükleme-düğmesi">
    Veya dosya seçmek için tıklayın
  </label>
  <input type="file" id="dosya-yükleme" multiple
    onchange="dosyalariIsle(this.files)" class="görsel-gizli">
</div>

Sık yapılan hatalar

Yalnızca sürükle-birak yeniden sıralamayı destekleyen, düğme veya menü alternatifi olmayan sıralanabilir listeler veya kanban panolari.
Yalnızca tutamaci surukleyerek yanıt veren, klavye ok tuşu desteği veya sayisal giriş olmayan özel kaydırıcılar.
Dosya seçiçi düğmesi olmadan yalnızca sürükle-birak kabul eden dosya yükleme alanları.
Koordinat giriş alanları olmadan sürükleme gerektiren görsel kirpma veya konumlandırma arayüzleri.
Surukleyemeyen kullanıcılar için yapılandırılmış giriş alternatifi olmayan çizim veya açıklama araçları.

2.5.7 Sürükleme Hareketleri