Sürükleme Hareketleri

Kısaca

Sürükleme, basmayı, basılı tutmayı, hareket ettirmeyi ve bırakmayı aynı anda ve hassas biçimde yapmayı gerektirir. Titremesi olanlar, iz topu, baş işaretçisi ya da göz izleme kullananlar ve hareket ederken düğmeyi basılı tutamayan herkes için zordur.

WCAG 2.2 ile gelen bu kriter, sürükleme hareketi kullanan tüm işlevlerin, sürükleme zorunlu olmadıkça ya da işlev kullanıcı aracısı tarafından belirlenip yazar tarafından değiştirilmedikçe, sürüklemeden tek bir işaretçiyle de yapılabilmesini ister.

Neleri kapsar?

• Sürükleme nedir: İşaretçi aşağı olayında bir öğeyi yakalar, öğe işaretçiyi izler ve hareket yukarı olayında biter. Sürükle ve bırak, kaydırıcılar, yeniden boyutlandırma ve harita kaydırmayı kapsar.
• Alternatif: Tek bir tıklama ya da dokunma aynı işi yapar: kaydırıcı çubuğuna dokunmak ya da bir alana yazmak, bir öğeyi seçip bir düğmeye basmak, bir menüden hedef seçmek, kaydırmak için ok düğmelerine basmak.
• Sürükleme ve yol tabanlı: Sürüklemede yalnızca başlangıç ve bitiş önemlidir. Tam yol önemliyse yol tabanlı harekettir ve 2.5.1 kapsamındadır.
• İstisnalar: Zorunlu sürükleme ve tarayıcı kaydırma çubuğu, dokunmatik kaydırma ve çekerek yenileme gibi tamamen kullanıcı aracısınca yürütülen sürükleme; sayfa bu davranışı değiştirmediği sürece.
• Klavye ayrıdır: Klavye alternatifi tek başına bu kriteri karşılamaz, çünkü işaretçi kullanıcılarının da sürüklemeden işlem yapmanın bir yoluna ihtiyacı vardır. Klavye kullanımı 2.1.1'dir.
• Tipik örnekler: Listeleri yeniden sıralama, kartları sütunlar arasında taşıma, aralık kaydırıcıları, kırpma ve yeniden boyutlandırma, dosyaları bırakarak yükleme ve harita taşıma.
• Kapsam dışı: Bir yolu izleyen hareketler 2.5.1'dir. Hedef boyutu 2.5.8'dir.

Kimleri etkiler?

Basmayı, hareket ettirmeyi ve basılı tutmayı aynı anda yapamayan, titremesi ya da sınırlı el becerisi olan kişiler. Sürüklemenin yavaş, yorucu ya da hata yapmaya açık olduğu iz topu, baş işaretçisi, ağız çubuğu ya da göz izleme kullananlar. İşaretçiyi sesli komutlarla ya da anahtarlarla kontrol edenler.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Sürüklemesiz işaretçi kullanımı, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.5.7'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriter yeni olduğu için dokümanlar ve yazılım için geçerli satırları V4.1.1'in 10. ve 11. maddelerinde kontrol edin. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: 2.5.7 kriteri WCAG 2.2'ye yenidir; bu yüzden WCAG 2.1'i esas alan EN 301 549 V3.2.1'in parçası değildir. EAA için hazırlanan ilk sürüm olan EN 301 549 V4.1.1'de (Eylül 2026) yer alır. V4.1.1 henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında uygunluk karinesi sağlayacaktır. AA düzeyinde bir kriterdir.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Tıklayarak ya da yazarak ayarlanabilen kaydırıcı

Yerel aralık girdileri kullanıcıların çubuk boyunca tıklamasına da izin verir. Yanında bir sayı alanı en net alternatiftir.

<div class="slider"><div class="thumb"></div></div> <!-- yalnızca sürükleme -->

<label for="vol">Ses</label>
<input id="vol" type="range" min="0" max="100">
<input type="number" min="0" max="100" aria-label="Ses değeri">

2. Taşıma düğmeli sıralanabilir liste

Bir öğeyi yukarı ya da aşağı taşıyan düğmeler ekleyin.

<li draggable="true">Görev A</li> <!-- yalnızca sürükleme -->

<li>
  Görev A
  <button aria-label="Görev A'yı yukarı taşı">↑</button>
  <button aria-label="Görev A'yı aşağı taşı">↓</button>
</li>

3. Taşıma menülü kanban kartları

Kullanıcıların bir menüden hedef sütunu seçmesine izin verin.

<div class="card" draggable="true">Hatayı düzelt</div>

<div class="card">
  Hatayı düzelt
  <label>Şuraya taşı
    <select>
      <option>Yapılacak</option><option>Sürüyor</option><option>Bitti</option>
    </select>
  </label>
</div>

4. Düğmelerle kaydırılabilen harita

Yukarı, aşağı, sol ve sağ kontrolleri sağlayın.

<div id="map">…</div> <!-- yalnızca sürükleyerek kaydırma -->

<div id="map">…</div>
<div role="group" aria-label="Harita kontrolleri">
  <button aria-label="Yukarı kaydır">↑</button>
  <button aria-label="Sola kaydır">←</button>
  <button aria-label="Sağa kaydır">→</button>
  <button aria-label="Aşağı kaydır">↓</button>
</div>

