Duraklatma, Durdurma, Gizleme

Kısaca

Ana sayfada kendiliğinden dönen bir duyuru slider'ı, kayan bir haber bandı veya sürekli güncellenen bir veri alanı, sayfanın geri kalanını okumaya çalışan kullanıcının dikkatini sürekli böler. Bazı kullanıcılar için bu, içeriği okumayı imkânsız hâle getirir.

Bu kriter, kendiliğinden başlayan, 5 saniyeden uzun süren ve başka içerikle aynı anda sunulan her hareketli, kayan, yanıp sönen veya kendiliğinden güncellenen içerik için duraklatma, durdurma veya gizleme imkânı ister. Kendiliğinden güncellenen içerikte güncelleme sıklığının ayarlanabilmesi de kabul edilir.

Neleri kapsar?

• Hareketli içerik: Otomatik dönen banner, slider ve carousel bileşenleri, animasyonlar, arka plan videoları.
• Kayan içerik: Kayan haber bantları, duyuru şeritleri.
• Yanıp sönen içerik: Dikkat çekmek için yanıp sönen uyarı ve etiketler.
• Kendiliğinden güncellenen içerik: Döviz, borsa, skor tabloları ve canlı akışlar.
• İstisna: Hareket veya güncelleme, işlevin zorunlu bir parçasıysa (örneğin sınavda geri sayım veya yükleme göstergesi) kapsam dışıdır.
• Kapsam dışı notlar: Saniyede üçten fazla yanıp sönmenin yarattığı sağlık riski bir sonraki kriterin (Üç Kere veya Aşağısı Yanıp Sönme Eşiği) konusudur.

Kimleri etkiler?

Dikkat eksikliği ve hiperaktivite bozukluğu, öğrenme güçlüğü veya bilişsel engeli olan kullanıcılar hareketli içerik varken sayfanın diğer bölümlerine odaklanmakta zorlanır. Az gören ve ekranı büyüten kişiler, kaybolan bir slaytı okuyamadan bir sonrakine geçildiğini görür. Ekran okuyucu kullanıcıları için kendiliğinden güncellenen bölgeler, okudukları içeriğin aniden değişmesine neden olabilir. Vestibüler bozukluğu olan kişiler ise hareket nedeniyle baş dönmesi ve bulantı yaşayabilir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 75–78 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. Duraklatma düğmesi olan slider

Duraklatma düğmesi slider'ın başında, klavyeyle ilk ulaşılan öğe olmalıdır. Odak slider'ın içine girdiğinde veya fare üzerine geldiğinde dönüş de durmalıdır.

<div class="slider">
  <div class="slayt">…</div>
  <div class="slayt">…</div>
</div>
<script>
  setInterval(sonrakiSlayt, 4000);
</script>

<section class="slider" aria-roledescription="carousel"
         aria-label="Belediye duyuruları">
  <button type="button" id="slider-dugme">Duraklat</button>
  <div class="slayt">…</div>
  <div class="slayt">…</div>
</section>

<script>
  const slider = document.querySelector(".slider");
  const dugme = document.getElementById("slider-dugme");
  let zamanlayici = null;
  let kullaniciDurdurdu = false;

  const baslat = () => {
    if (!zamanlayici) zamanlayici = setInterval(sonrakiSlayt, 6000);
  };
  const durdur = () => { clearInterval(zamanlayici); zamanlayici = null; };

  dugme.addEventListener("click", () => {
    kullaniciDurdurdu = !kullaniciDurdurdu;
    kullaniciDurdurdu ? durdur() : baslat();
    dugme.textContent = kullaniciDurdurdu ? "Oynat" : "Duraklat";
  });
  slider.addEventListener("focusin", durdur);
  slider.addEventListener("mouseenter", durdur);
  slider.addEventListener("mouseleave", () => { if (!kullaniciDurdurdu) baslat(); });

  if (!matchMedia("(prefers-reduced-motion: reduce)").matches) baslat();
</script>

2. Kayan haber bandı

marquee öğesi standart dışıdır ve durdurulamaz. Kayan bant gerekiyorsa CSS animasyonu ve bir duraklatma düğmesi kullanın.

<marquee>Yarın 09.00–12.00 arası
Kadıköy'de su kesintisi yapılacaktır.</marquee>

<div class="bant">
  <button type="button" aria-pressed="false" id="bant-dugme">
    Kayan yazıyı durdur
  </button>
  <p class="bant-metin">Yarın 09.00–12.00 arası
    Kadıköy'de su kesintisi yapılacaktır.</p>
</div>

<style>
  .bant-metin { animation: kay 20s linear infinite; }
  .bant.durdu .bant-metin { animation-play-state: paused; }
  @keyframes kay { from { transform: translateX(100%); }
                   to   { transform: translateX(-100%); } }
</style>

<script>
  const bant = document.querySelector(".bant");
  const dugme = document.getElementById("bant-dugme");
  dugme.addEventListener("click", () => {
    const durdu = bant.classList.toggle("durdu");
    dugme.setAttribute("aria-pressed", String(durdu));
  });
</script>

3. Hareket azaltma tercihine uymak

İşletim sisteminde hareketi azalt ayarını açmış kullanıcılar için animasyonlar varsayılan olarak durdurulmalıdır. Bu tek başına kriteri karşılamaz; duraklatma düğmesi yine gerekir.

@media (prefers-reduced-motion: reduce) {
  .bant-metin,
  .slider .slayt {
    animation: none;
    transition: none;
  }
}

4. Canlı güncellenen veri alanı

