WCAG 2.5.7: Sürükleme Hareketleri

Bu Kuralın Anlamı

WCAG 2.5.7 — Sürükleme Hareketleri (Seviye AA, WCAG 2.2 ile eklenmiştir), işleyiş için sürükleme hareketi kullanan tüm işlevlerin, sürükleme olmadan tek bir işaretçi eylemiyle gerçekleştirilebilir olması gerektiğini belirtir; sürükleme hareketinin işlevsellik için vazgeçilmez olduğu ve alternatif bir mekanizmanın bulunmadığı durumlar hariç.

Sürükleme hareketi, işaretçinin basılı tutulup yeni bir konuma taşındıktan sonra bırakıldığı etkileşim olarak tanımlanır. Yaygın örnekler şunlardır: liste öğelerini sürükle-bırak ile sıralama, bir bölücü tutamacını sürükleyerek panelleri yeniden boyutlandırma, başlığı tutup çekerek bir kaydırıcıyı kullanma, bir tuval üzerinde çizim yapma ve kanban kartlarını yeniden sıralama. Bu kalıpların tümü için eşdeğer bir tek işaretçi alternatifi bulunmalıdır — yani kullanıcının işaretçi düğmesini basılı tutup hareket ettirmesine gerek kalmadan etkinleştirebileceği bir mekanizma.

Tek işaretçi kısıtı önemlidir. Alternatifin bir klavye kısayolu olması gerekmez; fare tıklaması, dokunma veya yalnızca tek temas noktası içeren ve basılı tutulurken sürekli hareket gerektirmeyen herhangi bir eylem olabilir. Örneğin, kullanıcıların doğrudan rayın üzerine tıklayarak bir değere atlamasına izin veren bir kaydırıcı, kriteri karşılar; çünkü raya tıklamak, sürükleme içermeyen tek işaretçi eylemidir.

Geçer sayılan örnekler: Sürüklenebilir bir listeye ek olarak yukarı/aşağı ok düğmeleri veya konuma taşıma iletişim kutusu sunulması; rayın herhangi bir yerine tıklamayı kabul eden bir aralık kaydırıcısı; ayrıca sayısal girdi veya çift tıklamayla daraltma imkânı olan yeniden boyutlandırılabilir bir panel; hem sürükleme hem de gezinme oklarına tıklama ile kaydırılabilen bir harita.

Kalır sayılan örnekler: Öğeleri yeniden sıralamanın tek yolunun sürükleme olduğu bir sıralanabilir liste; alternatif imkânı olmayan bir bölmeli pencere yeniden boyutlandırıcısı; yalnızca sürükle-bırak kabul eden ve düğme yedeklemesi olmayan bir dosya yükleme alanı; tonu seçmenin tek yolunun, sayısal veya metin girişi alternatifi olmadan bir gradyan şeridi üzerinde sürükleme olduğu bir renk seçici.

Resmî istisna: Kriter, sürüklemenin vazgeçilmez olduğu — yani kaldırılmasının etkinliği temelden değiştireceği veya geçersiz kılacağı — durumlarda yalnızca sürüklemeye dayalı arayüzlere açıkça izin verir. Jest çizim uygulaması veya imza yakalama bileşeni klasik örneklerdir. Ancak bu istisna kasıtlı olarak dardır; çoğu günlük arayüz kalıbı (kaydırıcılar, sıralanabilir listeler, yeniden boyutlandırılabilir sütunlar) vazgeçilmez sürükleme senaryosu olarak değerlendirilmez.

Neden Önemlidir

Motor bozukluklar, dünya nüfusunun önemli bir bölümünü etkiler. Dünya Sağlık Örgütü’ne göre, dünya genelinde 1,3 milyardan fazla insan — küresel nüfusun yaklaşık %16’sı — bir tür engellilikle yaşamaktadır ve motor veya fiziksel bozukluklar en yaygın kategoriler arasındadır. Esansiyel tremor, Parkinson hastalığı, tekrarlayan zorlanma yaralanmaları, hemipleji, omurilik yaralanmaları ve uzuv farklılıkları gibi durumlar, işaretçi düğmesini basılı tutarken işaretçiyi aynı anda hassas biçimde hareket ettirmeyi zor veya imkânsız hâle getirir.

El titremesi olan bir kullanıcı için, bir kaydırıcı başlığını rayın bir ucundan diğerine sürüklemek sadece zahmetli değildir — tamamen güvenilmez olabilir. İşaretçi kayabilir, sürükleme işlem ortasında iptal olabilir veya gereken hassasiyet, titreme yaşayan ellerin sağlayabileceğinin ötesinde olabilir. Bu kullanıcılar çoğu zaman tıklama tabanlı alternatiflere, klavye ile gezinmeye veya anahtarlı erişim cihazlarına güvenir. Bir özelliğe giden tek yol bir sürükleme hareketiyse, bu özellik onlar için fiilen erişilemez hâle gelir.

