İşaretçi Hareketleri

Kısaca

Haritayı iki parmakla yakınlaştırmak, bir kartı sola kaydırarak silmek veya bir şekli çizerek kilidi açmak birçok kullanıcı için doğal hareketlerdir. Ancak tek parmakla, ağızla kullanılan bir çubukla, göz takip cihazıyla veya titreyen bir elle bu hareketleri yapmak zor ya da imkânsız olabilir.

Bu kriter, çok noktalı (birden fazla parmak) veya yol tabanlı (belirli bir yönde ya da şekilde hareket gerektiren) her işlemin, tek noktalı ve yol gerektirmeyen bir yolla da yapılabilmesini ister: tek dokunuş, tıklama, çift tıklama veya uzun basma gibi. Hareketin kendisi işlevin özü ise (örneğin imza çizmek) istisna geçerlidir.

Neleri kapsar?

• Çok noktalı hareketler: Çimdikleyerek yakınlaştırma, iki parmakla döndürme, üç parmakla kaydırma.
• Yol tabanlı hareketler: Belirli bir yönde kaydırma (swipe), sürükleyerek kaydırıcı ayarlama, şekil çizme.
• Alternatif yöntemler: Artı/eksi düğmeleri, ileri/geri okları, menü seçenekleri, sayısal giriş alanları.
• İstisna: Serbest çizim veya imza gibi, işlevin kendisinin yol çizmeyi gerektirdiği durumlar.
• Kapsam dışı notlar: Tarayıcının veya işletim sisteminin kendi hareketleri (örneğin sayfayı kaydırmak) bu kriterin kapsamında değildir. Sürükle-bırakın klavye karşılığı Klavye Erişimi kriterinin konusudur.

Kimleri etkiler?

Tek elini veya tek parmağını kullanabilen kişiler, ağız çubuğu, baş işaretçisi veya göz takip cihazı kullanan motor engelli kullanıcılar çok parmaklı ve hassas yol gerektiren hareketleri yapamayabilir. Titreme yaşayan kullanıcılar kaydırma hareketini istedikleri yönde tamamlamakta zorlanır. Bilişsel engeli olan kişiler için de gizli hareketler yerine görünür düğmeler daha anlaşılırdır.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 95–96 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Harita yakınlaştırma

Çimdikleme ve fare tekerleği ile yakınlaştırma korunabilir; yanına tek tıklamayla çalışan düğmeler eklenmelidir.

<div id="harita"></div>
<!-- Yalnızca çimdikleme ve tekerlekle yakınlaştırma -->

<div class="harita-denetimleri">
  <button type="button" id="yakinlas">Yakınlaştır</button>
  <button type="button" id="uzaklas">Uzaklaştır</button>
</div>
<div id="harita"></div>

<script>
  document.getElementById("yakinlas")
    .addEventListener("click", () => harita.yakinlastir()); // Kendi harita API'niz
  document.getElementById("uzaklas")
    .addEventListener("click", () => harita.uzaklastir());
</script>

2. Kaydırmayla geçilen slider

Kaydırma (swipe) hareketine ek olarak görünür önceki/sonraki düğmeleri sunun.

<section aria-label="Etkinlik fotoğrafları">
  <button type="button" class="onceki">Önceki fotoğraf</button>
  <div class="kaydirilabilir-alan">…</div>
  <button type="button" class="sonraki">Sonraki fotoğraf</button>
</section>

3. Sürüklenerek ayarlanan kaydırıcı

Yerleşik input type="range" tıklamayla, klavyeyle ve dokunarak değiştirilebilir. Özel kaydırıcılar yalnızca sürüklemeyle çalışıyorsa sayısal bir giriş alanı veya artır/azalt düğmeleri ekleyin.

<div class="ozel-kaydirici">
  <div class="tutamak" draggable="true"></div>
</div>

<label for="metrekare">Konut alanı (m²)</label>
<input type="range" id="metrekare" min="30" max="300" step="5" value="90">
<label for="metrekare-sayi">Konut alanını yazın (m²)</label>
<input type="number" id="metrekare-sayi" min="30" max="300" step="5" value="90">

