WCAG 2.2.2: Duraklat, Durdur, Gizle

Bu Kuralın Anlamı

WCAG 2.2.2 (Duraklat, Durdur, Gizle), Kullanılabilirlik ilkesinin altında yer alan Seviye A başarı ölçütüdür. Bir sayfada hareket eden, yanıp sönen, kayan veya otomatik olarak güncellenen tüm içeriği kapsar. Kural, içeriğin davranışına bağlı olarak iki ayrı gereklilik ortaya koyar:

Otomatik başlayan, beş saniyeden uzun süren ve başka içeriklerle birlikte sunulan hareketli, yanıp sönen veya kayan içerik için, kullanıcılara bunu duraklatma, durdurma veya gizleme mekanizması sağlanmalıdır. Bu, CSS animasyonlarını, JavaScript ile çalışan karuselleri, kayan yazıları (marquee), yanıp sönen öğeleri, kayan ticker’ları ve animasyonlu banner’ları kapsar.

Otomatik güncellenen içerik — canlı skor tabloları, borsa ticker’ları, sosyal medya akışları veya belirli aralıklarla yenilenen haber başlıkları gibi — için kullanıcılar güncellemeleri duraklatabilmeli, durdurabilmeli, gizleyebilmeli veya güncelleme sıklığını kontrol edebilmelidir.

Başarılı sayılmak için, kullanıcıların yardıma ihtiyaç duymadan animasyonu dondurmasına veya kaldırmasına izin veren, açıkça kullanılabilir bir kontrolün (buton, klavye kısayolu veya benzeri bir mekanizma) animasyonlu içerikten önce veya onunla birlikte sunulması gerekir. Kontrolün kendisi de erişilebilir olmalıdır — klavye ile ulaşılabilir, doğru etiketlenmiş ve fare olmadan kullanılabilir.

Şu durumlardan herhangi biri mevcutsa başarısızlık söz konusudur: durdurulamayan bir <blink> öğesi veya CSS text-decoration: blink; duraklatma mekanizması olmayan bir <marquee> öğesi; duraklatma butonu olmadan süresiz oynayan animasyonlu bir karusel; kontrol edilemeyen otomatik yenilenen bir haber bileşeni; ya da durdurma imkânı olmayan döngüsel bir arka plan videosu.

WCAG iki açık istisna tanımlar. Birincisi, kural beş saniye veya daha kısa süren animasyonlar için geçerli değildir; çünkü kendi kendine sona eren kısa süreli hareket, kalıcı bir dikkat dağınıklığı yaratmaz. İkincisi, animasyon etkinlik için olmazsa olmaz olduğunda kural uygulanmaz — örneğin, canlı fiyatların sayfanın tüm amacını oluşturduğu ve duraklatılmasının içeriğin doğasını temelden değiştireceği gerçek zamanlı bir hisse senedi alım-satım arayüzü. Bu istisnalar dardır ve uygulamadan kaçınmak için genel bir mazeret olarak kullanılmamalıdır.

Neden Önemlidir

Hareketli ve yanıp sönen içerik, birkaç farklı engelli grup için ciddi engeller oluşturur ve sonuçlar hafif dikkat dağınıklığından gerçek tıbbi zarara kadar uzanır.

Dikkat eksikliği ve hiperaktivite bozukluğu (DEHB) veya diğer bilişsel engelleri olan kişiler, animasyonlu öğeler çevresel görüş alanlarında bulunduğunda sayfanın asıl içeriğine odaklanmayı çoğu zaman imkânsız bulurlar. İnsan beyni, hayatta kalma mekanizması olarak harekete dikkat etmeye nörolojik olarak programlanmıştır ve DEHB’li kişiler bu çekimi nörotipik kullanıcılara kıyasla çok daha yoğun yaşarlar. Bir haber sayfasının altındaki kayan ticker veya kenar çubuğundaki animasyonlu banner reklam, ana makaleyi okumayı fiilen imkânsız hâle getirebilir.

