prefers-reduced-motion Tercihine Uyma
prefers-reduced-motion medya sorgusunu algılayın ve daha az hareket isteyen kullanıcılar için animasyonları devre dışı bırakın ya da azaltın.
prefers-reduced-motion Tercihine Uyma, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
prefers-reduced-motion Medya Özelliği
Bazı kullanıcılar kullanıcı arayüzlerindeki hareketler nedeniyle mide bulantısı, baş dönmesi veya nöbet yaşayabilir. Bu kullanıcılar işletim sistemlerini hareketi azaltacak şekilde ayarlar. prefers-reduced-motion medya özelliği bu tercihi algılar ve CSS'nin buna yanıt vermesini sağlar.
CSS'te Azaltılmış Hareketi Algılama
Animasyonları normal şekilde uygulayın, ardından daha az hareketi tercih eden kullanıcılar için geçersiz kılmak veya devre dışı bırakmak üzere karşı sorgunun içine alın.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}'Tamamen Kaldırma, Azalt' İlkesi
prefers-reduced-motion: reduce, hiç hareket olmaması anlamına gelmez. Bazı hareketler önemli kullanıcı arayüzü durum değişikliklerini aktarır. Animasyonları tamamen kaldırmak yerine yavaşlatın veya çapraz geçişlere indirgeyerek basitleştirin.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}Kesin Çözüm: Tüm Animasyonları Devre Dışı Bırakma
Yaygın bir yaklaşım, azaltılmış hareketi tercih eden kullanıcılar için tüm geçişleri ve animasyonları genel olarak devre dışı bırakmaktır. Her animasyon ayrı ayrı ayarlanmamış olsa bile bu, güvenli bir temel çözümdür.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}JavaScript'te Azaltılmış Hareketi Algılama
Tercihi JavaScript'te algılamak için matchMedia API'sini kullanın. Bu, tuval animasyonlarını, JavaScript ile yönetilen hareketleri veya otomatik oynatılan videoları denetlemek için kullanışlıdır.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Kaydırma Davranışı ve Otomatik Oynatma
Azaltılmış hareketi tercih eden kullanıcılar için yumuşak kaydırmayı da devre dışı bırakın: scroll-behavior: auto. Videoların otomatik oynatılmasını durdurun. İçeriği yanıp söndürmeyin veya titreştirmeyin.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Etkileşimlerden Kaynaklanan Animasyon
WCAG 2.3.3 (Seviye AAA), kullanıcı etkileşimiyle tetiklenen hareketlerin devre dışı bırakılabilmesini gerektirir. prefers-reduced-motion tercihlerine saygı göstererek bu ölçütü karşılar ve vestibüler bozuklukları olan kullanıcılar için erişilebilirliği artırırsınız.
Azaltılmış Hareketi Test Etme
Chrome DevTools'ta: oluşturma panelini açın (üç nokta menüsü → Diğer araçlar → Oluşturma) ve 'CSS medya özelliği prefers-reduced-motion öykünmesini' etkinleştirin. Yayına almadan önce kullanıcı arayüzünüzü bu modda test edin.
Uygulama: Güvenli Animasyon Deseni
Hareketi güvenli bir animasyon varsayılan olarak uygulanır ve genel olarak kolayca devre dışı bırakılabilecek şekilde kapsanır.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}Odak Animasyonu Korunmalı
Odak göstergeleri (hangi öğenin odakta olduğunu gösteren çerçeve), azaltılmış hareketi tercih eden kullanıcılar için bile NOT kaldırılmalıdır. Bunlar klavye ile gezinme için gereklidir ve genellikle vestibüler tetikleyici değildir.
Kitaplıklar ve prefers-reduced-motion
Popüler animasyon kitaplıkları (Framer Motion, GSAP, Anime.js), azaltılmış hareket için yerleşik desteğe sahiptir. Framer Motion'un useReducedMotion() kancası, React'te karmaşık animasyonları koşula bağlı olarak devre dışı bırakmayı kolaylaştırır.
Hızlı Kontrol
Kullanıcının kullanıcı arayüzünde daha az hareket görme tercihini hangi CSS medya özelliği algılar?
Özet: prefers-reduced-motion
Bazı kullanıcıların vestibüler ve nörolojik sağlık nedenleriyle daha az harekete ihtiyacı vardır. Animasyonları devre dışı bırakmak veya basitleştirmek için @media (prefers-reduced-motion: reduce) kullanın. JS'te matchMedia ile algılayın. Kesin çözüm: animation/transition-duration değerini genel olarak 0.01ms yapın. WCAG 2.3.3 bunu önerir. DevTools oluşturma paneliyle test edin.
Sıkça Sorulan Sorular
“prefers-reduced-motion Tercihine Uyma” dersi ücretsiz mi?
Evet — “prefers-reduced-motion Tercihine Uyma” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“prefers-reduced-motion Tercihine Uyma” dersinde ne öğreneceğim?
prefers-reduced-motion medya sorgusunu algılayın ve daha az hareket isteyen kullanıcılar için animasyonları devre dışı bırakın ya da azaltın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 Tercihine Uyma” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- CSS Özel Özellikleri: Tanımlama ve Güncelleme
- Geçişler: Özellik Süre Zamanlama
- @keyframes Animasyonları
- prefers-reduced-motion Tercihine Uyma