Bu kural ne anlama geliyor

WCAG 2.2.2, kullanıcıların hareket eden, yanıp sönen, kayan ve otomatik güncellenen içerik üzerinde kontrol sahibi olmasını gerektirir. Kuralun iki kısmı vardır: (1) otomatik olarak başlayan, beş saniyeden fazla süren ve diğer içerikle birlikte sunulan hareket eden, yanıp sönen veya kayan içerik için kullanıcılar duraklatabilmeli, durdurabilmeli veya gizleyebilmelidir; (2) otomatik olarak başlayan ve diğer içerikle birlikte sunulan otomatik güncellenen içerik için kullanıcılar duraklatabilmeli, durdurabilmeli, gizleyebilmeli veya güncelleme sikligini kontrol edebilmelidir.

Bu kriter animasyonlari, otomatik oynayan videoları, kayan haber seritlerini, canlı borsa kotasyonlarini, otomatik yenilenen içerik alanlarını, yanıp sönen öğeleri ve benzer dinamik içerikleri kapsar. İstisna, hareket veya otomatik guncellemenin temel olduğu durumlarda geçerlidir — örneğin bir dosya yükleme sırasındaki ilerleme göstergesi.

Neden önemlidir

Hareket eden veya yanıp sönen içerik, dikkat eksikliği bozukluğu veya bilişsel engelli kullanıcılar için ciddi derecede dikkat dagitici olabilir. Bu kullanıcılar, animasyonlar veya otomatik güncellenen öğeler dikkatleri için rekabet ettiğinde ana içeriklere odaklanamazlar. Bazi kullanıcılar için dikkat dagitma o kadar siddetlidir ki sayfayı hiç kullanamazlar.

Ekran okuyucu kullanıcıları farklı bir zorlukla karşı karsiyar: otomatik güncellenen içerik okuma akışlarını kesintiye ugratabilir. Ekran okuyucu yakın içerikleri okurken bir haber seridi guncellenirse, okuma konumu bozulabilir veya ekran okuyucu guncellemeyi duyurarak konsantrasyonu bozabilir. Vestibular bozukluğu olan kullanıcılar sürekli hareketten bas donmesi veya mide bulantisi yasayabilir.

İlgili axe-core kuralları

blink — <blink> öğelerinin kullanilmamasini sağlar. <blink> öğesi, dikkat dagitici olan ve kullanıcılar tarafından duraklatilmayan yanıp sönen içerik oluşturur.
marquee — <marquee> öğelerinin kullanilmamasini sağlar. <marquee> öğesi, kullanıcı tarafından duraklatilmayan, durdurulamayan veya gizlenemeyen kayan metin oluşturur.

Nasıl test edilir

Tüm hareket eden, yanıp sönen, kayan veya otomatik güncellenen içerikleri belirleyin ve kullanıcı kontrollerinin var olduğunu doğrulayın.

Sayfayı yükleyin ve hareket eden, yanıp sönen, kayan veya otomatik güncellenen tüm içerikleri belirleyin.
5 saniyeden fazla süren her hareket eden/yanıp sönen/kayan öğe için duraklatma, durdurma veya gizleme mekanizmasının var olduğunu doğrulayın.
Otomatik güncellenen içerik için duraklatma, durdurma, gizleme veya güncelleme sikligini ayarlama kontrollerini doğrulayın.
Kullanimdan kalkmis <blink> ve <marquee> öğelerinin kullanımını tespit etmek için axe-core çalıştırın.
Animasyonlari duraklatmanin bilgi kaybina neden olmadığını doğrulayın — kullanıcı devam edebilmeli veya içeriğe yetisebilmelidir.

Otomatik oynayan videoların görünür duraklatma kontrollerine sahip olup olmadığını ve duraklattiktan sonra otomatik olarak yeniden baslamalarini kontrol edin.

Nasıl düzeltilir

Kontrol edilemeyen animasyonlu öğeleri, kullanıcı kontrolleri sağlayan erişilebilir alternatiflerle değiştirin.

Marquee yerine kontrol edilebilir haber seridi

<!-- Yanlış: erişilemez marquee -->
<marquee>Son dakika: Önemli güncelleme...</marquee>

<!-- Doğru: duraklatma kontrollü CSS animasyonu -->
<div class="haber-seridi" role="region"
  aria-label="Haber seridi" aria-live="off">
  <button onclick="seridiAcKapa()"
    aria-label="Haber seridini duraklat"
    id="serit-duraklat">Duraklat</button>
  <div class="serit-içerik" id="serit">
    <span>Son dakika: Önemli güncelleme...</span>
  </div>
</div>

Haber seridi CSS ve JavaScript

.serit-içerik {
  overflow: hidden;
  white-space: nowrap;
}

.serit-içerik span {
  display: inline-block;
  animation: sola-kaydır 15s linear infinite;
}

.serit-içerik.duraklatildi span {
  animation-play-state: paused;
}

@keyframes sola-kaydır {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

function seridiAcKapa() {
  const serit = document.getElementById('serit');
  const btn = document.getElementById('serit-duraklat');
  const duraklatildi = serit.classList.toggle('duraklatildi');
  btn.textContent = duraklatildi ? 'Oynat' : 'Duraklat';
  btn.setAttribute('aria-label',
    duraklatildi ? 'Haber seridini oynat' : 'Haber seridini duraklat'
  );
}

Kontrolleri olan otomatik güncellenen içerik

<div role="region" aria-label="Canlı akış"
  aria-live="polite" id="canlı-akış">
  <div class="akış-kontrolleri">
    <button onclick="guncellemeleriAcKapa()"
      id="güncelleme-düğmesi">Guncellemeleri Duraklat</button>
    <label>
      Guncelleme sikligi:
      <select onchange="sikligiAyarla(this.value)">
        <option value="5000">Her 5 saniye</option>
        <option value="15000">Her 15 saniye</option>
        <option value="30000" selected>Her 30 saniye</option>
        <option value="60000">Her dakika</option>
        <option value="0">Yalnızca manuel</option>
      </select>
    </label>
    <button onclick="simdiYenile()">Simdi Yenile</button>
  </div>
  <div id="akış-içeriği"><!-- Dinamik içerik --></div>
</div>

Sık yapılan hatalar

<blink> veya <marquee> öğeleri kullanmak, animasyon üzerinde kullanıcı kontrolü sağlamaz.
Görünür duraklatma kontrolü olmayan otomatik oynayan arka plan videoları.
Duraklatma mekanizması olmadan sürekli donguye giren animasyonlu kahraman bannerlari veya slaytlar.
Duraklatma veya yenileme aralığını ayarlama kontrolleri olmadan otomatik yenilenen veri tabloları veya panolar.
Duraklatmak için JavaScript değiştirici olmadan sonsuz donguye giren CSS animasyonlari.
Üzerine gelince duraklayan ancak klavye erisimli duraklatma mekanizması sağlamayan hareketli içerik.

2.2.2 Duraklat, Durdur, Gizle