WCAG 2.5.1: İşaretçi Hareketleri

Bu Kuralın Anlamı

WCAG 2.5.1 İşaretçi Hareketleri, bir web sayfasındaki herhangi bir işlevselliğin çok noktalı hareketlere (iki veya daha fazla eşzamanlı dokunma noktası kullanan hareketler; örneğin yakınlaştırmak için iki parmakla sıkıştırma veya üç parmakla kaydırma) ya da yol tabanlı hareketlere (işaretçinin izlediği yolun önemli olduğu hareketler; örneğin kaydırma, belirli bir rota boyunca sürükleme veya bir şekil çizme) dayanması durumunda, aynı işlevselliğin yol tabanlı bir hareket gerektirmeyen tek bir işaretçi kullanılarak da çalıştırılabilir olmasını zorunlu kılar. Tek bir işaretçi, tek bir noktada çalışan herhangi bir girdidir — buna tek parmak dokunuşu, fare tıklaması, kalem dokunuşu ve benzeri girdiler dahildir.

Pratik açıdan, eğer karuseliniz kullanıcı yatay olarak kaydırdığında slaytları ilerletiyorsa, tek bir dokunuş veya tıklama ile etkinleştirilebilen ileri ve geri düğmeleri de sağlamalısınız. Özel harita bileşeniniz yakınlaştırma veya uzaklaştırma için iki parmakla sıkıştırma hareketine yanıt veriyorsa, yalnızca tek bir dokunuş gerektiren yakınlaştırma ve uzaklaştırma kontrolleri de sağlamalısınız. Bu ölçüt çok noktalı veya yol tabanlı hareketleri yasaklamaz — yalnızca bunlara her zaman eşdeğer bir tek işaretçi alternatifinin bulunmasını şart koşar.

Resmî WCAG istisnası şunu belirtir: gereklilik, çok noktalı veya yol tabanlı hareket olmazsa olmaz olduğunda uygulanmaz. Olmazsa olmaz bir hareket, kaldırılması hâlinde bilgi veya işlevselliği temelden değiştirecek ve metin ya da başka bir alternatifin aynı amacı gerçekleştiremeyeceği bir harekettir. Serbest el imza bileşeni veya çizilen yolun bizzat çıktının kendisi olduğu bir çizim uygulaması olmazsa olmaz kapsamına girer. Ancak, gezinme, karusel, harita ve kaydırıcı etkileşimlerinin çok büyük çoğunluğu bu istisna kapsamına girmez; çünkü bunlar, bilgi kaybı olmaksızın basit dokunma/tıklama alternatifleriyle çoğaltılabilir.

Bu ölçüt tüm işaretçi girdileri için geçerlidir: dokunmatik ekranlar, fare, kalem, göz takibi işaretçileri ve diğer tüm işaretleme aygıtları. WCAG 2.2 kapsamında Seviye A gereksinimidir; yani asgari uyum için karşılanması gereken temel erişilebilirlik gereksinimi olarak kabul edilir.

Başarılı bir uygulama, her hareket bağımlı işlevi tek noktalı, yol tabanlı olmayan bir etkinleştirme ile gerçekleştirmek için en az bir mekanizma sağlar — genellikle görünür bir düğme, bağlantı veya başka bir odaklanabilir kontrol. Başarısız bir uygulama ise bir işlevi gerçekleştirmek için yalnızca kaydırma, sıkıştırma, açma, döndürme veya çizilmiş yol hareketine dayanır ve eşdeğer bir tek işaretçi alternatifi sunmaz.

Neden Önemlidir

Motor bozukluklar, dünya nüfusunun önemli bir bölümünü etkiler. Parkinson hastalığı, esansiyel tremor, serebral palsi, inme kaynaklı hemipleji, uzuv farklılıkları ve tekrarlayan zorlanma yaralanmaları gibi durumlar, kullanıcıların hassas çok noktalı veya yol tabanlı hareketleri güvenilir şekilde gerçekleştirmesini zorlaştırabilir veya imkânsız hâle getirebilir. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık 1,3 milyar insan önemli bir engellilik biçimiyle yaşamaktadır ve motor ve hareket bozuklukları en yaygın kategoriler arasındadır. Web arayüzleri yalnızca karmaşık hareketlere dayandığında, bu kullanıcılar, gören ve engeli olmayan kullanıcıların doğal kabul ettiği işlevsellikten tamamen dışlanmış olur.

