Ana içeriğe geç

2.3.3 Etkileşimden Kaynaklanan Animasyonlar

Kullanıcı etkileşimiyle tetiklenen hareketli animasyonlar devre dışı bırakılabilir olmalı; rahatsızlık veya dikkat dağınıklığı önlenmelidir.

SC Kodu: 2.3.3 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#animation-from-interactions

Genel Tanım​

WCAG 2.3.3, kullanıcı etkileşimleri (tıklama, hover, kaydırma vb.) sonucunda oluşan animasyonların devre dışı bırakılabilmesini veya gösterilmemesini gerektirir. Amaç, hareketten rahatsız olan kullanıcıların olumsuz etkilenmesini önlemektir.

Faydalar​

  • Fiziksel Konfor: Baş dönmesi ve mide bulantısını önler.
  • Erişilebilirlik: Hareket hassasiyeti olan kullanıcıları destekler.
  • Kontrol: Kullanıcı deneyimi üzerinde kullanıcıya söz hakkı verir.

Kapsam

  • Hover animasyonları
  • Scroll ile tetiklenen efektler
  • Buton ve kart geçişleri
  • Mikro etkileşim animasyonları

Ana Amaç​

Bu kriterin temel amacı, özellikle vestibüler hassasiyeti, baş dönmesi veya hareket kaynaklı rahatsızlıkları olan kullanıcılar için hareketsiz veya azaltılmış hareketli bir deneyim sunmaktır.

Gereksinimler

  • Etkileşimle tetiklenen animasyonlar isteğe bağlı olmalıdır
  • Kullanıcı animasyonları kapatabilmelidir
  • Animasyonlar işlevsellik için zorunlu olmamalıdır

Not: Animasyon, bilginin anlaşılması için zorunlu değilse devre dışı bırakılabilmelidir.

İyi Uygulamalar​

  • Animasyonları kapatmak için ayar sunun.
  • CSS prefers-reduced-motion medya sorgusunu kullanın.
  • Zorunlu olmayan hareketleri kaldırın.
  • Animasyon yerine anlık durum değişimleri tercih edin.

Örnekler ve Açıklamalar​

Örnek: Kullanıcı Tercihi Senaryosu​

Bir kullanıcı “Hareketi azalt” seçeneğini etkinleştirdiğinde, tıklama ve kaydırma animasyonları devre dışı kalır.

Nelerden Kaçınılmalı?

Etkileşimle otomatik başlayan ve kapatılamayan animasyonlar.

HTML/CSS

.card:hover {
  transform: rotate(360deg);
  transition: transform 0.5s;
}

Açıklama:

Bu animasyon hover ile otomatik başlar ve kullanıcı tarafından kapatılamaz. WCAG 2.3.3 kriterini karşılamaz.

Ne Yapılmalı?

Kullanıcı tercihlerine göre animasyonlar devre dışı bırakılmalıdır.

HTML/CSS

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Açıklama:

Bu yaklaşım, hareketi azaltmayı tercih eden kullanıcılar için tüm etkileşim animasyonlarını devre dışı bırakır ve WCAG 2.3.3 gereksinimlerini karşılar.