4. Kaydırarak silme

Listede bir öğeyi sola kaydırarak silmek yerine veya buna ek olarak, her öğede görünür bir "Sil" düğmesi bulunmalıdır.

<ul class="bildirimler">
  <li>
    <span>Su faturanız oluşturuldu</span>
    <button type="button">Sil<span class="sr-only">: Su faturanız oluşturuldu</span></button>
  </li>
</ul>

5. İstisna: imza alanı

Elle imza atmak işlevin özüdür ve istisna kapsamındadır. Yine de mümkün olduğunda kullanıcıya imza yerine adını yazma veya e-imza gibi bir seçenek sunmak iyi bir uygulamadır.

<fieldset>
  <legend>Onay yöntemi</legend>
  <input type="radio" id="cizim" name="onay" value="cizim">
  <label for="cizim">Ekrana imza atarak</label>
  <input type="radio" id="yazili" name="onay" value="yazili">
  <label for="yazili">Adımı yazarak onaylıyorum</label>
</fieldset>

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct KrokiGoruntuleyici: View {
    @State private var olcek: CGFloat = 1

    var body: some View {
        VStack {
            Image("imar-krokisi")
                .resizable()
                .scaledToFit()
                .scaleEffect(olcek)
                .gesture(
                    MagnificationGesture()
                        .onChanged { olcek = min(max($0, 1), 4) }
                )
                .accessibilityLabel("İmar krokisi")

            // Çimdikleme hareketine tek dokunuşlu alternatif
            HStack {
                Button("Uzaklaştır") { olcek = max(olcek - 0.5, 1) }
                Button("Yakınlaştır") { olcek = min(olcek + 0.5, 4) }
            }
        }
    }
}

Android (Jetpack Compose)

Kaydırarak silme hareketi korunurken her satıra görünür bir silme düğmesi ve ekran okuyucu için özel eylem eklenir.

import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.*

@Composable
fun BildirimSatiri(metin: String, onSil: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .semantics {
                customActions = listOf(CustomAccessibilityAction("Sil") { onSil(); true })
            },
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(metin, modifier = Modifier.weight(1f))
        IconButton(onClick = onSil) {
            Icon(Icons.Filled.Delete, contentDescription = "Sil: $metin")
        }
    }
}

Nasıl test edilir?

• Hareketleri listeleyin: Sayfada veya uygulamada çimdikleme, kaydırma, döndürme, sürükleme ve çizim gerektiren işlemleri belirleyin.
• Tek parmakla deneyin: Her işlemi yalnızca tek dokunuş veya tek tıklamayla yapmaya çalışın. Aynı sonuca ulaşabiliyor musunuz?
• Fare ile deneyin: Masaüstünde dokunmatik hareketlerin fare karşılıkları da tek tıklamayla çalışan seçenekler sunuyor mu?
• Otomatik araçların sınırı: Otomatik araçlar hareket tabanlı etkileşimleri ve bunların alternatiflerini tespit edemez. Bu kriter tamamen elle test edilmelidir.

Sık yapılan hatalar

• Yalnızca kaydırmayla çalışan carousel: Mobil görünümde önceki/sonraki düğmelerinin gizlenmesi.
• Harita denetimlerini kaldırmak: Tasarımı sadeleştirmek için yakınlaştırma düğmelerinin kapatılması.
• Gizli hareketler: Silme veya arşivleme gibi işlevlerin yalnızca kaydırmayla erişilebilir olması.
• Özel kaydırıcılar: Yerleşik range yerine yalnızca sürüklemeyle çalışan bileşenler kullanmak.
• Tarayıcı yakınlaştırmasını engellemek: user-scalable=no kullanmak bu kriteri doğrudan ihlal etmez ama kullanıcıları ciddi biçimde kısıtlar ve başka erişilebilirlik sorunlarına yol açar.

Kaynaklar

• Understanding SC 2.5.1: Pointer Gestures (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — İşaretçi, çok noktalı hareket, yol tabanlı hareket ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.