Somut bir gerçek dünya senaryosunu düşünün: esansiyel tremoru olan bir kullanıcı, bir tablet üzerinden bir Türk e-ticaret sitesinde gezinmektedir. Ürün görsel galerisi, fotoğraflar arasında geçiş için yalnızca kaydırma hareketi kullanmaktadır. Kullanıcı temiz bir yatay kaydırma hareketini güvenilir şekilde gerçekleştirememektedir — tremoru, yanlışlıkla dokunmalara, çapraz hareketlere veya istemeden çok parmaklı dokunuşlara neden olur. Önceki/sonraki düğmeleri olmadan, ek ürün fotoğraflarını görüntüleyemez ve satın alma işlemini tamamen yarıda bırakabilir. İki basit ok düğmesi eklemek, geliştirme ekibine dakikalar kaybettirir ama bu kullanıcı için tam bir engeli ortadan kaldırır.

Motor bozuklukların ötesinde, bu ölçüt aynı zamanda tek işaretçiyi taklit eden üst uzuv protezleri veya tek anahtarlı erişim cihazları kullanan kullanıcılar, döndürmenin veya çoklu dokunmanın mekanik olarak pratik olmadığı tekerlekli sandalyeye monte cihazları kullanan kullanıcılar ve karmaşık dokunma hareketlerini sezgisel bulmayan veya öğrenmekte zorlanan yaşlı yetişkinler için de faydalıdır. Fare veya dokunmatik olmayan kalemle cihaz kullanan kullanıcılar da doğrudan etkilenir — bu giriş yöntemleri doğası gereği tek işaretçidir ve çok noktalı hareketleri hiç gerçekleştiremez.

Kullanılabilirlik ve iş açısından bakıldığında, açık tek işaretçi kontrolleri (düğmeler, bağlantılar) sağlamak, tüm kullanıcılar için keşfedilebilirliği artırır, bilişsel yükü azaltır ve görev tamamlama oranları ile dönüşüm metriklerine olumlu katkıda bulunabilir. Arama motorları da düğme odaklı gezinmeyi, hareket odaklı etkileşimlere kıyasla daha güvenilir şekilde ayrıştırıp takip edebilir; bu da taranabilir gezinme desenleri için ikincil SEO faydaları sunar.

İlgili Axe-core Kuralları

WCAG 2.5.1, manuel test gerektirir; çünkü otomatik araçlar, hareket bağımlı bir davranışın tek işaretçi alternatifine sahip olup olmadığını güvenilir şekilde tespit edemez. Bu ölçüte doğrudan karşılık gelen otomatik bir axe-core kuralı yoktur. Otomatik tespitin yetersiz olmasının nedenleri şunlardır:

• Manuel test gerekli — hareket tespiti: Otomatik tarayıcılar statik DOM yapısını ve hesaplanmış stilleri analiz eder. JavaScript olay dinleyicilerinin çalışma zamanındaki davranışını, bir touchstart/touchmove/touchend işleyicisinin yol bağımlı bir kaydırma mı yoksa yalnızca bir dokunma mı uyguladığını ayırt edecek şekilde gözlemleyemezler. Bir tarayıcı, dokunma olaylarının var olduğunu görür ama ortaya çıkan işlevselliğin tek işaretçi alternatifiyle de sunulup sunulmadığını belirleyemez. Bu, bir insan testçinin arayüzle hem hareket tabanlı hem de tek işaretçi yöntemlerle etkileşime geçmesini ve mevcut işlevselliği karşılaştırmasını gerektirir.
• Manuel test gerekli — eşdeğerlik doğrulaması: Bir araç çok noktalı bir hareket dinleyicisinin var olduğunu işaretleyebilse bile, sağlanan bir düğme veya bağlantının işlevsel olarak eşdeğer sonuçlar elde edip etmediğini değerlendiremez. Eşdeğerliği doğrulamak — alternatifin aynı sonucu tetiklediğini, görünür ve erişilebilir olduğunu ve ek bir adımın arkasına gizlenmediğini teyit etmek — ölçütün amacından haberdar insan yargısı gerektirir.
• Manuel test gerekli — olmazsa olmaz hareket istisnası: Bir hareketin “olmazsa olmaz” istisnası kapsamına girip girmediğini belirlemek, hiçbir otomatik kuralın güvenilir şekilde değerlendiremeyeceği, uygulamanın amacına dair bağlamsal bir anlayış gerektirir.