Somut senaryo: Çift tutamaçlı bir aralık kaydırıcısı ile fiyat aralığı filtresi sunan bir e-ticaret ürün sayfasını düşünün. İnce motor kontrolü sınırlı bir kullanıcı, fiyat aralığını daraltmaya çalışır ancak hiçbir tutamacı hedef konuma güvenilir biçimde sürükleyemez — işaretçi kayar, tutamak yanlış değerlere atlar ve yaşanan hayal kırıklığı görevi bırakmasına neden olur. Aynı filtre, kaydırıcının yanında bir çift sayısal metin girişi sunsaydı, kullanıcı yalnızca istenen minimum ve maksimum fiyatları yazıp gönderebilirdi. Bu tek ekleme, erişilemez bir özelliği, minimum geliştirme maliyetiyle tamamen erişilebilir hâle getirir.

Motor bozuklukların ötesinde, zorlu ortamlarda dokunmatik ekran kullanan kullanıcılar — toplu taşımada tutunma demirini tutanlar, eldiven giyenler veya kalem kullananlar — tek işaretçi alternatiflerinden fayda sağlar. Bilişsel erişilebilirlik de rol oynar: daha basit, tıklama tabanlı etkileşimler, mekânsal bir metaforu anlamayı ve fiziksel hassasiyeti korumayı gerektiren sürükle-bırak işlemlerine kıyasla bilişsel yükü azaltır.

Kullanılabilirlik ve SEO açısından bakıldığında, etkileşimli kontrollerin basit işaretçi eylemleriyle erişilebilir olmasını sağlamak, genellikle daha temiz bileşen mimarisi ve daha iyi anlamsal işaretleme üretir; bu da yardımcı teknolojiler ve arama motoru tarayıcıları tarafından keşfedilebilirliği artırır.

İlgili Axe-core Kuralları

WCAG 2.5.7 bir manuel test kriteridir. Bu metnin yazıldığı tarihte, axe-core bu kriterin ihlallerini kesin olarak işaretleyebilecek otomatik bir kural içermemektedir. Bunun nedeni, kriterin işleyiş biçimiyle temelden ilgilidir: otomatik araçlar bir öğe üzerinde sürükleme olay dinleyicisi olduğunu tespit edebilir, ancak sürükleme gerektirmeyen bir alternatifin mevcut olup olmadığını, bu alternatifin aynı işlevselliği kapsayıp kapsamadığını veya sürüklemenin vazgeçilmez olup olmadığını kesin olarak belirleyemez. Bu yargı, etkileşim tasarımının insan tarafından değerlendirilmesini gerektirir.

• Manuel denetim — sürükle-bırak imkânları: Test uzmanları, sayfadaki mousedown/mousemove/mouseup dizilerine veya bunların dokunmatik karşılıklarına (touchstart/touchmove/touchend) yanıt veren her bileşeni belirlemeli ve her birinin, sürükleme olmadan tek bir işaretçi basışıyla çalıştırılabilen alternatif bir mekanizma sunduğunu doğrulamalıdır. Test uzmanları ayrıca HTML5 draggable özniteliğini ve sürüklemeye bağlı işlevselliğin göstergeleri olarak ilgili dragstart/drop olay dinleyicilerini kontrol etmelidir.
• Manuel denetim — işaretçi olayı incelemesi: Tarayıcı Geliştirici Araçları olay dinleyicisi incelemesi veya Accessibility Insights for Web (2.5.7 için manuel kontrol listesi içerir) gibi erişilebilirlik denetim araçları kullanılarak, bileşenler işaretçi olay işleyicileri açısından incelenmeli ve bileşenin tam değer aralığının veya yeniden konumlandırma yeteneğinin, sürekli işaretçi hareketi olmadan erişilebilir olduğu doğrulanmalıdır.
• Otomasyonun bunu yakalayamamasının nedeni: Otomatik bir tarayıcı, bir <div> öğesinin dragstart dinleyicisine sahip olduğunu işaretleyebilir, ancak yakınlardaki “Yukarı taşı” etiketli bir düğmeye tıklamanın uyumlu bir alternatif sağlayıp sağlamadığını bilemez. Bu, arayüz öğeleri arasındaki ilişkiyi ve işlevsel eşdeğerliklerini anlamayı gerektirir — bu da şu anda statik veya çalışma zamanı DOM analiz araçlarının kapasitesini aşan bir görevdir.

