İşaretçi Hareketleri

Kısaca

İki parmakla sıkıştırmak, belirli bir yönde kaydırmak ya da bir şekli izlemek birçok kişi için zor, hatta imkânsızdır. Titremesi olan, baş işaretçisi ya da kalem kullanan ya da yalnızca tek eli boşta olan biri bu hareketleri yapamayabilir. Bir işlev yalnızca böyle bir hareketle yapılabiliyorsa, bu kişilere kapalıdır.

Bu kriter, çok noktalı ya da yol tabanlı hareketler kullanan tüm işlevlerin, hareket zorunlu olmadıkça, yol tabanlı bir hareket olmadan tek bir işaretçiyle de kullanılabilmesini ister. Pratikte: sıkıştırma ya da kaydırma sunuyorsanız, bir düğme ya da dokunma da sunun.

Neleri kapsar?

• Çok noktalı hareketler: Birden fazla temas noktası gerektiren hareketler; iki parmakla sıkıştırma ya da bölünmüş dokunma gibi. Tek işaretçili bir alternatif gerekir.
• Yol tabanlı hareketler: Hareketin izlediği yolun önemli olduğu hareketler; belirli yönde kaydırma, fiske ya da bir şekli çizme gibi. Bunların da basit bir alternatifi olmalıdır.
• Yol tabanlı olmayanlar: Yalnızca başlangıç ve bitiş noktalarının önemli olduğu basit sürükleme 2.5.7 kapsamındadır. İşaretçi kaydırma çubuğundan çıkınca düğmesi bırakılan bir kaydırıcı yol tabanlı sayılabilir.
• Alternatif: Aynı şeyi yapan bir düğme, dokunma ya da menü (G215); örneğin sıkıştırarak yakınlaştırılan bir haritanın yanında artı ve eksi düğmeleri ya da kaydırıcı çubuğuna tek dokunuş (G216).
• Zorunlu hareketler: Hareket kaldırıldığında işlev özünde değişiyorsa zorunludur ve kapsam dışıdır; imza girmek gibi.
• Kapsam dışı: İşletim sistemine, tarayıcıya ya da yardımcı teknolojiye ait hareketler; sistem kaydırmaları, tarayıcıda geri hareketleri ve ekran okuyucu gezinmesi gibi. Sayfanın kendi uyguladığı sıkıştırarak yakınlaştırma kapsamdadır.
• Başka kriterler: Sürükleme 2.5.7'dir. Yalnızca klavye desteği yeterli değildir; o 2.1.1 kapsamındadır.

Kimleri etkiler?

Titremesi, sınırlı el becerisi ya da hareket engeli olduğu için hassas çok parmaklı ya da yol tabanlı hareketler yapamayan kişiler. Baş işaretçisi, ağız çubuğu, kalem, iz topu ya da göz izleme sistemi kullananlar. Cihazı tek elle ya da sabit bir tutucuda kullananlar.

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. Basit 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.1'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. 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ü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. 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 EAA ile ilgili uygunluk karinesi sağlayacaktır. 2.5.1 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

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. Düğmeli sıkıştırarak yakınlaştırma

Sayfa yakınlaştırmayı sıkıştırma hareketiyle uyguluyorsa, sıkıştıramayanlar için düğmeler ekleyin.

map.addEventListener("touchmove", handlePinchZoom); // yalnızca sıkıştırma

<div id="map">…</div>
<button type="button" id="zoom-in" aria-label="Yakınlaştır">+</button>
<button type="button" id="zoom-out" aria-label="Uzaklaştır">−</button>
<script>
zoomIn.addEventListener("click", () => map.zoomBy(1));
zoomOut.addEventListener("click", () => map.zoomBy(-1));
</script>

2. Kaydırarak kullanılan bir slayt gösterisi

Kaydırma yol tabanlı bir harekettir. Önceki ve sonraki düğmeleri sunun.

<div class="carousel" data-swipe="true">…</div>

<div class="carousel">
  <button type="button" aria-label="Önceki slayt">‹</button>
  <div class="slides">…</div>
  <button type="button" aria-label="Sonraki slayt">›</button>
</div>

3. Kaydırarak silme

Aynı eylem için görünür bir kontrol sağlayın.

row.addEventListener("swipeleft", () => deleteItem(row));

<li>
  Fatura 0042
  <button type="button" aria-label="Fatura 0042'yi sil">Sil</button>
</li>

4. Tek dokunuşla çalışan bir kaydırıcı

Kullanıcıların değeri çubuğa dokunarak ayarlamasına izin verin ya da bir sayı alanı ekleyin (G216).

<div class="slider" data-needs-drag="true"></div>

<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">

5. Yalnızca kısayol olan bir hareket