Testçiler, hangi öğelere dokunma veya işaretçi olay işleyicilerinin eklendiğini belirlemek için tarayıcı geliştirici araçlarını kullanmalıdır (Chrome DevTools’ta bir öğeye sağ tıklayın, “İncele”yi seçin, ardından “Event Listeners” sekmesini görüntüleyin) ve ardından tek işaretçi alternatiflerinin varlığını ve eşdeğerliğini manuel olarak doğrulamalıdır.

Nasıl Test Edilir

1. Temel olarak otomatik bir tarama çalıştırın: Sayfayı taramak için axe DevTools, Lighthouse veya Accsible bileşeninin yerleşik denetimini kullanın. Her ne kadar 2.5.1’e doğrudan karşılık gelen bir kural olmasa da, tarama sonuçları manuel inceleme için bağlam sağlayan ilgili sorunları (örneğin odaklanabilir kontrollerin eksikliği) işaretleyebilir. Klavye veya işaretçi desteği eksik olarak işaretlenen etkileşimli öğeleri not edin.
2. Hareket bağımlı işlevselliği belirleyin: Sayfayı bir dokunmatik cihazda (veya Chrome DevTools’ta tarayıcı cihaz öykünmesini kullanarak — cihaz araç çubuğunu açın ve simüle edilmiş dokunma ile etkileşime geçin) manuel olarak keşfedin. Karuseller, kaydırıcılar, haritalar, akordeonlar, görsel galerileri, kaydırılabilir paneller, sürükle-bırak arayüzleri, çizim araçları ve dokunma hareketlerine yanıt veren diğer bileşenleri arayın. Kaydırma, sıkıştırma, döndürme veya diğer yol tabanlı ya da çok noktalı hareketlerle tetiklenen her işlevi belgeleyin.
3. Tek işaretçi eşdeğerlerini deneyin: Belirlenen her hareket bağımlı işlev için, aynı işlevi yalnızca tek dokunuşlarla (veya masaüstünde fare tıklamalarıyla) gerçekleştirmeye çalışın. Aynı sonucu tetikleyen düğmeler, oklar veya bağlantılar gibi görünür kontrollerin olup olmadığını kontrol edin. Bu kontrolleri fare, klavye (Sekme ile odaklanma, Enter/Boşluk ile etkinleştirme) ve ekran okuyucu kullanarak çalıştırmayı deneyin.
4. Ekran okuyucu doğrulaması (NVDA + Firefox): NVDA ve Firefox’u açın. Sekme ve ok tuşlarını kullanarak etkileşimli bileşenler arasında gezinin. Hareket tabanlı işlevler için tek işaretçi kontrollerin (düğmeler, bağlantılar) ekran okuyucu tarafından duyurulduğunu, klavye ile erişilebilir olduğunu ve etkinleştirildiğinde beklenen sonucu ürettiğini doğrulayın.
5. Ekran okuyucu doğrulaması (VoiceOver + iOS’ta Safari): Bir iPhone veya iPad’de VoiceOver’ı etkinleştirin. Öğeler arasında gezinmek için bir parmakla sağa kaydırın. Hareketlere tek işaretçi alternatifleri sağlayan tüm kontrollerin VoiceOver’ın dokunma hareketiyle erişilebilir ve etkinleştirilebilir olduğunu ve doğru sonucu ürettiklerini doğrulayın.
6. Ekran okuyucu doğrulaması (JAWS + Chrome): Windows’ta JAWS’ı Chrome ile kullanın. Etkileşimli bileşenler arasında Sekme ile gezinin ve hareket alternatifli kontrollerin odaklanabilir, doğru etiketlenmiş ve işlevsel olduğunu doğrulayın.
7. Olmazsa olmaz istisnasını değerlendirin: Tek işaretçi alternatifi olmayan her hareket bağımlı işlev için, hareketin içerik veya işlevsellik açısından gerçekten olmazsa olmaz olup olmadığını belirleyin. İstisnayı gerekçelendiremiyorsanız, bunu bir başarısızlık olarak kaydedin. Bulgularınızı ekran görüntüleri ve yeniden üretme adımlarıyla belgeleyin.