Vestibüler bozuklukları — labirentit, benign paroksismal pozisyonel vertigo (BPPV) ve Ménière hastalığı dâhil — olan kişiler, ekrandaki belirli türde hareketlere maruz kaldıklarında mide bulantısı, baş dönmesi ve yönelim bozukluğu yaşayabilirler. Bu kullanıcılar için döngüsel bir karusel veya paralaks kaydırma efekti sadece rahatsız edici değildir; sayfayı tamamen terk etmelerine neden olan fiziksel rahatsızlık yaratabilir. Vestibüler bozuklukların yalnızca Amerika Birleşik Devletleri’nde 40 yaş üstü yetişkinlerin tahmini %35’ini etkilediği düşünülmektedir.

Fotosensitif epilepsisi olan kişiler, belirli frekanslarda yanıp sönen veya flaş yapan içeriklerden nöbet riski altındadır. Yanıp sönen içerik WCAG 2.3.1 tarafından daha doğrudan ele alınsa da, 2.2.2 kapsamındaki yanıp sönen içerik de tetikleyici bir faktör olabilir. Dünya Sağlık Örgütü, epilepsinin dünya çapında yaklaşık 50 milyon kişiyi etkilediğini tahmin etmektedir.

Ekran okuyucu kullanıcıları için otomatik güncellenen içerik aynı derecede bozucu bir sorun yaratır. Canlı bir bölge yenilendiğinde, ekran okuyucular yeni içeriği duyurur ve kullanıcı başka bir şeyi dinlerken cümlenin ortasında onu keser. Güncellemeleri duraklatma imkânı olmadan, canlı içerik içeren bir sayfada gezinmek son derece zor hâle gelir.

Şu gerçek dünya senaryosunu düşünün: DEHB’li bir kullanıcı, Türkçe bir e-ticaret bankacılık portalında çevrimiçi havale işlemi yapmaktadır. Üst kısımdaki dönen bir promosyon banner’ı, başlıkta her üç saniyede bir dört teklif arasında geçiş yapmaktadır. Kullanıcı doğru hesap numarasını girmeye odaklanamaz. Yazım hatası yapar, havale başarısız olur ve tüm süreci baştan tekrarlamak zorunda kalır. Banner’da bir duraklatma butonu olsaydı, görev sorunsuz olurdu. Bu bir varsayım değil — erişilebilirlik denetçilerinin düzenli olarak karşılaştığı belgelenmiş bir etkileşim hatası kategorisidir.

Engellilik erişiminin ötesinde, kontrol edilemeyen hareketi ortadan kaldırmak herkes için kullanılabilirliği artırır, bilişsel yükü azaltır ve düzen kaymalarını ve gereksiz JavaScript çalıştırılmasını azaltarak Core Web Vitals gibi SEO sinyallerini iyileştirebilir.

İlgili Axe-core Kuralları

• blink: Bu kural, kullanımdan kaldırılmış <blink> HTML öğesinin varlığını ve yanıp sönen metin üreten CSS özelliklerini (tarihsel olarak text-decoration: blink) kontrol eder. <blink> öğesi, kullanıcının durdurması için yerel bir mekanizma olmadan metnin sürekli olarak yanıp sönmesine neden olur. Axe, bu öğenin her örneğini ihlal olarak işaretler; çünkü doğrudan 2.2.2’yi başarısız kılar — <blink> için uyumlu bir kullanım durumu yoktur. Kural ayrıca animasyonun duraklatılamadığı CSS tabanlı yanıp sönme efektleri için de uyarı verir. Otomatik tespit burada güvenilirdir; çünkü öğe ve özellik, DOM ve hesaplanmış stillerde sözdizimsel olarak tanımlanabilir.
• marquee: Bu kural, metnin veya içeriğin ekran boyunca yatay veya dikey olarak sürekli bir döngü içinde kaymasına neden olan <marquee> HTML öğesinin varlığını kontrol eder. <marquee> öğesinin yerleşik, erişilebilir bir duraklatma mekanizması yoktur ve HTML5’te kullanımdan kaldırılmıştır. Axe, her örneği ihlal olarak işaretler. <blink> gibi, tespit edilmesi kolaydır; çünkü öğe sözdizimsel olarak tanımlanabilir. Ancak, otomatik araçlar tüm 2.2.2 ihlallerini tespit edemez — CSS animasyonları, JavaScript karuselleri, otomatik güncellenen AJAX bileşenleri ve döngüsel HTML5 videolar, duraklatma mekanizmasının (veya yokluğunun) yalnızca tam etkileşimli deneyimi değerlendiren bir insan testçi tarafından belirlenebilmesi nedeniyle manuel inceleme gerektirir.