5. Dosya yükleme

Bırakma alanının dosya seçmek için normal bir düğmeye ihtiyacı vardır.

<div class="dropzone">Dosyaları buraya bırakın</div>

<div class="dropzone">Dosyaları buraya bırakın ya da
  <label for="f">dosya seçin</label>
  <input id="f" type="file" multiple>
</div>

6. Paneli yeniden boyutlandırma

Bir sürükleme tutamacının, hazır boyutlar için düğmeler gibi bir tıklama ya da dokunma alternatifine ihtiyacı vardır.

<div class="resize-handle"></div>

<div class="resize-handle"></div>
<button type="button">Paneli genişlet</button>
<button type="button">Paneli daralt</button>

Mobil için kod örnekleri

Yerel uygulamalar yeniden sıralama tutamaçları, kaydırıcılar ve kırpma çerçeveleri kullanır. Dokunmaya dayalı bir alternatif ekleyin ve bunu ekran okuyucu kullanıcılarına da açın.

iOS (SwiftUI)

import SwiftUI

struct TaskList: View {
    @State private var tasks = ["Rapor yaz", "Kodu incele", "Gezi planla"]

    var body: some View {
        List {
            ForEach(tasks.indices, id: \.self) { i in
                HStack {
                    Text(tasks[i])
                    Spacer()
                    // Sürükleyerek yeniden sıralamaya dokunma alternatifleri
                    Button { move(i, by: -1) } label: { Image(systemName: "arrow.up") }
                        .accessibilityLabel("\(tasks[i]) görevini yukarı taşı")
                    Button { move(i, by: 1) } label: { Image(systemName: "arrow.down") }
                        .accessibilityLabel("\(tasks[i]) görevini aşağı taşı")
                }
            }
            .onMove { tasks.move(fromOffsets: $0, toOffset: $1) } // sürükleme kalır
        }
    }

    private func move(_ i: Int, by d: Int) {
        let j = i + d
        guard tasks.indices.contains(j) else { return }
        tasks.swapAt(i, j)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material.icons.filled.ArrowUpward
import androidx.compose.material3.*
import androidx.compose.runtime.Composable

@Composable
fun TaskRow(title: String, onUp: () -> Unit, onDown: () -> Unit) {
    Row {
        Text(title)
        // Sürükleyerek yeniden sıralamaya dokunma alternatifleri
        IconButton(onClick = onUp) {
            Icon(Icons.Filled.ArrowUpward, contentDescription = "$title görevini yukarı taşı")
        }
        IconButton(onClick = onDown) {
            Icon(Icons.Filled.ArrowDownward, contentDescription = "$title görevini aşağı taşı")
        }
    }
}

Nasıl test edilir?

• Sürüklemeleri listeleyin: Sürükleme kullanılan her yeri bulun: kaydırıcılar, sıralanabilir listeler, kanban panoları, dosya bırakma alanları, yeniden boyutlandırma tutamaçları, haritalar ve kırpma araçları.
• Sürüklemeden yapın: Yalnızca tek tıklama ya da dokunma kullanın. Her görevi tamamlayabiliyor musunuz?
• Kaydırıcıları kontrol edin: Değeri çubuğa tıklayarak ya da bir alana yazarak ayarlayabiliyor musunuz?
• Yeniden sıralamayı kontrol edin: Bir öğeyi taşımak için düğme, menü ya da başka dokunmaya dayalı bir yol var mı?
• Yüklemeleri kontrol edin: Bırakma alanının yanında normal bir "dosya seç" kontrolü var mı?
• İstisnaları kontrol edin: Kalan bir sürükleme zorunlu mu, ya da tamamen tarayıcı tarafından mı kontrol ediliyor?
• Mobili kontrol edin: Yeniden sıralama, kaydırıcılar ve kırpma çerçeveleri basit dokunuşlarla, TalkBack ve VoiceOver ile kullanılabiliyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar sürükleme etkileşimlerini algılayamaz. Bir kişi arayüzü yalnızca tek tıklamalarla test etmelidir.

Sık yapılan hatalar

• Yalnızca sürüklemeyle çalışan sıralanabilir listeler: En sık görülen hata (F108).
• Sürükleme gerektiren kaydırıcılar: Çubuğa tıklama ve giriş alanı yok.
• Dosya düğmesi olmayan bırakma alanları: Kullanıcılar sürüklemeden dosya ekleyemez.
• Yalnızca sürüklemeyle harita kaydırma: Kaydırma düğmeleri sağlayın.
• Klavyenin yeterli sayılması: İşaretçi kullanıcılarının dokunmaya dayalı bir yola hâlâ ihtiyacı var.
• Alternatifi olmayan sürükleme tutamaçları: Yeniden boyutlandırma, bölme ve kırpma.
• Takvim ve planlayıcı sürüklemelerini unutmak: Bir etkinliği yalnızca sürükleyerek taşımak.
• Tarayıcı kaydırmasını özel sürüklemeyle değiştirmek: O zaman kullanıcı aracısı istisnası geçerli olmaz.

Kaynaklar

• Understanding SC 2.5.7: Dragging Movements (W3C), İngilizce, yeni sekmede açılır
• G219: Ensuring that an alternative is available for dragging movements that operate on content (W3C), İngilizce, yeni sekmede açılır
• F108: Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method that does not require a dragging movement (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.