Nasıl Düzeltilir

Yalnızca Kaydırma ile Gezinilen Görsel Karusel — Hatalı

<!-- Carousel that only listens for touch swipe events, no button controls -->
<div id='carousel' class='carousel'>
  <div class='slides'>
    <img src='product-1.jpg' alt='Product view 1'>
    <img src='product-2.jpg' alt='Product view 2'>
    <img src='product-3.jpg' alt='Product view 3'>
  </div>
</div>
<!-- JavaScript only adds touchstart/touchend swipe detection -->
<script>
  // Only gesture-based: no keyboard or click alternative
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchend', handleSwipeEnd);
</script>

Yalnızca Kaydırma ile Gezinilen Görsel Karusel — Doğru

<!-- Carousel with both swipe gesture support AND visible single-pointer button controls -->
<div id='carousel' class='carousel' role='region' aria-label='Product images'>
  <button id='prev-btn' aria-label='Previous image' onclick='prevSlide()'>
    &lsaquo; Previous
  </button>
  <div class='slides'>
    <img src='product-1.jpg' alt='Product view 1'>
    <img src='product-2.jpg' alt='Product view 2'>
    <img src='product-3.jpg' alt='Product view 3'>
  </div>
  <button id='next-btn' aria-label='Next image' onclick='nextSlide()'>
    Next &rsaquo;
  </button>
</div>
<!-- Swipe is retained as an enhancement; buttons provide the single-pointer alternative -->
<script>
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchend', handleSwipeEnd);
  function prevSlide() { /* move to previous slide */ }
  function nextSlide() { /* move to next slide */ }
</script>

Yalnızca Sıkıştırarak Yakınlaştırma Olan Harita — Hatalı

<!-- Map widget that only responds to two-finger pinch gestures for zoom -->
<div id='map' class='map-widget'></div>
<script>
  // Only multipoint pinch gesture is wired up; no zoom buttons provided
  map.addEventListener('touchstart', detectPinch);
  map.addEventListener('touchmove', handlePinchZoom);
</script>

Yalnızca Sıkıştırarak Yakınlaştırma Olan Harita — Doğru

<!-- Map widget with pinch-to-zoom PLUS visible zoom controls for single-pointer access -->
<div class='map-container' role='application' aria-label='Interactive map'>
  <div id='map' class='map-widget'></div>
  <div class='map-controls'>
    <!-- Single-pointer alternatives for zoom in and out -->
    <button type='button' aria-label='Zoom in' onclick='mapZoomIn()'>+</button>
    <button type='button' aria-label='Zoom out' onclick='mapZoomOut()'>&minus;</button>
  </div>
</div>
<script>
  map.addEventListener('touchstart', detectPinch);
  map.addEventListener('touchmove', handlePinchZoom);
  function mapZoomIn() { /* increase zoom level by one step */ }
  function mapZoomOut() { /* decrease zoom level by one step */ }
</script>

Yalnızca Sürükleme Yolu Hareketiyle Çalışan Aralık Kaydırıcısı — Hatalı