Nasıl Test Edilir

1. axe DevTools veya Lighthouse ile otomatik tarama: Sayfayı Chrome veya Firefox’ta açın. DevTools’u (F12) açın, axe DevTools paneline veya Lighthouse Accessibility denetimine gidin ve tam bir tarama çalıştırın. Sonuçlarda özellikle blink veya marquee olarak etiketlenmiş ihlallere bakın. Her ihlal, DOM düğümünü, etki düzeyini (ciddi veya kritik) ve iyileştirme rehberine bir bağlantı içerir. Otomatik taramanın temiz çıkmasının tam uyum anlamına gelmediğini unutmayın — manuel adımlara devam edin.
2. CSS ve JavaScript animasyonu için manuel inceleme: Sayfayı görsel olarak, hareket eden, kayan, yanıp sönen veya otomatik olarak güncellenen herhangi bir içerik açısından inceleyin. Her örnek için, animasyonlu içerikten önce veya onunla birlikte sunulan bir duraklatma, durdurma veya gizleme kontrolünün mevcut ve görünür olup olmadığını kontrol edin. Kontrolün klavye ile ulaşılabilir olduğunu (Tab ile ona geçin) ve Enter veya Space tuşuna basmanın kontrolü etkinleştirdiğini doğrulayın. Kontrolü etkinleştirmenin hareketi gerçekten durdurduğunu ve yalnızca hızını azaltmadığını kontrol edin.
3. Yalnızca klavye ile test: Farenizi çıkarın. Sayfanın tamamında gezinmek için Tab tuşunu kullanın. Yalnızca klavye kullanarak her animasyonlu öğe için duraklat/durdur kontrolüne ulaşabildiğinizi ve kontrolün görünür bir odak göstergesine sahip olduğunu doğrulayın. Kontrole ulaşamıyorsanız veya ulaşmak için önce animasyonlu içeriğin üzerinden tab ile geçmeniz gerekiyorsa (bu rahatsız edici olabilir), bu bir başarısızlıktır.
4. NVDA ve Firefox ile ekran okuyucu testi: NVDA’yı başlatın, sayfayı Firefox’ta açın ve okumayı bölen canlı bölge duyurularını dinleyin. Otomatik güncellenen içeriğe gidin ve duraklatma kontrolünü kullanmanın NVDA duyurularını susturduğunu doğrulayın. Aynı prosedürü izleyerek JAWS ve Chrome, ayrıca macOS’ta VoiceOver ve Safari ile test edin.
5. Otomatik güncellenen içerik kontrolü: Zamanlayıcı ile yenilenen içerik (haber akışları, panolar, skor tabloları) için yenileme aralığını not edin. Güncellemeleri duraklatmak veya sıklığı kontrol etmek için bir mekanizma olduğunu doğrulayın. Mümkünse güncellemeyi manuel olarak tetikleyin ve ekran okuyucuların bunu yalnızca kullanıcı seçtiğinde, istem dışı değil, duyurduğunu doğrulayın.
6. Azaltılmış hareket tercihi testi: İşletim sisteminizde “Hareketi Azalt” erişilebilirlik ayarını etkinleştirin. Sayfayı yeniden yükleyin ve animasyonların prefers-reduced-motion CSS medya sorgusuna saygı gösterdiğini doğrulayın. Bu, WCAG 2.2.2 tarafından kesin olarak zorunlu tutulmasa da güçlü bir tamamlayıcı tekniktir ve denetçiler tarafından giderek daha fazla beklenmektedir.

Nasıl Düzeltilir

Kullanımdan kaldırılmış <marquee> öğesi — Hatalı

<!-- Duraklatma kontrolü olmayan kayan metin; 2.2.2'yi başarısız kılar -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Kullanımdan kaldırılmış <marquee> öğesi — Doğru

