Fotosensitif epilepsisi olan kişileri korumak için sayfada hiçbir şeyin saniyede üç defadan fazla yanıp sönmemesini ya da flaş eşiklerinin altında kalmasını ister.
Yanıp sönen içerik, fotosensitif epilepsisi olan kişilerde nöbet tetikleyebilir. Nöbet tıbbi bir acildir ve çoğu erişilebilirlik engelinden farklı olarak bu, bir rahatsızlık değil, kişiye zarar verebilecek bir durumdur. Strobe etkili bir banner, yanıp sönen bir video klibi ya da hızlı bir animasyon bunun için yeterli olabilir.
Bu kriter, web sayfalarının herhangi bir saniyelik sürede üç defadan fazla yanıp sönen bir şey içermemesini ya da yanıp sönmenin genel flaş ve kırmızı flaş eşiklerinin altında kalmasını ister. En güvenli kural basittir: yanıp sönen alanın boyutu ne olursa olsun saniyede üçten fazla yanıp sönme yapmayın.
Bir flaşın ya da strobe desenin nöbet tetikleyebildiği fotosensitif epilepsisi olan kişiler. Migreni ve vestibüler bozukluğu olan bazı kişiler de etkilenir. Ekrana yakın oturan ya da içeriği büyüten kullanıcılar, yanıp sönme görüş alanlarının daha büyük bölümünü kapladığı için daha büyük risk altındadır.
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. Bakmak için güvenli içerik, "işletilebilirlik" ilkesinin parçasıdır.
Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.3.1'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.
| Madde | Ortam | Ne ister? |
|---|---|---|
| 9.2.3.1 | Web sayfaları | Web içeriğinin WCAG 2.3.1 kriterini karşılamasını ister. |
| 10.2.3.1 | Web dışı dokümanlar (PDF, Office dosyaları) | Standardın uyguladığı hâllerde yanıp sönen içerik barındıran dokümanların aynı kuralı karşılamasını ister. |
| 11.2.3.1 | Web dışı yazılım (yerel mobil uygulamalar) | Yazılımın, herhangi bir saniyelik sürede üç defadan fazla yanıp sönen bir şey içermemesini ya da flaş eşiklerinin altında kalmasını ister. |
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.3.1 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
Dört ya da daha fazla parlak-koyu döngüsü olan bir saniyelik animasyon kuralı bozar. Saniyedeki flaş sayısını üç ya da daha az tutun; daha da iyisi hiç yanıp sönmeyin.
EN@keyframes yanipson {
0%, 100% { background: #ffffff; }
50% { background: #000000; }
}
.uyari { animation: yanipson 0.2s infinite; } /* saniyede 5 flaş */.uyari { background: #fff3cd; border: 2px solid #8a6d00; }
/* Durağan, yüksek kontrastlı bir stil yanıp sönmeden dikkat çeker */Yavaş ve düzgün değişiklikler flaş değildir. Bir saniye ya da daha uzun süren bir geçiş güvenlidir.
.bildirim { animation: flas 0.25s steps(1) infinite; }.bildirim { animation: solma 2s ease-in-out infinite alternate; }
@keyframes solma {
from { opacity: 1; }
to { opacity: 0.6; }
}Sayfayı saniyede birçok kez açık ve koyu arasında değiştiren bir zamanlayıcı yanıp sönme kaynağıdır.
setInterval(() => document.body.classList.toggle("ters"), 100);// Tüm sayfayı hızlı bir zamanlayıcıyla değiştirmeyin.
// Görsel bir ipucu gerekiyorsa bir kez gösterin:
eleman.classList.add("vurgu");
setTimeout(() => eleman.classList.remove("vurgu"), 1500);İsteyen kullanıcılar için zorunlu olmayan animasyonu kaldırın. Bu, kriteri karşılamanın yerini tutmaz, ama riski azaltır.
.banner { animation: nabiz 0.3s infinite; }.banner { animation: nabiz 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.banner { animation: none; }
}Strobe efektli, fotoğraf makinesi flaşlı, patlamalı ve hızlı kesmeli klipleri yayından önce kontrol edin. Döngüdeki bir GIF döngü hâlinde analiz edilir.
<img src="strobe-tanitim.gif" alt="Tanıtım"><video src="tanitim.mp4" muted playsinline controls
aria-label="Tanıtım"></video>
<!-- Yayından önce flaş analiz aracıyla kontrol edildi -->Reklamlar, gömülü içerik ve bileşenler sayfanızın parçasıdır. Onları test edin ve yanıp sönen efekt kullanmayan sağlayıcıları seçin.
<iframe src="https://ads.example/banner" title="Reklam"></iframe> <!-- hiç test edilmedi --><!-- Sözleşmeye ve teste bağlayın: yanıp sönen yaratıcı yok; çıkarsa yerleşimi kaldırın -->Yerel uygulamalarda da animasyonlar ve video yanıp sönebilir. Animasyonu yavaş tutun, sistemdeki Hareketi Azalt ayarına saygı gösterin ve video içeriğini yayından önce test edin.
import SwiftUI
struct UyariRozeti: View {
@Environment(\.accessibilityReduceMotion) private var hareketiAzalt
@State private var sonuk = false
var body: some View {
Circle()
.fill(.red)
.frame(width: 16, height: 16)
// Kaçının: .animation(.linear(duration: 0.1).repeatForever(), value: sonuk)
// Yavaş bir nabız; kullanıcı hareketi azaltmak istediğinde kapalı
.opacity(sonuk ? 0.6 : 1)
.animation(hareketiAzalt ? nil :
.easeInOut(duration: 2).repeatForever(autoreverses: true), value: sonuk)
.onAppear { sonuk = true }
}
}import android.provider.Settings
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
@Composable
fun UyariRozeti() {
val context = LocalContext.current
val animasyonAcik = Settings.Global.getFloat(
context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f
) != 0f
val gecis = rememberInfiniteTransition(label = "nabiz")
// Kaçının: tween(durationMillis = 100). Bunun yerine yavaş bir nabız kullanın.
val alfa by gecis.animateFloat(
initialValue = 1f, targetValue = 0.6f,
animationSpec = infiniteRepeatable(tween(2000), RepeatMode.Reverse),
label = "alfa"
)
Box(
modifier = Modifier
.size(16.dp)
.alpha(if (animasyonAcik) alfa else 1f)
.background(Color.Red, CircleShape)
)
}steps() zamanlamasını ve sınıfları ya da renkleri değiştiren zamanlayıcıları arayın.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.