Döviz kuru veya sıra numarası gibi kendiliğinden güncellenen bir alanda kullanıcı güncellemeleri durdurabilmelidir.

<section aria-labelledby="sira-baslik">
  <h2 id="sira-baslik">Vezne sıra durumu</h2>
  <button type="button" id="guncelleme-dugme" aria-pressed="false">
    Otomatik güncellemeyi durdur
  </button>
  <p id="sira" aria-live="polite">Şu anki numara: 214</p>
</section>

<script>
  const alan = document.getElementById("sira");
  const dugme = document.getElementById("guncelleme-dugme");
  let zamanlayici = setInterval(siraGetir, 10000);

  dugme.addEventListener("click", () => {
    const durdu = dugme.getAttribute("aria-pressed") === "true";
    if (durdu) {
      zamanlayici = setInterval(siraGetir, 10000);
      alan.setAttribute("aria-live", "polite");
    } else {
      clearInterval(zamanlayici);
      alan.setAttribute("aria-live", "off");
    }
    dugme.setAttribute("aria-pressed", String(!durdu));
  });
</script>

5. Hareketli GIF yerine denetimli video

Hareketli GIF dosyaları durdurulamaz. Uzun süren animasyonlar için denetimleri olan, sessiz bir video tercih edin.

<img src="/gorsel/basvuru-adimlari.gif"
     alt="Başvuru adımlarını gösteren animasyon">

<video src="/video/basvuru-adimlari.mp4"
       autoplay muted loop playsinline controls
       aria-label="Başvuru adımlarını gösteren animasyon">
</video>

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct DuyuruSlider: View {
    let duyurular = ["Su kesintisi duyurusu", "Vergi ödeme son günü", "Yeni kütüphane açıldı"]
    @State private var secili = 0
    @State private var oynuyor = true
    @Environment(\.accessibilityReduceMotion) private var hareketAzalt

    var body: some View {
        VStack {
            Button(oynuyor ? "Duraklat" : "Oynat") { oynuyor.toggle() }

            TabView(selection: $secili) {
                ForEach(duyurular.indices, id: \.self) { i in
                    Text(duyurular[i]).tag(i)
                }
            }
            .tabViewStyle(.page)
            .frame(height: 160)
        }
        .onAppear { if hareketAzalt { oynuyor = false } }
        .task(id: oynuyor) {
            while oynuyor && !Task.isCancelled {
                try? await Task.sleep(for: .seconds(6))
                guard oynuyor else { break }
                withAnimation { secili = (secili + 1) % duyurular.count }
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun DuyuruSlider(duyurular: List<String>) {
    val sayfa = rememberPagerState(pageCount = { duyurular.size })
    var oynuyor by remember { mutableStateOf(true) }

    LaunchedEffect(oynuyor) {
        while (oynuyor) {
            delay(6000)
            sayfa.animateScrollToPage((sayfa.currentPage + 1) % duyurular.size)
        }
    }

    Column {
        Button(onClick = { oynuyor = !oynuyor }) {
            Text(if (oynuyor) "Duraklat" else "Oynat")
        }
        HorizontalPager(state = sayfa, modifier = Modifier.height(160.dp)) { i ->
            Text(duyurular[i])
        }
    }
}

Android'de sistem genelindeki "Animasyonları kaldır" ayarı, Compose animasyon sürelerini otomatik olarak kısaltır; ancak delay ile yapılan otomatik geçişleri durdurmaz. Bu nedenle görünür bir duraklatma düğmesi her durumda gereklidir.

Nasıl test edilir?

• Hareketli içeriği listeleyin: Sayfayı açıp 5 saniyeden uzun süren hareket, kayma, yanıp sönme veya güncelleme olup olmadığını gözlemleyin.
• Denetimi bulun ve kullanın: Her biri için duraklatma, durdurma veya gizleme düğmesi var mı? Düğme klavyeyle ve ekran okuyucuyla kullanılabiliyor mu?
• Durdurmanın kalıcılığını kontrol edin: Duraklatılan içerik kendiliğinden yeniden başlıyor mu? (Örneğin odak ayrıldığında.)
• Hareketi azalt ayarıyla deneyin: İşletim sisteminde hareketi azalt ayarını açın; animasyonlar duruyor veya azalıyor mu?
• Otomatik araçların sınırı: Otomatik araçlar marquee ve blink gibi eski öğeleri bulabilir; ancak betikle yapılan hareketleri, sürelerini ve denetim olup olmadığını güvenilir biçimde değerlendiremez. Bu kriter elle test edilmelidir.

Sık yapılan hatalar

• Yalnızca ileri/geri okları sunmak: Slaytlar arasında geçiş yapmak, otomatik dönüşü durdurmaz.
• Duraklatma düğmesini slider'ın sonuna koymak: Klavye kullanıcısı düğmeye ulaşana kadar içerik dönmeye devam eder.
• Fare ayrılınca yeniden başlatmak: Kullanıcının bilinçli olarak durdurduğu içeriğin kendiliğinden yeniden başlaması.
• Hareketli GIF ve Lottie animasyonları: Dekoratif amaçlı olsa bile 5 saniyeyi aşan animasyonlar da kriterin kapsamındadır.
• Canlı bölgeyi sürekli duyurmak: Sık güncellenen alanlar aria-live ile duyurulduğunda ekran okuyucuyu sürekli böler.

Kaynaklar

• Understanding SC 2.2.2: Pause, Stop, Hide (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Carousel, hareketi azaltma, canlı bölge 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.