<!-- prefers-reduced-motion'a saygı duyan ve erişilebilir bir duraklatma
     butonu içeren bir CSS animasyonu ile değiştirildi -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- CSS, .ticker-content için animasyon tanımlamalı
     ve animation-play-state: paused ayarı yapan .paused sınıfını içermelidir.
     JS toggleTicker() fonksiyonu .paused sınıfını ekleyip/çıkarmalı
     ve aria-pressed ile aria-label değerlerini buna göre güncellemelidir. -->

Kullanımdan kaldırılmış <blink> öğesi — Hatalı

<!-- Blink öğesi sürekli ve durdurulamaz yanıp sönmeye neden olur; 2.2.2'yi başarısız kılar -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Kullanımdan kaldırılmış <blink> öğesi — Doğru

<!-- Ekran okuyucular için role='alert' ile statik, yüksek kontrastlı uyarı.
     Aciliyeti iletmek için yanıp sönme gerekmez. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Otomatik oynayan, duraklatma kontrolü olmayan karusel — Hatalı

<!-- Karusel her 4 saniyede bir ilerliyor ve durdurma imkânı yok; 2.2.2'yi başarısız kılar -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Otomatik oynayan, duraklatma kontrolü olan karusel — Doğru

<!-- Karusel, görünür ve klavye ile erişilebilir bir duraklatma butonu içerir.
     aria-label mevcut durumu yansıtacak şekilde dinamik olarak güncellenir.
     Otomatik oynatma ayrıca odak/hover durumunda durur (WCAG en iyi uygulaması). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG duraklatma simgesi veya metin etiketi -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Otomatik güncellenen canlı veri bileşeni — Hatalı

<!-- Bileşen JS ile her 10 saniyede bir yenileniyor ve kullanıcı kontrolü yok; 2.2.2'yi başarısız kılar -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Otomatik güncellenen canlı veri bileşeni — Doğru

<!-- Bileşen bir duraklatma butonu içerir; duraklatıldığında ekran okuyucuların
     kesintiye uğramaması için aria-live 'off' olarak ayarlanır. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS, aria-live değerini 'polite' ile 'off' arasında değiştirmeli,
     duraklatıldığında setInterval zamanlayıcısını durdurmalı ve
     buton üzerindeki aria-pressed ile aria-label değerlerini buna göre güncellemelidir. -->

Yaygın Hatalar

• Üretim HTML’inde, “retro” veya dekoratif stil için bile <marquee> veya <blink> öğelerini kullanmak — her iki öğe de kullanımdan kaldırılmıştır, anlamsal olarak boşluk doldurur ve 2.2.2’yi her zaman başarısız kılar; kaldırma dışında bir iyileştirme yolu yoktur.
• Yalnızca fareyle üzerine gelindiğinde görünen bir duraklatma butonu eklemek; bu, en çok ihtiyaç duyan ve genellikle hover yerine Tab ile gezinerek sayfayı kullanan yalnızca klavye kullanıcıları için erişilemez hâle getirir.
• Duraklatma butonunu DOM’da animasyonlu içerikten önce Tab ile ulaşılamayacak şekilde konumlandırmak; bu, kullanıcıları hareketi durdurmadan önce rahatsız edici animasyonun içinden geçmeye zorlar.
• Animasyonu görsel olarak durdurmak için CSS’te animation-play-state: paused kullanmak, ancak içeriği güncelleyen JavaScript setInterval veya requestAnimationFrame döngüsünü devre dışı bırakmamak — görsel görünüm durur, ancak DOM değişmeye devam eder ve ekran okuyucuları hâlâ kesintiye uğratır.
• Kullanıcı duraklatma butonuna bastığında bile bir karusel veya ticker üzerinde aria-live='polite' ayarını etkin bırakmak — canlı bölge, görsel animasyon donmuş olsa bile ekran okuyucu kullanıcılarına DOM değişikliklerini duyurmaya devam eder.
• <video> öğesinde autoplay=false özelliğine güvenmek, ancak davranışı tarayıcılar arasında doğrulamamak; bazı tarayıcı ve eklenti kombinasyonları bu niteliği geçersiz kılar ve videoların yazarın niyetine ve kullanıcının beklentisine aykırı olarak otomatik oynatılmasına neden olur.
• Beş saniyelik istisnayı genel bir tolerans süresi olarak ele almak ve her bir slayt geçişinin beş saniyenin altında olduğu varsayımıyla her slaytı dört saniye gösteren bir karusel oluşturmak — animasyonun tamamı süreklidir ve beş saniyeden çok daha uzun sürer, bu nedenle istisna uygulanamaz.
• Animasyonu durduran ancak duraklatılmış durumu görsel olarak belirtmeyen bir duraklatma kontrolü sağlamak; bu, kullanıcıları eylemlerinin bir etkisi olup olmadığı konusunda kararsız bırakır — buton mevcut durumunu yansıtmalı, ideal olarak aria-pressed kullanmalı ve etiketini “Pause” ile “Play” arasında güncellemelidir.
• prefers-reduced-motion ayarını yalnızca CSS geçişlerine uygulamak ve CSS’ten bağımsız çalışan JavaScript tabanlı animasyonları göz ardı etmek; bu, sistem düzeyinde hareketi azaltma ayarını etkinleştirmiş kullanıcıların sayfada hâlâ hareket deneyimlemesi anlamına gelir.
• Duraklatma kontrolünü tabindex='-1' ayarlayarak veya yalnızca fare etkileşimiyle koşullu olarak gösterilen display:none içeren bir kapsayıcıya alarak klavye sekme sırasının dışında bırakmak — kontrol her zaman klavye ile gezinme yoluyla ulaşılabilir olmalıdır.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi No. 2025/10, WCAG 2.2 ile uyumlu zorunlu web ve mobil erişilebilirlik gerekliliklerini belirler. WCAG 2.2.2 Duraklat, Durdur, Gizle bir Seviye A ölçütüdür; bu da uyumun en temel katmanında yer aldığı ve genelge kapsamındaki tüm kuruluşlar için istisnasız zorunlu olduğu anlamına gelir.

