Duraklatma, Durdurma, Gizleme

Kısaca

Kendiliğinden dönen atlı karıncalar, kayan yazılar, hareketli bannerlar ve kendiliğinden güncellenen akışlar kullanması zor öğelerdir. Dikkat ya da okuma güçlüğü olan kişiler odaklanamaz, az gören kişiler yerini kaybeder, ekran okuyucu kullanıcıları ise içeriğin altlarında değiştiğini duyar.

Bu kriter, kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle birlikte sunulan hareketli, yanıp sönen ya da kayan her bilgi için duraklatmanın, durdurmanın ya da gizlemenin bir yolunun bulunmasını ister. Kendiliğinden güncellenen bilgi için de, zorunlu olmadıkça, aynısı geçerlidir.

Neleri kapsar?

• Hareketli, yanıp sönen, kayan: Beş saniyeden uzun süren atlı karıncalar, kayan yazılar, hareketli bannerlar, arka plan videoları, hareketli GIF'ler ve kendiliğinden kayan metin.
• Kendiliğinden güncellenen: Canlı skorlar, kayan haber şeritleri, borsa fiyatları ve kendiliğinden yenilenen akışlar. Kullanıcılar bunları duraklatabilmeli, durdurabilmeli, gizleyebilmeli ya da sıklığını denetleyebilmelidir.
• Başka içerikle birlikte: Kriter, içerik başka içerikle paralel sunulduğunda geçerlidir. Ekranda tek başına bulunan tam ekran bir animasyon kapsanmaz.
• Mekanizma: İçeriğin başında bulunan ya da klavyeyle ulaşılabilen, duraklatma düğmesi gibi görünür bir kontrol.
• İstisnalar: Etkinlik için zorunlu olan hareket, örneğin bir oyun ya da içeriğin kendisi olan bir animasyon, bir yükleme göstergesi ve yalnızca kullanıcı eyleminden sonra başlayan içerik.
• Kapsam dışı notlar: Saniyede üçten fazla yanıp sönme 2.3.1'dir. Etkileşime yanıt veren hareket 2.3.3'tür (AAA düzeyi). Kendiliğinden çalan ses 1.4.2'dir.

Kimleri etkiler?

Hareketli içeriğin yanındaki içeriğe odaklanamayan dikkat, bilişsel ya da okuma güçlüğü olan kişiler. Yerini kaybedebilen az gören kişiler. Hareketten rahatsız olan vestibüler bozukluğu olanlar. İçerik değiştiğinde okuması kesintiye uğrayan ekran okuyucu kullanıcıları.

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. Hareketli içerik üzerindeki denetim, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.2.2'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.2.2 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. Duraklatma kontrollü bir atlı karınca

Kendiliğinden dönen bir atlı karınca, görünür ve klavyeyle erişilebilir bir duraklatma düğmesi gerektirir.

<div class="atli-karinca" data-autoplay="3000">…</div>

<div class="atli-karinca" aria-roledescription="atlı karınca" aria-label="Öne çıkanlar">
  <button type="button" id="degistir" aria-pressed="false">Slaytları duraklat</button>
  <div class="slaytlar" aria-live="off">…</div>
</div>
<script>
degistir.addEventListener("click", () => {
  const durdu = degistir.getAttribute("aria-pressed") === "true";
  degistir.setAttribute("aria-pressed", String(!durdu));
  degistir.textContent = durdu ? "Slaytları duraklat" : "Slaytları oynat";
  durdu ? donmeyiBaslat() : donmeyiDurdur();
});
</script>

2. Kayan yazı ve kayan metin

Kendiliğinden kayan metinden kaçının. Gerekiyorsa durdurmanın bir yolunu sunun.

<marquee>İndirim bugün bitiyor!</marquee>

<p>İndirim bugün bitiyor!</p>

3. Azaltılmış harekete saygı gösterin

Sistemden hareketi azaltmasını isteyen kullanıcılar için animasyonları kapatın.

.kahraman { animation: yuz 6s infinite; }

.kahraman { animation: yuz 6s infinite; }
@media (prefers-reduced-motion: reduce) {
  .kahraman { animation: none; }
}

4. Arka plan videosu

Kullanıcılara onu duraklatmak için görünür bir kontrol verin ya da döngüye almayın.

<video autoplay muted loop src="arka.mp4"></video>

<video id="arka" autoplay muted loop src="arka.mp4"></video>
<button type="button" onclick="arka.paused ? arka.play() : arka.pause()">
  Arka plan videosunu duraklat
</button>

5. Kendiliğinden güncellenen bilgi

Kullanıcıların canlı güncellemeleri duraklatmasına ya da ne sıklıkla yenilendiğini denetlemesine izin verin.

setInterval(skorlariYenile, 5000);

