prefers-reduced-motion ile Erişilebilir Animasyonlar
Harekete duyarlı kullanıcılar için animasyonları devre dışı bırakarak veya azaltarak erişilebilirlik gereksinimlerine uyun.
prefers-reduced-motion ile Erişilebilir Animasyonlar, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Hareketi Neden Azaltmalıyız?
Bazı kullanıcıların animasyonları zararlı hâle getiren vestibüler bozuklukları, epilepsisi veya başka rahatsızlıkları vardır. CSS, sistem tercihlerini algılayıp bunlara uymak için prefers-reduced-motion medya sorgusunu sunar.
prefers-reduced-motion Sorgusu
Sorgu değerleri:
no-preference— kullanıcı bir tercih belirtmemiştirreduce— kullanıcı OS ayarlarında azaltılmış hareketi etkinleştirmiştir
<div class="box"></div>
Nükleer Seçenek (Önerilmez)
Tüm animasyonları durduran yaygın ancak kaba bir uygulamadır. Bu yaklaşım, yön duygusunu bozmayan yararlı hareket ipuçlarını da ortadan kaldırır:
<div class="box"></div>
Daha İyi: İsteğe Bağlı Hareket
Daha güvenli bir yaklaşım, animasyonları yalnızca hareket tercihi olmayan kullanıcılar için tanımlamak ve varsayılan durumu hareketsiz bırakmaktır:
<button class="btn">Button</button>
<div class="card">Card</div>
Animasyon Türlerini Değiştirme
Azaltılmış hareketi tercih eden kullanıcılar için yön duygusunu bozabilecek hareketleri (translate, scale, rotate) erişilebilir alternatiflerle (opacity, color) değiştirin:
<div class="card demo-hover">Hover me</div>
Sonsuz Animasyonlar
Sonsuz animasyonlar (yükleniyor göstergeleri, titreşimler) özellikle sorunludur. Statik bir geri dönüş sağlayın:
<div class="spinner"></div>
Paralaks Efektleri
Paralaks kaydırma ciddi hareket hastalığına neden olabilir. Azaltılmış hareketi tercih eden kullanıcılar için bunu her zaman devre dışı bırakın:
<div class="parallax">Parallax section</div>
JavaScript Erişimi
Web Animasyonları API'sini veya kaydırma kitaplıklarını kullanırken tercihi JavaScript'te kontrol edin:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG ve Hareket
WCAG 2.3.3 (AAA), etkileşimle tetiklenen animasyonların devre dışı bırakılabilmesini gerektirir. prefers-reduced-motion kullanmak, bu ölçütü karşılamak için önerilen CSS yaklaşımıdır.
Azaltılmış Hareketi Sınama
Chrome DevTools → Oluşturma sekmesinde, OS ayarlarını değiştirmeden sınamak için "CSS prefers-reduced-motion: reduce öykünmesini etkinleştir" seçeneğini etkinleştirin. macOS'ta: Sistem Tercihleri → Erişilebilirlik → Hareketi Azalt.
Amacı Belgeleyin
İşlevsel mi yoksa yalnızca dekoratif mi olduklarını açıklamak için animasyonlara yorum ekleyin. İşlevsel animasyonların (bir süreci veya ilerlemeyi belirtenlerin) erişilebilir alternatifleri olmalıdır; dekoratif olanlar ise basitçe kaldırılabilir.
Hızlı Kontrol
Kartın üzerine gelindiğinde oluşan yükselme efekti için prefers-reduced-motion yaklaşımını en iyi nasıl ele alırsınız?
Özet
Hareket hassasiyetini algılamak için prefers-reduced-motion: reduce kullanın. Tüm animasyonları durdurmak yerine hareketsiz bir varsayılan durum sağlayın ve hareketi yalnızca no-preference sorguları içinde isteğe bağlı olarak etkinleştirin. Azaltılmış hareketi tercih eden kullanıcılar için yön duygusunu bozabilecek transform animasyonlarını opacity veya color geçişleriyle değiştirin. DevTools öykünmesiyle sınayın.
Sıkça Sorulan Sorular
“prefers-reduced-motion ile Erişilebilir Animasyonlar” dersi ücretsiz mi?
Evet — “prefers-reduced-motion ile Erişilebilir Animasyonlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“prefers-reduced-motion ile Erişilebilir Animasyonlar” dersinde ne öğreneceğim?
Harekete duyarlı kullanıcılar için animasyonları devre dışı bırakarak veya azaltarak erişilebilirlik gereksinimlerine uyun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“prefers-reduced-motion ile Erişilebilir Animasyonlar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- @keyframes Sözdizimi ve Animasyon Özelliği
- Animasyon Yönü, Dolgu Modu ve Yineleme
- Animasyonları Zincirleme ve Sıralama
- prefers-reduced-motion ile Erişilebilir Animasyonlar