Genelge, kademeli uyum takvimleri belirler: kamu kurum ve kuruluşları genelgenin yayımlanma tarihinden itibaren bir yıl içinde tam Seviye A uyumunu sağlamak zorundadır ve özel sektör kuruluşları bunu iki yıl içinde yapmak zorundadır. Gönüllü katılım söz konusu değildir — genelge yasal bir yükümlülük getirir ve uyumsuz dijital varlıklar idari denetime ve olası yaptırım işlemlerine tabidir.

Genelge kapsamındaki kuruluşlar, Türkiye’deki dijital hizmetlerin geniş bir kesimini içerir: tüm kamu kurum ve devlet organları; Türkiye’de faaliyet gösteren e-ticaret platformları; bankalar ve finansal hizmet kuruluşları; hastaneler ve özel sağlık hizmeti sağlayıcıları; 200.000 veya daha fazla abonesi olan telekomünikasyon operatörleri; seyahat acenteleri; özel ulaşım şirketleri; ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar.

Bu kuruluşlar için WCAG 2.2.2’nin doğrudan ve pratik sonuçları vardır. Otomatik oynayan ürün karuseli olup duraklatma butonu bulunmayan bir e-ticaret sitesi ihlal içindedir. Durdurma kontrolü olmayan kayan güvenlik uyarısı ticker’ı kullanan bir bankanın internet bankacılığı portalı uyumsuzdur. Durdurulamayan animasyonlu uyarılar kullanan bir hastanenin randevu alma sayfası gerekliliği karşılamaz. Döngüsel arka plan videosu olup görünür bir durdurma kontrolü bulunmayan bir telekomünikasyon şirketinin ana sayfası, son tarihten önce bunu iyileştirmek zorundadır.

Yasal yükümlülüğün ötesinde, Türk erişilebilirlik hukuku, AB Web Erişilebilirliği Direktifi ve Avrupa Erişilebilirlik Yasası (EAA) ile örneklenen daha geniş Avrupa eğilimiyle uyumludur. Türk şirketleri Avrupa pazarlarına açıldıkça veya Avrupalı kullanıcılara hizmet verdikçe, WCAG 2.2 Seviye A uyumu — 2.2.2 ölçütü dâhil — çift yönlü bir uyum gerekliliği hâline gelir. Duraklat, Durdur, Gizle’nin doğru uygulanması bu nedenle hem yurt içi hukuki bir zorunluluk hem de uluslararası dijital varlığa sahip Türk kuruluşları için stratejik bir varlıktır.