<!-- Custom price range slider that only works by dragging a thumb along a track -->
<div class='price-slider' id='priceSlider'>
  <div class='track'>
    <div class='thumb' id='sliderThumb'></div>
  </div>
</div>
<!-- No keyboard support, no input field, no increment/decrement buttons -->

Yalnızca Sürükleme Yolu Hareketiyle Çalışan Aralık Kaydırıcısı — Doğru

<!-- Use the native <input type='range'> which provides built-in keyboard and single-pointer support -->
<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'
  aria-label='Maximum price in Turkish lira'
  oninput='document.getElementById("priceValue").textContent = this.value'
>
<!-- Native range input supports click, tap, keyboard arrow keys, and touch drag --
     covering all single-pointer and path-based interaction needs natively -->

Yaygın Hatalar

• Önceki/sonraki düğme kontrolleri olmadan yalnızca kaydırma ile çalışan karuseller sağlamak: Birçok karusel kütüphanesi yalnızca hareket desteğiyle gelir; geliştiricilerin tek işaretçi alternatifi sağlamak için gezinme düğmelerini açıkça yapılandırıp göstermesi gerekir.
• Gezinme düğmelerini CSS medya sorguları ile dokunmatik cihazlarda gizlemek: Yaygın bir desen, ok düğmelerini dokunmatik cihaz olduğu varsayılan ekranlarda gizler (örneğin @media (pointer: coarse)), böylece dokunmatik ekranlarda bile buna ihtiyaç duyan motor engelli kullanıcılar için tek işaretçi alternatifi ortadan kalkar.
• Harita yakınlaştırması için yalnızca iki parmakla sıkıştırma hareketine güvenmek ve yakınlaştırma düğmeleri sunmamak: Üçüncü taraf harita gömülüleri (özel uygulamalar) sıklıkla yakınlaştırma kontrollerini atlar ve sıkıştırmayı tek yakınlaştırma mekanizması olarak bırakır.
• Alternatif eylem düğmesi olmadan silmek veya seçenekleri göstermek için kaydırma desenleri kullanmak: Web uygulamalarındaki liste öğeleri, yalnızca yatay kaydırma ile silme veya eylem seçeneklerini gösteriyorsa, kaydırmayı güvenilir şekilde yapamayan kullanıcılar için eşdeğer bir dokunma temelli mekanizma sunmamış olur.
• Yeniden sıralama için klavye veya tıklama temelli alternatif olmayan özel sürükle-bırak arayüzleri: Sürükleme etkileşimleri doğası gereği yol tabanlıdır; yukarı/aşağı düğmeleri veya kes-yapıştır modeli gibi alternatif bir mekanizma sağlamamak, bu ölçütün ihlali anlamına gelir.
• Çizim veya imza bileşenlerinin, çizilen yolun çıktının kendisi olmadığı varsayımıyla kullanılması: Geliştiriciler bazen, aslında yalnızca bir kullanıcı arayüzü kontrolü olan bileşenler (örneğin içeriği açmak için kullanılan bir hareket kilidi deseni) için, gerçek serbest el giriş araçları değilken, yanlışlıkla “olmazsa olmaz” istisnasına başvurur.
• Tek işaretçi alternatif kontrolleri görünür görüntü alanının dışında veya varsayılan olarak daraltılmış durumda yerleştirmek: Eşdeğer düğmeler DOM’da mevcut olsa bile, görsel olarak gizlenmişlerse veya ortaya çıkmaları için ek bir etkileşim gerekiyorsa, algılanabilir ve kullanılabilir tek işaretçi alternatifi gereksinimini tam olarak karşılamazlar.
• İşaretçi olaylarını yakalayan ve varsayılan davranışı engelleyen hareket kütüphaneleri uygulamak: Dokunma olaylarında event.preventDefault() çağıran kütüphaneler, tarayıcının kendi tek işaretçi etkileşimlerini ve kaydırmasını istemeden engelleyebilir ve yalnızca hareket ölçütüyle sınırlı kalmayan beklenmedik başarısızlıklara yol açabilir.
• Yalnızca hareket alanına aria-label eklemenin yeterli olduğunu varsaymak: Bir kaydırma alanını etiketlemek, tek işaretçi alternatifi sağlamaz — yalnızca ekran okuyucu kullanıcılarına alanı tanımlar; bu kullanıcılar, hareket desteği olmadan yine de onu çalıştıramaz.
• Gerçek cihazlarda veya dokunma simülasyonu ile test etmemek: Yalnızca masaüstünde fare ile test yapan geliştiriciler, bir özelliğin mobilde yalnızca hareketle çalıştığını hiç fark etmeyebilir; çünkü masaüstünde fare tıklaması yedek olarak çalışırken, yalnızca dokunma için yazılmış kod yolunda tıklama eşdeğeri bulunmayabilir.

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