Aynı işlev tek işaretçili kontrollerle de sunuluyorsa hareket kalabilir.

canvas.addEventListener("pointermove", detectCircleGesture); // yenilemenin tek yolu

<button type="button" id="refresh">Yenile</button>
<!-- Daire hareketi isteğe bağlı kısayol olarak kalır -->

6. İmza alanı: zorunlu istisna

İmza çizmek doğası gereği yol tabanlıdır, bu yüzden kapsam dışıdır. Mümkünse başka bir yol da sunun; örneğin adı yazmak.

<canvas id="signature"></canvas>

<canvas id="signature" aria-label="İmzanızı çizin"></canvas>
<label for="typed">Ya da adınızı soyadınızı yazın</label>
<input id="typed">

Mobil için kod örnekleri

Mobilde bu hareketler çok yaygındır: sıkıştırma, çok parmaklı kaydırmalar, kaydırma eylemleri. Her biri için bir düğme ya da menü öğesi sunun ve alternatifi ekran okuyuculara özel eylem olarak açın.

iOS (SwiftUI)

import SwiftUI

struct InvoiceRow: View {
    let title: String
    var onDelete: () -> Void

    var body: some View {
        HStack {
            Text(title)
            Spacer()
            // Kaydırma eylemine basit, görünür bir alternatif
            Button("Sil", role: .destructive, action: onDelete)
        }
        .swipeActions(edge: .trailing) {
            Button("Sil", role: .destructive, action: onDelete)
        }
        // VoiceOver kullanıcıları eylemi eylem rotorunda da bulur
        .accessibilityAction(named: "Sil", onDelete)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics

@Composable
fun InvoiceRow(title: String, onDelete: () -> Unit) {
    // Kaydırarak kapatma hareketi kalabilir, ama görünür bir kontrol de ekleyin
    Row(
        modifier = Modifier.semantics {
            customActions = listOf(CustomAccessibilityAction("Sil") { onDelete(); true })
        }
    ) {
        Text(title)
        TextButton(onClick = onDelete) { Text("Sil") }
    }
}

Nasıl test edilir?

• Hareketleri listeleyin: Üründeki tüm sıkıştırma, çok parmaklı dokunma, kaydırma, fiske, döndürme ve şekil çizme hareketlerini bulun.
• Alternatifi arayın: Her biri için aynı işi görünür bir kontrole tek dokunuş ya da tıklamayla yapmanın bir yolu var mı?
• Tek parmakla deneyin: Tek parmak, kalem ya da fare tıklaması kullanın. Tüm görevleri tamamlayabiliyor musunuz?
• Yakınlaştırma ve haritaları kontrol edin: Yakınlaştırılabilen bir görselin ya da haritanın yakınlaştırma düğmeleri var mı?
• Kaydırma eylemlerini kontrol edin: Kaydırarak silme, arşivleme ya da slayt kaydırmanın düğme ya da menü karşılığı var mı?
• İstisnaları kontrol edin: Kalan bir hareket gerçekten zorunlu mu, imza atmak gibi?
• Mobili kontrol edin: VoiceOver ve TalkBack kullanıcıları alternatif eylemlere ulaşıyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar hareketleri algılayamaz. Etkileşimleri bir kişi gözden geçirmelidir.

Sık yapılan hatalar

• Yakınlaştırmanın tek yolunun sıkıştırma olması: Artı ve eksi düğmeleri ekleyin (F105).
• İçerikte gezinmenin tek yolunun kaydırma olması: Görünür sonraki ve önceki kontrolleri ekleyin.
• Gizli kaydırma eylemleri: Yalnızca sola kaydırarak yapılabilen yıkıcı bir eylem.
• Temel özellikler için iki parmaklı hareketler: Birçok kullanıcının yalnızca bir parmağı ya da işaretçisi vardır.
• Hassas sürükleme gerektiren kaydırıcı: Çubuğa dokunmaya ya da bir metin alanına izin verin.
• Klavye desteğinin yeterli sanılması: Ayrı bir kriterdir; işaretçi kullanıcılarının da basit bir alternatife ihtiyacı vardır.
• Her hareketi zorunlu saymak: Yalnızca kaldırıldığında işlevi değiştiren hareket zorunludur.
• Sistem hareketlerinin üstüne eklediğiniz hareketleri unutmak: Özel sıkıştırma ve kaydırma işleyicileri kapsamdadır.

Kaynaklar

• Understanding SC 2.5.1: Pointer Gestures (W3C), İngilizce, yeni sekmede açılır
• G215: Providing controls to achieve the same result as path based or multipoint gestures (W3C), İngilizce, yeni sekmede açılır
• F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative (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.