let zamanlayici = setInterval(skorlariYenile, 5000);
duraklatDugmesi.addEventListener("click", () => {
  clearInterval(zamanlayici);
  zamanlayici = null;
});

6. Hareketli GIF'ler

Beş saniyeden uzun süre dönen bir GIF duraklatma gerektirir. Bunun yerine denetimli bir video kullanın.

<img src="tanitim.gif" alt="Tanıtım">

<video src="tanitim.mp4" autoplay muted loop playsinline controls
       aria-label="Tanıtım"></video>

Mobil için kod örnekleri

Yerel uygulamalarda da hareketli içerik vardır: bannerlar, atlı karıncalar ve animasyonlar. Sistemdeki Hareketi Azalt ayarına saygı gösterin ve beş saniyeden uzun süre kendiliğinden hareket eden her şey için bir duraklatma kontrolü verin.

iOS (SwiftUI)

import SwiftUI

struct AnaBanner: View {
    @Environment(\.accessibilityReduceMotion) private var hareketiAzalt
    @State private var duraklatildi = false

    var body: some View {
        VStack {
            BannerAtliKarinca(otomatikIlerle: !hareketiAzalt && !duraklatildi)

            // Hareketi duraklatmak için görünür bir kontrol
            Button(duraklatildi ? "Banner'ı oynat" : "Banner'ı duraklat") {
                duraklatildi.toggle()
            }
        }
    }
}

Android (Jetpack Compose)

import android.provider.Settings
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.*
import androidx.compose.ui.platform.LocalContext

@Composable
fun AnaBanner() {
    val context = LocalContext.current
    // 0f, sistem ayarlarında animasyonların kapalı olduğu anlamına gelir
    val animasyonAcik = Settings.Global.getFloat(
        context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f
    ) != 0f
    var duraklatildi by remember { mutableStateOf(false) }

    Column {
        BannerAtliKarinca(otomatikIlerle = animasyonAcik && !duraklatildi)
        TextButton(onClick = { duraklatildi = !duraklatildi }) {
            Text(if (duraklatildi) "Banner'ı oynat" else "Banner'ı duraklat")
        }
    }
}

Nasıl test edilir?

• Harekete bakın: Her sayfayı yükleyip izleyin. Beş saniyeden uzun süre kendiliğinden hareket eden, yanıp sönen, kayan ya da güncellenen bir şey var mı?
• Bir kontrol arayın: Görünür bir duraklatma, durdurma ya da gizleme kontrolü var mı? Klavyeyle erişilebiliyor ve bir ekran okuyucu tarafından duyuruluyor mu?
• Güncellemeleri kontrol edin: Canlı akışlar, kayan haber şeritleri ve sayaçlar kendiliğinden yenileniyor mu? Kullanıcılar bunları duraklatabiliyor ya da hızını denetleyebiliyor mu?
• İstisnaları kontrol edin: Hareket gerçekten zorunlu mu, yoksa yalnızca bir yükleme göstergesi mi? Yalnızca kullanıcı eyleminden sonra mı başlıyor?
• Azaltılmış hareketi test edin: Sistemdeki "hareketi azalt" ayarını açın. Sayfa zorunlu olmayan hareketi durduruyor mu?
• Kodu kontrol edin: autoplay, marquee, setInterval, hareketli GIF'leri ve infinite ile CSS animation ifadelerini arayın.
• Mobili kontrol edin: Bannerlar, atlı karıncalar ve animasyonlar Hareketi Azalt ayarına saygı gösteriyor ve bir duraklatma kontrolü sunuyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar yalnızca bazı işaretlemeleri bulur. Bir kişi sayfayı izlemelidir.

Sık yapılan hatalar

• Duraklatma düğmesi olmayan kendiliğinden dönen atlı karıncalar: Bu kriterin en sık görülen ihlali.
• Yalnızca üzerine gelince çıkan ya da gizli duraklatma kontrolleri: Görünür ve klavyeyle erişilebilir olmalıdır.
• Kontrolsüz döngüde arka plan videosu: İçeriğin yanında sonsuza dek hareket eder.
• Durdurma yolu olmadan yenilenen canlı akışlar: Kullanıcılar yerini kaybeder.
• prefers-reduced-motion ayarını yok saymak: Sistem ayarı tam da bunun için vardır.
• Hareketli GIF'ler: Denetimleri yoktur.
• Her hareketi "zorunlu" saymak: Süsleme amaçlı animasyon zorunlu değildir.
• Duyurulmayan bir duraklatma kontrolü: Ona bir ad ve durum verin; örneğin aria-pressed.

Kaynaklar

• Understanding SC 2.2.2: Pause, Stop, Hide (W3C), İngilizce, yeni sekmede açılır
• Carousels Tutorial (W3C WAI), İ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.