Bu kural ne anlama geliyor

WCAG 2.3.1, kullanıcıları nobetleri tetikleyebilecek içerikten korur. Web sayfaları, yanıp sönen içerik genel yanıp sönme esiginin ve kırmızı yanıp sönme esiginin altına dusecek kadar küçük ve soluk olmadıkça, saniyede üçten fazla kez yanıp sönen hiçbir şey içermemelidir. Bu kritik bir güvenlik kriteridir — ihlaller fiziksel zarara neden olabilir.

Genel yanıp sönme eşiği, bir saniyelik dönemde üç veya daha fazla yanıp sönme olduğunda ve yanıp sönen içeriğin toplam alanı yeterince büyük olduğunda (tipik izleme mesafesinde yaklaşık 341 x 256 piksel alan) asisilir. Kırmızı yanıp sönme eşiği özellikle doymus kırmızı içeren geçişler için geçerlidir. İçerik yalnızca her iki eşik de asisilmazsa saniyede üçten fazla kez yanıp sonebilir.

Neden önemlidir

Yaklasik 4.000 kisiden 1'inde fotosensitif epilepsi vardır; bu, yanıp sönen isiklar veya hızla değişen görsel kaliplarin nobetleri tetikleyebildigi bir durumdur. Nobetler kısa süreli farkindalik kaybindan tam konvulziyonlara kadar değişir ve tıbbi olarak tehlikeli olabilir. En bilinen olay, hızla yanıp sönen kırmızı ve mavi animasyonlar nedeniyle yaklaşık 700 Japon cocugunda nobetlere neden olan 1997 Pokemon bolumudur.

Epilepsinin ötesinde, yanıp sönen içerik fotosensitivite veya vestibular bozukluğu olan kisilerde migren, bas donmesi, mide bulantisi ve yönelim bozukluğuna neden olabilir. Sonucun rahatsızlık veya bir ozelligni kullanamamak olduğu çoğu erişilebilirlik sorunundan farklı olarak, bu kriterin ihlalleri aninda fiziksel zarara neden olabilir. Bu, onu en kritik WCAG gereksinimlerinden biri yapar.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Yanıp sönme sikligi ve eşik ihlallerini tespit etmek, Fotosensitif Epilepsi Analiz Araçı (PEAT) veya Harding testi gibi özel araclarla kare kare video analizi gerektirir. Otomatik DOM analizi yanıp sönen içeriği güvenilir şekilde tespit edemez.

Nasıl test edilir

Test, görsel içeriğin yanıp sönme sikligi ve boyutu için analiz edilmesini gerektirir.

Sayfadaki tüm video içeriklerini, animasyonlari, GIF'leri ve dinamik görsel efektleri inceleyin.
Yanıp sonuyor gibi görünen herhangi bir içerik için saniyede yanıp sönme sayısını sayın. Saniyede üçten fazla potansiyel bir ihlaldir.
Video içeriğini eşik ihlalleri için analiz etmek üzere Fotosensitif Epilepsi Analiz Araçı'ni (PEAT) kullanın.
Hizli renk veya parlaklak gecisleri için CSS animasyonlarini ve JavaScript odaklı görsel değişiklikleri kontrol edin.
Kırmızı içeren gecislere özellikle dikkat edin — bunlar nobetleri tetiklemek için daha düşük bir esige sahiptir.

Yanıp sönen alanın boyut eşiğini asip asmadigini değerlendirmek için tam ekran ve tipik gorunluleme boyutlarında test edin.

Nasıl düzeltilir

Güvenli esikler içinde kalmak için yanıp sönen içeriği ortadan kaldırın veya azaltin.

Hizli görsel gecislerden kaçının

/* Yanlış: hızlı yanıp sönen animasyon */
@keyframes tehlikeli-yanıp-sönme {
  0%, 100% { background: #ff0000; }
  50% { background: #000000; }
}
.uyarı {
  animation: tehlikeli-yanıp-sönme 0.2s infinite; /* 5 yanıp sönme/sn! */
}

/* Doğru: nazik titresme animasyonu */
@keyframes nazik-titresme {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.uyarı {
  animation: nazik-titresme 2s ease-in-out infinite;
}

Animasyonlari devre dışı bırakma yolu sağlayın

/* prefers-reduced-motion tercihine saygı gösterin */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Güvenli video gomme

<!-- Potansiyel olarak sorunlu içerik hakkında kullanıcıları uyarin -->
<div class="video-kapsayıcı">
  <div class="yanıp-sönme-uyarisi" role="alert">
    <p>
      <strong>Uyari:</strong> Bu video, fotosensitif
      epilepsi olan kişiler için uygun olmayabilecek
      yanıp sönen isiklar içerir.
    </p>
    <button onclick="videoyuOynat()">Anliyorum, videoyu oynat</button>
  </div>
  <video id="video" controls preload="metadata"
    poster="afiş.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<script>
function videoyuOynat() {
  document.querySelector('.yanıp-sönme-uyarisi').hidden = true;
  document.getElementById('video').play();
}
</script>

Sık yapılan hatalar

Saniyede üçten fazla yanıp sonmeyi aşan hızlı kare değişiklikleri olan animasyonlu GIF'ler.
Yüksek kontrastlı renkler arasında (özellikle kırmızı içeren) hızla geçiş yapan CSS animasyonlari.
PEAT ile analiz edilmemis stroboskop efektleri, yildirim veya hızlı sahne değişiklikleri olan video içeriği.
Patlama efektleri, vurusda ekran yanıp sonmeleri veya hızlı görsel geri bildirim içeren oyun benzeri arayüzler.
Yanıp sönme hakkında uyarı olmadan ve oynatilmadan önce durdurma yolu olmadan otomatik oynayan video içeriği.
Kullanıcının hareket ve yanıp sonmeye duyarliligi sinyalleyen prefers-reduced-motion medya sorgusunu görmezden gelmek.

2.3.1 Üç Yanıp Sönme veya Eşik Altında