Nasıl Test Edilir

1. Otomatik tarama temel seviyesi: Sayfada işaretçi veya giriş türüyle ilgili sorunları ortaya çıkarmak için axe DevTools veya Lighthouse çalıştırın. Her ne kadar hiçbir axe kuralı doğrudan 2.5.7 ile eşleşmese de, 2.5.x kuralları kapsamında işaretlenen sorunları gözden geçirmek yararlı bağlam sağlar. Axe’in klavye desteğinin yetersiz olduğunu işaretlediği bileşenleri not edin; bunlar çoğu zaman yalnızca sürüklemeye dayalı kalıplarla örtüşür.
2. Tüm sürüklenebilir bileşenleri belirleyin: Chrome DevTools’u açın, Elements paneline gidin ve Event Listeners sekmesini kullanarak dragstart, drag, drop, pointermove, mousemove ve touchmove işleyicilerini arayın. Alternatif olarak, sayfa kaynağında draggable özniteliğini ve .addEventListener('dragstart' gibi JavaScript kalıplarını arayın. Sürükleme gerektiren her bileşeni listeleyin.
3. Her sürüklenebilir bileşeni alternatifler açısından test edin: Belirlenen her bileşen için, yalnızca tek işaretçi tıklamaları veya dokunmaları kullanarak — sürükleme olmadan — aynı sonucu elde etmeye çalışın. Bir kaydırıcı için, istenen konuma doğrudan rayın üzerine tıklayın. Sıralanabilir bir liste için, taşıma düğmeleri veya bağlam menüsü seçenekleri arayın. Yeniden boyutlandırılabilir bir panel için, çift tıklama veya tıklama tabanlı kontroller arayın. Hiçbir alternatif yoksa, kriter karşılanmamış demektir.
4. Klavye ile gezinme kontrolü (ikincil sinyal): Tüm sürüklenebilir bileşenleri yalnızca klavye ile test edin (Sekme ile odaklanma, ok tuşları, Enter/Boşluk). Klavye desteği WCAG 2.1.1 kapsamında olsa da, güçlü klavye desteğinin varlığı çoğu zaman sürükleme dışı alternatiflerin de varlığıyla ilişkilidir; bu da bunu yararlı bir doğrulama adımı hâline getirir. NVDA + Firefox, VoiceOver + Safari (macOS/iOS) veya JAWS + Chrome kullanın ve bileşenin tüm işlevselliğinin işaretçi cihazı olmadan çalıştırılabildiğini doğrulayın.
5. Dokunmatik cihaz doğrulaması: Bir mobil cihazda veya Chrome DevTools dokunmatik mod cihaz öykünmesini kullanarak, aynı görevleri dokunma hareketleriyle (sürükle-ve-tutma olmadan) tamamlamaya çalışın. Tüm işlevsellik için tek dokunuş veya hedefe dokunma etkileşimlerinin yeterli olduğunu doğrulayın.
6. Sonuçları belgeleyin: Test edilen her bileşen için, uyumlu bir tek işaretçi alternatifin mevcut olup olmadığını, bunun işlevselliğin tam aralığını kapsayıp kapsamadığını ve sürükleme işleminin vazgeçilmez sayılıp sayılamayacağını kaydedin. WCAG 2.5.7 için Accessibility Insights for Web manuel test kontrol listesini yapılandırılmış bir rehber olarak kullanın.

Nasıl Düzeltilir

Ray Üzerine Tıklama Desteği Olmayan Aralık Kaydırıcısı — Hatalı

<!-- Slider that only responds to drag on the thumb;
     clicking the track does nothing -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

Ray Üzerine Tıklama ve Sayısal Girdi Destekli Aralık Kaydırıcısı — Doğru

<!-- Native <input type='range'> provides drag, click-on-track,
     and keyboard support natively. A numeric input offers an
     additional single-pointer alternative. -->
<label for='priceRange'>Maximum price: <span id='priceValue'>500</span> TL</label>
<input type='range'
       id='priceRange'
       name='priceRange'
       min='0'
       max='1000'
       value='500'
       step='10'
       aria-valuemin='0'
       aria-valuemax='1000'
       aria-valuenow='500'
       oninput='document.getElementById("priceValue").textContent = this.value;
                document.getElementById("priceNumber").value = this.value;'>
<label for='priceNumber'>Or enter a value:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

Alternatifi Olmayan Sürükle-Bırak ile Sıralanabilir Liste — Hatalı

<!-- Items can only be reordered by dragging.
     No move buttons or keyboard reordering exist. -->
<ul id='taskList'>
  <li draggable='true' ondragstart='handleDrag(event)' id='item1'>Task One</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item2'>Task Two</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item3'>Task Three</li>
</ul>

Taşıma Düğmeli Sürükle-Bırak ile Sıralanabilir Liste — Doğru

<!-- Drag-and-drop is preserved for users who can use it.
     Move Up / Move Down buttons provide a single-pointer
     (and keyboard-accessible) alternative for every item. -->
<ul id='taskList' aria-label='Sortable task list'>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item1'>
    <span>Task One</span>
    <button type='button'
            onclick='moveItem("item1", -1)'
            aria-label='Move Task One up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item1", 1)'
            aria-label='Move Task One down'>
      &darr; Move Down
    </button>
  </li>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item2'>
    <span>Task Two</span>
    <button type='button'
            onclick='moveItem("item2", -1)'
            aria-label='Move Task Two up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item2", 1)'
            aria-label='Move Task Two down'>
      &darr; Move Down
    </button>
  </li>
</ul>

Alternatifi Olmayan Yeniden Boyutlandırılabilir Bölmeli Pencere — Hatalı

<!-- The divider can only be repositioned by dragging.
     No percentage input or preset-size buttons exist. -->
<div class='split-pane'>
  <div class='pane pane-left' id='leftPane'>Content A</div>
  <div class='divider'
       onmousedown='startResize(event)'
       aria-hidden='true'></div>
  <div class='pane pane-right' id='rightPane'>Content B</div>
</div>

Hazır Boyut Düğmeli Yeniden Boyutlandırılabilir Bölmeli Pencere — Doğru

<!-- The divider still supports dragging, but preset-layout
     buttons allow single-pointer repositioning. The divider
     is also keyboard-focusable with arrow-key support. -->
<div class='split-pane-wrapper'>
  <div class='split-controls' role='group' aria-label='Panel size presets'>
    <button type='button' onclick='setSplit(25)'>25 / 75</button>
    <button type='button' onclick='setsplit(50)'>50 / 50</button>
    <button type='button' onclick='setSplit(75)'>75 / 25</button>
  </div>
  <div class='split-pane'>
    <div class='pane pane-left' id='leftPane'>Content A</div>
    <div class='divider'
         role='separator'
         tabindex='0'
         aria-label='Resize panels'
         aria-valuenow='50'
         aria-valuemin='10'
         aria-valuemax='90'
         onmousedown='startResize(event)'
         onkeydown='resizeWithKeys(event)'>
    </div>
    <div class='pane pane-right' id='rightPane'>Content B</div>
  </div>
</div>

Yaygın Hatalar

• Kaydırıcıları, ray üzerine tıklama desteği olmadan özel <div> tabanlı bileşenler olarak uygulamak; tamamen başlık öğesini sürüklemeye güvenmek ve değeri tıklanan konuma atlatmak için ray öğesindeki click olaylarını ele almamak.
• Sürükle-bırak dosya yüklemenin gerekli tek yükleme mekanizması olduğunu varsaymak; bırakma alanının yanında zorunlu bir yedek olarak görünür, tıklanabilir bir dosya gözatma düğmesi (<input type='file'>) sunmamak.
• Vazgeçilmezlik istisnasını çok geniş uygulamak — örneğin, kullanıcı ihtiyaçlarını işlev kaybı olmadan tamamen karşılayabilecek Yukarı/Aşağı Taşı düğmeleri varken, sıralanabilir bir yapılacaklar listesi veya kanban panosunu “vazgeçilmez sürükleme” olarak değerlendirmek.
• Tek işaretçi alternatifler sunmadan yalnızca klavye alternatifleri sağlamak; WCAG 2.5.7’nin yalnızca klavye desteğiyle karşılandığını yanlış yorumlamak. Kriter, özellikle tek işaretçi yolunu gerektirir; yalnızca klavye çözümleri 2.1.1’i adresler, 2.5.7’yi değil.
• Taşıma düğmelerini veya sayısal girdileri, kendileri de sürükleme etkileşimleri veya karmaşık işaretçi dizileri gerektiren üzerine gelme durumları veya ikincil menüler arkasına gizlemek; bu da alternatifin erişilebilirliğini fiilen ortadan kaldırır.
• Yalnızca masaüstü fare ile sürükleme alternatiflerini test edip dokunmatik cihazları ihmal etmek; ardından, sürükleme hareketi davranışının ve alternatiflerinin masaüstü uygulamasından önemli ölçüde farklı olabildiği dokunmatik ekranlı kullanıcılara dağıtım yapmak.
• Kaydırıcı rayında CSS ile pointer-events: none kullanmak; bu, sürükleme sırasında yanlışlıkla tıklamaları önlemeyi amaçlarken, 2.5.7’nin gerektirdiği ray üzerine tıklama alternatifini istemeden engeller.
• Gömülü haritalarda veya özel tuval tabanlı görselleştirmelerde harita kaydırma/sürükleme etkileşimleri için alternatif sunmamak; oysa yön oklarına tıklamak veya koordinat girmek yeterli bir tek işaretçi alternatifi olurdu.
• Tek işaretçi alternatifini de sürükle-bırak hedefi olarak uygulamak — örneğin, hâlâ sürükleme gerektiren bir “buraya bırakın” alanı oluşturmak — bunun yerine düğme veya metin girişi gibi gerçekten farklı bir etkileşim modeli sunmamak.
• Sürüklenebilir bir bileşenin tam değer aralığında alternatifleri test etmeyi unutmak. Kullanıcıların ray üzerinde yalnızca birkaç hazır konuma tıklamasına izin veren, ancak herhangi bir rastgele konuma izin vermeyen bir kaydırıcı, sürükleme sürümü sürekli değerleri destekliyorsa tam bir alternatif sunmaz.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye’nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, dijital hizmetler için kapsamlı bir ulusal erişilebilirlik çerçevesi oluşturur. Genelge, kapsamdaki kurumların Web İçeriği Erişilebilirlik Yönergeleri’ne uymasını zorunlu kılar ve özellikle Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen resmî sertifikasyon işareti olan Erişilebilirlik Logosunu (Accessibility Logo) alabilmek için Seviye AA uyumunu referans alır.

WCAG 2.5.7, WCAG 2.2 ile eklenmiş bir Seviye AA kriteri olarak, Erişilebilirlik Logosu’nu elde etmek ve sürdürmek için gerekli şartların kapsamına girer. Sürükle-bırak etkileşimlerine dayanan — ürün filtreleme kaydırıcıları veya sıralanabilir istek listeleri olan e-ticaret platformları, portföy yönetim panoları olan bankacılık uygulamaları veya tarih aralığı seçicileri olan seyahat acentesi rezervasyon araçları gibi — kuruluşlar için 2.5.7’ye uyulmaması, sertifikasyona doğrudan engel teşkil eden bir bariyer oluşturur.

2025/10 sayılı Cumhurbaşkanlığı Genelgesi kapsamındaki kuruluşlar, Türkiye dijital ekonomisinin geniş bir kesimini içerir: merkezi ve yerel düzeydeki kamu kurum ve kuruluşları; Bankacılık Düzenleme ve Denetleme Kurumu (BDDK) tarafından düzenlenen bankalar ve finansal hizmet sağlayıcıları; Türkiye’de faaliyet gösteren e-ticaret platformları; hastaneler ve özel sağlık hizmeti sunucuları; 200.000 veya daha fazla abonesi olan telekomünikasyon işletmecileri; seyahat acenteleri ve özel ulaşım şirketleri; ve Millî Eğitim Bakanlığı (Milli Eğitim Bakanlığı — MoNE) tarafından yetkilendirilmiş özel okullar.

Bu kuruluşlar için, sürükleme etkileşimlerine tek işaretçi alternatifler sunmamak yalnızca teknik bir eksiklik değil — sertifikasyonu engelleyebilecek, kuruluşu düzenleyici incelemeye açık hâle getirebilecek ve motor bozukluğu olan önemli bir kullanıcı kitlesini dışlayabilecek bir uyum açığıdır. Türkiye’nin engellilik istatistikleri küresel eğilimleri yansıtır: milyonlarca kişi ince motor kontrolünü etkileyen durumlarla yaşamaktadır ve yalnızca sürükleme hareketlerine dayanan dijital hizmetler, bu nüfus için gereksiz engeller oluşturur.

Pratik açıdan bakıldığında, Erişilebilirlik Logosu’nu hedefleyen kuruluşlar, WCAG 2.5.7’yi erişilebilirlik denetim kontrol listelerine dahil etmeli, sürükleme işlevselliğiyle oluşturulan tüm etkileşimli bileşenlerin uyumlu alternatifler açısından gözden geçirildiğinden emin olmalı ve uyum kararlarını — vazgeçilmezlik istisnasına ilişkin her türlü iddia dâhil — genelgenin kapsamdaki kurumların yayımlamasını ve güncel tutmasını zorunlu kıldığı Erişilebilirlik Beyanı (Accessibility Statement) kapsamında belgelendirmelidir.