Bu kural ne anlama geliyor

WCAG 2.3.3, kullanıcı etkileşimi tarafından tetiklenen hareket animasyonlarinin devre dışı birakitabilmesini gerektirir. Bu, kullanıcı kayirdiginda, tikladiginda, yazdiginda, üzerine geldiğinde veya sayfayla başka şekilde etkilesimde bulunduğunda meydana gelen animasyonlar için geçerlidir — paralaks kayma efektleri, yakınlaştırma animasyonlari, sayfa geçiş animasyonlari, kaydırmayla tetiklenen ortaya cikma efektleri ve hareket içeren fareyle üzerine gelme durum animasyonlari gibi.

Kriter özellikle hareket animasyonuna odaklanır — bir konumdan diğerine hareket veya boyut değişiklikleri içeren görsel değişiklikler. Basit renk değişiklikleri, opaklad gecisleri veya vurgulama bu gereksinimi tetiklemez. Animasyonun bilgi iletmek veya işlevselliğin kendisi için temel olduğu durumlarda istisna vardır (tamamlanmayi göstermek için hareket eden bir ilerleme çubuğu gibi).

Neden önemlidir

Vestibular bozukluğu olan kullanıcılar (iyi huylu paroksismal pozisyonel vertigo, labirentit ve Meniere hastaligi dahil) hareket animasyonlarindan ciddi fiziksel belirtiler yasayabilir — bas donmesi, mide bulantisi, bas agrisi ve yönelim bozukluğu. Bu belirtiler animasyon bittikten çok sonra devam edebilir ve kullanıcının cihazıni saatlerce kullanmasını engelleyebilir.

Ic kulaktaki vestibular sistem, beynin hareketi ve mekansal yönelimi anlamasına yardımcı olur. Ekrandaki görsel hareket vucdun gerçek konumuyla celisdiginde (paralaks kaydırma veya dalan sayfa gecislerinde olduğu gibi), bu belirtileri tetikleyen bir duyusal catisma yaratır. Hareket animasyonlarini devre dışı bırakma yolu sağlamak, bu kullanıcıların güvenli bir şekilde web'de gezmesi için zorunludur.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Hareket animasyonlari uygulamada son derece cesitlidir (CSS animasyonlari, JavaScript odaklı donusumler, kaydırmaya bağlı efektler, Web Animations API) ve kullanıcı etkilesimiyle iliskileri statik analiz ile belirlenemez.

Nasıl test edilir

Test, sayfa ile etkileşim kurmak ve farklı ayarlar altında animasyon davranisini gozlemlemeyi gerektirir.

Sayfadaki tüm ogelerle etkileşim kurun: kayirin, dugmelere tıklayın, öğelerin üzerine gelin, sayfalar arasında gezinin.
Etkilesime yanıt olarak meydana gelen tüm hareket animasyonlarini not edin: kayma, yakınlaştırma, paralaks, sayfa gecisleri, kaydırmayla tetiklenen hareketler.
Isletim sistemi ayarlarinda prefers-reduced-motion'i etkinleştirin ve tüm etkileşimleri tekrarlayin.
prefers-reduced-motion etkinleştirildiğinde hareket animasyonlarinin ortadan kaldirildigini veya önemli ölçüde azaltildigini doğrulayın.
Uygulamanin isletim sistemi ayarindan bağımsız kendi animasyon değiştirici saglaypip sağlamadığını kontrol edin.

iOS erişilebilirlik ayarlarinda "Hareketi Azalt" veya Android geliştirici seceneklerinde "Animasyonlari kaldir" etkinlestirerek mobil cihazlarda test edin.

Nasıl düzeltilir

prefers-reduced-motion medya sorgusuna saygı gösterin ve hareket animasyonlari için uygulama düzeyinde bir değiştirici sağlayın.

prefers-reduced-motion tercihine saygı gösterin

/* Varsayılan: purezsiz animasyonlar */
.kart {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kart:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sayfa-giriş {
  animation: kaydır-iceri 0.5s ease-out;
}

@keyframes kaydır-iceri {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Azaltilmis hareket: hareketi kaldir, geri bildirimi koru */
@media (prefers-reduced-motion: reduce) {
  .kart {
    transition: box-shadow 0.15s ease;
  }
  .kart:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .sayfa-giriş {
    animation: solarak-gorun 0.15s ease-out;
  }

  @keyframes solarak-gorun {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

Uygulama düzeyinde animasyon değistirici

<div class="ayarlar-paneli">
  <label class="değistirici">
    <input type="checkbox" id="hareketi-azalt"
      onchange="hareketTercihiniAyarla(this.checked)">
    <span>Hareket animasyonlarini azalt</span>
  </label>
</div>

<script>
function hareketTercihiniAyarla(azalt) {
  document.documentElement.classList.toggle(
    'hareketi-azalt', azalt
  );
  localStorage.setItem('hareketi-azalt',
    azalt ? 'true' : 'false');
}

// Yuklemede tercihi geri yükle
window.addEventListener('DOMContentLoaded', () => {
  const tercih = localStorage.getItem('hareketi-azalt');
  const isTercihEder = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  ).matches;

  if (tercih === 'true' || (tercih === null && isTercihEder)) {
    document.documentElement.classList.add('hareketi-azalt');
    document.getElementById('hareketi-azalt').checked = true;
  }
});
</script>

Paralaks kaydırmayı devre dışı bırakma

/* Paralaks efekti */
.paralaks-arkplan {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  transform: translateZ(-1px) scale(2);
}

/* Azaltilmis hareket için paralaksi kaldir */
@media (prefers-reduced-motion: reduce) {
  .paralaks-arkplan {
    background-attachment: scroll;
    transform: none;
  }
}

/* Uygulama düzeyinde değiştirici için de kaldir */
.hareketi-azalt .paralaks-arkplan {
  background-attachment: scroll;
  transform: none;
}

Sık yapılan hatalar

prefers-reduced-motion medya sorgusunu tamamen görmezden gelmek — bu, harekete duyarlı kullanıcılar için birincil mekanizmadir.
Hareketi kaldırmak yerine yalnızca animasyon süresini azaltmak (hızlı bir kayyis yine de bir kayyistir).
Devre dışı bırakma yolu olmayan paralaks kaydırma efektleri.
Kapatilamayan kaydırmayla tetiklenen animasyonlar (yandan ucarak gelen öğeler).
Animasyonsuz bir yedek sağlamadan kayma, yakınlaştırma veya döndürme içeren sayfa geçiş animasyonlari.
Hareketizsiz bir alternatif sağlamadan öğeleri hareket ettiren (translateY, scale) fareyle üzerine gelme animasyonlari.
Geliştirme ve kalite guvencesi sırasında prefers-reduced-motion etkinleştirilmiş şekilde test etmemek.

2.3.3 Etkileşimlerden Animasyon