Skip to main content
Çalıştırılabilir WCAG 2.3.2

2.3.2 Üç Yanıp Sönme

Web sayfaları herhangi bir bir saniyelik dönemde üçten fazla kez yanıp sönen hiçbir şey içermez.

Level AAA Critical WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

Bu kural ne anlama geliyor

WCAG 2.3.2, 2.3.1'in AAA seviyesindeki versiyonudur. 2.3.1, genel yanıp sönme ve kırmızı yanıp sönme eşiklerinin altında kalan yanıp sonmeye izin verirken (alan boyutu ve parlaklak değişikliğine dayanarak), 2.3.2 eşik istisnasini tamamen kaldırır. Bu kriter kapsamında, boyut, renk veya parlaklktan bağımsız olarak kesinlikle hiçbir içerik saniyede üçten fazla kez yanıp sonemez.

Bu daha sıkı ve daha basit bir kuraldir: saniyede üçten fazla yanıp sonuyorsa başarısız olur — nokta. Piksel alanı hesaplamalari, izleme mesafesi değerlendirmesi ve kırmızı için özel muamele yoktur. Bu, hem anlasilmasini kolaylastirir hem de karsilanmasini zorlaştırır, çünkü küçük veya ince yanıp sönen öğeler bile uyum sağlamalıdır.

Neden önemlidir

2.3.1'deki eşik istisnalari nobet tetikleyicilerinin istatistiksel modellerine dayanır, ancak bireysel duyarlilik değişir. Fotosensitif epilepsisi olan bazı kişiler, 2.3.1 tarafından tanımlanan "güvenli" esikler içinde kalan uyaranlar tarafından tetiklenen nobetler yasayabilir. Saniyede ucun üzerindeki tüm yanıp sonmeleri ortadan kaldirarak 2.3.2 maksimum koruma sağlar.

Bu AAA kriteri özellikle kitlenin yüksek fotosensitiviteye sahip bireyleri icerdigi bilinen ortamlar için önemlidir — tıbbi tesisler, okullar, devlet hizmetleri. Ayrıca büyük ekranlarda veya karanlık ortamlarda goruntulenme içeriği için de önemlidir, burada yanıp sönen içeriğin göreli boyutu ve etkisi guclenir.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. 2.3.1 gibi, yanıp sönme sikligini tespit etmek özel analiz araçları gerektirir. Fark, eşik hesaplamalarinin gerekli olmamasıdır — saniyede üçten fazla yanıp sönen herhangi bir içerik başarısız olur.

Nasıl test edilir

Test, 2.3.1 ile aynı yakasimi izler ancak daha sıkı bir standartla.

  1. Sayfada görsel değişiklikler içeren tüm içerikleri belirleyin: videolar, animasyonlar, GIF'ler, CSS animasyonlari, JavaScript odaklı efektler.
  2. Her görsel öğe için yanıp sönme sikligini belirleyin. Saniyede parlaklak değişikliklerini (karanlktan aydinliga veya aydinliktan karanlkga geçişler) sayın.
  3. Saniyede üçten fazla yanıp sönen herhangi bir öğe — boyut veya renkten bağımsız olarak — bu kriteri başarısız kılar.
  4. Video içeriğini kare kare analiz etmek için PEAT veya benzer araçlar kullanın.
  5. prefers-reduced-motion etkinleştirilmiş şekilde test edin ve tüm animasyonlarin azaltildigini veya ortadan kaldirildigini doğrulayın.

Nasıl düzeltilir

Tüm görsel gecisleri saniyede üç veya daha azina sınırlayın. Bu en güvenli ve en basit yaklasimdir.

Animasyonlari hız sinirlamasi

/* Animasyon dongusunun en az 333ms olmasını sağlayın (maksimum 3/saniye) */
@keyframes güvenli-yanıp-sönme {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.bildirim-noktası {
  /* 1 saniye döngü = 1 yanıp sönme/sn — güvenli aralikta */
  animation: güvenli-yanıp-sönme 1s step-end infinite;
}

/* Daha da güvenli: yanıp sonmeden kaçının, solma kullanın */
@keyframes güvenli-solma {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.bildirim-noktası-güvenli {
  animation: güvenli-solma 2s ease-in-out infinite;
}

JavaScript yanıp sönme hız sinirlaycisi

// Görsel durum değisikliklerinin saniyede 3 defadan
// fazla olmamasını sağlayın
class YanipSonmeKorumasi {
  constructor(sanivedeMaksYanipSonme = 3) {
    this.minimumAralik = 1000 / sanivedeMaksYanipSonme;
    this.sonYanipSonme = 0;
  }

  yanipSonebilirMi() {
    const simdi = Date.now();
    if (simdi - this.sonYanipSonme >= this.minimumAralik) {
      this.sonYanipSonme = simdi;
      return true;
    }
    return false;
  }
}

const koruma = new YanipSonmeKorumasi(3);

function guvenliGorselGeriBildirim(öğe) {
  if (koruma.yanipSonebilirMi()) {
    öğe.classList.add('vurgula');
    setTimeout(() => öğe.classList.remove('vurgula'),
      200);
  }
}

Sık yapılan hatalar

  • 2.3.1 eşik hesaplamarina guvenip küçük yanıp sönen öğelerin otomatik olarak güvenli olduğunu varsaymak.
  • Yanıp sönme efektleri oluşturan hızlı kare guncellemelerine sahip animasyonlu SVG'ler veya Canvas öğeleri.
  • Kısa süreli tam ekran yanıp sonmeleri içeren sayfalar veya bölümler arasındaki geçiş efektleri.
  • Kontrolsuz yanıp sönme hizlarina sahip banner reklamlar veya gömülü üçüncü parti içerik.
  • Hizla yanıp sönen yükleme donduruculer veya ilerleme göstergeleri.
  • Metin editorlerinde veya giriş alanlarında saniyede ucu aşan imlec yanıp sönme hizlari.

Kaynaklar