WCAG 2.3.1 · A Seviyesi · ADA Title II

Yanıp Sönen İçerik ve ADA

Saniyede üç kereden fazla yanıp sönen içerik nöbet tetikleyebilir. WCAG 2.3.1 video, animasyon ve uyarılar için sınırı ve istisnaları belirler.

Fiziksel güvenlikle ilgili bir kural

Ölçütlerin çoğu kullanılabilirlikle ilgilidir. Bu ölçüt ise zararla ilgilidir: yanıp sönen ışık, fotosensitif epilepsisi olan kişilerde nöbet tetikleyebilir ve etkisi ağır olabilir. 2.3.1 başarı ölçütü, genel flaş ve kırmızı flaş eşiklerinin altında kalmadıkça, web sayfalarının herhangi bir saniyelik dilimde üç kereden fazla yanıp sönen hiçbir şey içermemesini ister.

Eşikler standartta tanımlanmıştır. Genel flaş, göreli parlaklıkta azamî değerin (1,0) en az yüzde 10'u kadar, ters yönde bir çift değişimdir ve koyu durum 0,80'in altındadır. Kırmızı flaş, doymuş kırmızıyı içeren bir çift geçiştir. İçerik, yanıp sönen alanın toplamı küçükse de geçer: 0,006 steradyanı aşmayan alan, yani 10 derecelik görüş alanının yüzde 25'i. Standart bu alanın tamamını 1024 × 768 bir ekranda 341 × 256 piksellik bir dikdörtgenle yaklaşık olarak belirtir; dolayısıyla yanıp sönen alan bu dikdörtgenin yaklaşık dörtte birinin altında kalmalıdır.

Çok küçük karelerden oluşan dama tahtası gibi ince, dengeli desenler eşikleri aşmaz. Gereksinim, gömülü video ve üçüncü taraf reklamlar dahil sayfadaki tüm içerik için geçerlidir.

Yanıp sönmeler kamu sitelerine nasıl girer

  • Dikkat çekmek için kırmızı ve beyaz arasında yanıp sönen acil durum uyarı bannerı.
  • Bir ulaşım hizmeti sayfasında hızlıca yanıp sönen harita işaretçisi ya da durum ışığı.
  • Siyah ve beyaz arasında silinen açılış ekranı ya da sayfa geçiş efekti.
  • Kaydedilmiş bir halka açık toplantıdaki stroboskopik kamera efekti ya da reklam gibi gömülü videolar.

WCAG 2.3.1 video ve reklamlar dahil sayfadaki tüm içeriğe uygulanır. Yanıp sönen bir uyarının ardındaki niyet genellikle iyidir. Çözüm, parlaklık titremesi olmadan dikkat çekmektir: kalın renkler, simgeler, konum ve açık bir mesaj.

Stroboskop olmadan dikkat çekin

Gecikmeli bir otobüs için harita işaretçisi kendini kısa süre duyurup durabilir. Burada işaretçi 2,4 saniyede altı kez durum değiştirir; bu, 2,4 saniyede üç flaştır ve saniyede üçün çok altındadır.

Hatalı
setInterval(() => marker.classList.toggle("on"), 150);   // sonsuza dek saniyede yaklaşık 3,3 flaş
Doğru
let n = 0;
const t = setInterval(() => {
  marker.classList.toggle("on");
  if (++n >= 6) clearInterval(t);     // yaklaşık 2,4 saniye sonra durur
}, 400);

Açılış ekranları ve geçişler

Sert siyahtan beyaza silmeler, hızlı flaşların klasik kaynağıdır. Bunun yerine bir kez yumuşakça belirin.

Hatalı
@keyframes strobe { 0% { background: #000; } 50% { background: #fff; } }
.splash { animation: strobe 0.12s 12; }
Doğru
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.splash { animation: fade-in 0.6s ease-out 1; }

Mobil uygulamalardaki animasyonlar

Aynı sınır, yükleme göstergeleri ve durum efektleri dahil uygulama ekranları için de geçerlidir. SwiftUI:

Hatalı
let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
// ...
.onReceive(timer) { _ in invert.toggle() }   // tam ekran titremesi
Doğru
(urgent ? Color.red : Color.clear)
    .animation(.easeInOut(duration: 0.8), value: urgent)   // tek değişim, döngü yok

Jetpack Compose:

Hatalı
val c by rememberInfiniteTransition().animateColor(
    initialValue = Color.White, targetValue = Color.Red,
    animationSpec = infiniteRepeatable(tween(100), RepeatMode.Reverse)
)
Doğru
val c by animateColorAsState(
    targetValue = if (urgent) Color(0xFFB00020) else Color.White,
    animationSpec = tween(800)
)   // tek yumuşak değişim, tekrar yok

Nasıl test edilir

  1. Her animasyonu, videoyu ve efekti izleyin. Değişimleri sayın: bir saniyede üç kereden fazla tekrarlanan bir şey varsa işaretleyin.
  2. Boyuta bakın: küçük bir öğe alan bakımından geçebilir, büyük bir öğe nadiren geçer. Emin değilseniz başarısız sayın ve yeniden tasarlayın.
  3. Döngüdeki içeriği birkaç tur, kullanıcıların onu yapabileceği en büyük boyutta oynatın.
  4. Video ve karmaşık animasyon için dosyada bir fotosensitif epilepsi analiz aracı kullanın. Hiçbir şeyin saniyede üç kereden fazla yanıp sönmediğini görebiliyorsanız araca gerek yoktur.

Video ve reklam sağlayanlara içeriklerini kontrol edip etmediklerini sorun ve her içerik güncellemesinden sonra yeniden kontrol edin.

Hatalar ve yayın öncesi liste

  • Aciliyet için yanıp sönme ya da stroboskop efekti kullanmak.
  • Gömülü bir reklam ya da videonun başkasının sorunu olduğunu varsaymak. Ölçüt sayfadaki her şey için geçerlidir.
  • Animasyon döngüdeyken kısa bir klibi bir kez test etmek.
  • 341 × 256 piksellik kılavuzun dörtte biriyle karşılaştırmadan küçük alanı başarı saymak.

Sayfadaki hiçbir şey herhangi bir saniyede üç kereden fazla yanıp sönmüyorsa ya da yanıp sönen şey, tedarikçi içeriği dahil, genel ve kırmızı flaş eşiklerinin açıkça altındaysa yayına alın.

Gömülü medyayı yönetmek için tedarikçiler ve üçüncü taraf içerik sayfasına bakın.

Kaynaklar

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.

Corpowid, Gartner tarafından tanınan bir platformdur.

Corpowid, dijital erişilebilirlik alanındaki yenilikçi yaklaşımı ve performansı nedeniyle dünyanın önde gelen araştırma ve danışmanlık şirketlerinden biri olan Gartner tarafından takdir edilmiştir. Bu rozetler, yapay zeka destekli ve kapsayıcı web deneyimleri oluşturma konusundaki kararlılığımızı yansıtmaktadır.

Corpowid hakkında sorularınız mı var?

Bizimle iletişime geçin.

Size en kısa sürede geri dönüş sağlayacağız.