21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, Türkiye’de faaliyet gösteren geniş bir yelpazedeki kamu ve özel sektör kuruluşları için zorunlu web ve mobil erişilebilirlik yükümlülükleri getirmektedir. Genelge, WCAG 2.2’yi normatif teknik standart olarak benimsemekte ve tüm Seviye A başarı ölçütlerini — WCAG 2.5.1 İşaretçi Hareketleri dâhil — yasal olarak zorunlu asgari gereksinimler hâline getirmektedir.

Genelge kapsamındaki uyum takvimi kademelidir: kamu kurum ve kuruluşlarının, genelgenin yürürlüğe girmesinden itibaren bir yıl içinde uyumu sağlaması gerekirken, düzenleme kapsamındaki özel sektör kuruluşlarının tam uyuma ulaşmak için iki yıllık bir süresi vardır. Uyum sağlamamak, ilgili denetleyici otoriteler tarafından düzenleyici inceleme ve yaptırım riskini beraberinde getirir.

Genelge kapsamındaki kuruluşlar, Türk dijital hizmet sağlayıcılarının geniş bir kesimini içerir. Tüm idari kademelerdeki kamu kurumları ve bunların bağlı kuruluşları kapsam dâhilindedir. Özel sektörde ise genelge; e-ticaret platformları ve pazar yerleri, bankalar ve finans kuruluşları, özel hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel yolcu taşımacılığı şirketleri ve Millî Eğitim Bakanlığı (MoNE) izniyle faaliyet gösteren özel okullar için geçerlidir.

Bu kuruluşlar için WCAG 2.5.1’in doğrudan ve pratik sonuçları vardır. Türk e-ticaret siteleri sıklıkla hareket odaklı ürün görsel galerileri, kaydırma temelli kategori gezinmesi ve sıkıştırarak yakınlaştırma yapan ürün görüntüleyicileri kullanır — bunların tümü artık tek işaretçi alternatiflerine sahip olmalıdır. Hareket temelli kimlik doğrulama desenleri veya sürükleme temelli işlem arayüzleri kullanan bankacılık ve finans uygulamaları denetlenmeli ve iyileştirilmelidir. Sıkıştırarak yakınlaştırma kullanan harita tabanlı klinik bulucu içeren sağlık portalları, yakınlaştırma düğmeleri sağlamalıdır. Kaydırma temelli tarife seçicileri olan telekom self-servis portalları, dokunma temelli kontroller eklemelidir.

Türkiye’de faaliyet gösteren kuruluşlara, WCAG 2.5.1’i erişilebilirlik denetim kontrol listelerine derhal dahil etmeleri şiddetle tavsiye edilir; zira bu ölçütten etkilenen hareket etkileşim desenleri, modern duyarlı web tasarımı ve mobil öncelikli geliştirmede yaygındır — ancak çoğunluk kullanıcı için düzgün çalışıyor gibi göründükleri için sıklıkla gözden kaçarlar. Bu ölçütü, WCAG 2.2 Seviye A uyum programının bir parçası olarak proaktif şekilde ele almak, hem 2025/10 sayılı Cumhurbaşkanlığı Genelgesi kapsamında yasal bir yükümlülük hem de motor bozukluğu olan Türk kullanıcılar için dijital kapsayıcılıkta anlamlı bir iyileştirmedir.