Mobil uygulamalarda Reduce Motion: özü ve hareket azaltma ayarları

Erişilebilirlikte Reduce Motion nedir?

Reduce Motion — işletim sistemine, tarayıcıya ve uygulamalara animasyonu, hareketi, ölçeklemeyi ve paralaks efektlerini en aza indirmelerini veya tamamen kapatmalarını bildiren sistem ayarıdır. Özellik, hareketli arayüz öğelerinin mide bulantısı, baş dönmesi, yön kaybı ve migren tetiklediği vestibüler bozukluğu olan kişiler için tasarlanmıştır.

İç kulaktaki vestibüler sistem, denge duygusundan ve uzayda yönelmeden sorumludur. Gözler ekranda hareket gördüğünde ancak vestibüler aparat vücudun karşılık gelen hareketini hissetmediğinde duyusal bir çakışma oluşur. Bu çakışma bitkisel bir tepki başlatır: mide bulantısı, soğuk ter, baş dönmesi. Vestibular Disorders Association'a göre, 40 yaş üstü kişilerin yaklaşık %35'i arayüzlerdeki hareket efektlerinden rahatsızlık duyar.

Reduce Motion ile basit animasyon kapatma arasındaki temel fark sistem düzeyidir. Etkinleştirildiğinde ayar, işletim sistemi API'si veya CSS medya işlevi prefers-reduced-motion aracılığıyla tüm uygulamalara ve web sitelerine iletilir. Geliştiricinin kullanıcının animasyon isteyip istemediğini tahmin etmesine gerek yoktur — işletim sistemi bunu bildirir. Bu, progressive enhancement yaklaşımının bir parçasıdır: animasyon bir iyileştirmedir, zorunlu bir öğe değildir.

Reduce Motion hangi efektleri kapatır

Reduce Motion paralaks efektlerini (cihaz eğildiğinde arka planın kayması), ekranlar arası geçiş animasyonlarını (push, slide, fade), dokunmada simge ölçeklemesini, mesaj efektlerini (SMS baloncukları), yükleme animasyonlarını (spinner, skeleton, ilerleme çubuğu animasyonu), oyunlarda paralaksı ve web'deki parallax scrolling efektlerini etkiler. Statik görüntüler ve videolar etkilenmez.

Reduce Motion'a kimin ihtiyacı var

Reduce Motion'ın ana kitlesi vestibüler bozukluğu (Meniere hastalığı, labirentit, BPPV), migreni (özellikle auralı), kinetozu (taşıtlarda taşıt tutması) ve bazı epilepsi türleri olan kişilerdir. Özellik yaşlı kullanıcılar için de faydalıdır — vestibüler aparattaki yaşa bağlı değişiklikler harekete duyarlılığı artırır — ve DEHB'li kullanıcılar için de yararlıdır, çünkü hareketli öğeler okumadan uzaklaştırır.

iOS'ta Reduce Motion: ayar ve sistem efektleri

iOS'ta Reduce Motion, Settings > Accessibility > Motion konumundadır ve üç seçenek içerir: Reduce Motion (ana anahtar), Auto-Play Message Effects (iMessage efektlerinin otomatik oynatılması) ve Auto-Play Video Previews (App Store'da videoların otomatik oynatılması). Reduce Motion en güçlüsüdür: duvar kâğıdı paralaksını, uygulama açma animasyonunu (zoom), ekranlar arası geçişleri (push, cross-fade ile değiştirilir) ve ana ekrandaki simge efektlerini kapatır.

Teknik olarak iOS, Reduce Motion'ı UIKit düzeyinde UIView animations ve UIViewControllerAnimatedTransitioning aracılığıyla uygular. Ayar etkinleştirildiğinde, > 0 süreli UIView.animate 0,01 saniyeye indirilir ve UIViewController.transitionDuration 0 döndürür. Paralaks için iOS, UIWindow üzerinde UIInterpolatingMotionEffect'i kapatır. Geliştirici durumu UIAccessibility.isReduceMotionEnabled aracılığıyla kontrol edebilir.

Bir iOS uygulamasında Reduce Motion'ı kontrol etme

Bir geliştirici iOS'ta animasyonu Reduce Motion'a uyarlayabilir: karmaşık geçişleri fade efektleriyle değiştirir, özel UI bileşenlerinde paralaksı kapatır ve animasyonların süresini kısaltır. SwiftUI, reduceMotion etkinken özel bir .animation(nil) değiştirici sağlar.

import UIKit

class MotionManager {

    // Reduce Motion durumunu kontrol et
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Reduce Motion'ı dikkate alan güvenli animasyon
    static func animate(
        duration: TimeInterval,
        delay: TimeInterval = 0,
        options: UIView.AnimationOptions = [],
        animations: @escaping () -> Void,
        completion: ((Bool) -> Void)? = nil
    ) {
        let adjustedDuration = isReduceMotionEnabled
            ? 0.01
            : max(duration, 0.01)
        UIView.animate(
            withDuration: adjustedDuration,
            delay: delay,
            options: options,
            animations: animations,
            completion: completion
        )
    }
}

// SwiftUI — Reduce Motion için değiştirici
import SwiftUI

struct MotionAwareView: View {
    @Environment(\.accessibilityReduceMotion)
    private var reduceMotion

    @State private var isAnimating = false

    var body: some View {
        Circle()
            .scaleEffect(isAnimating ? 1.2 : 1.0)
            .animation(
                reduceMotion
                    ? nil
                    : .easeInOut(duration: 1.0).repeatForever(),
                value: isAnimating
            )
            .onAppear { isAnimating = true }
    }
}

// Reduce Motion değişikliğine abone ol
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

MotionManager sınıfı isReduceMotionEnabled'i kontrol eder ve animasyonun süresini uyarlar: Reduce Motion etkinken süre 0,01 saniyeye (fiilen anında) indirilir. SwiftUI .animation(nil) değiştiricisi, reduceMotion == true olduğunda animasyonu tamamen kapatır. reduceMotionStatusDidChangeNotification'a abonelik, uygulamayı yeniden başlatmadan animasyonu dinamik olarak değiştirmeye olanak tanır.

iMessage'ta Auto-Play Message Effects

iOS'un ayrı bir seçeneği — Auto-Play Message Effects — iMessage'taki efektlerin oynatılmasını kontrol eder: balon animasyonu, konfeti, lazerler ve havai fişekler. Reduce Motion etkinken iMessage efektleri otomatik olarak kapatılır. Geliştirici bu seçeneği UIAccessibility.isReduceMotionEnabled aracılığıyla kontrol edebilir — Message Effects için ayrı bir API yoktur; genel ayara bağlıdırlar.

Android'de animasyonları kaldırma: Geliştirici Seçenekleri ve Erişilebilirlik

Android'de “Animasyonları kaldır” ayarı iki yerde bulunur: Settings > Accessibility > Animasyonları kaldır (erişilebilirlik ayarları için) ve Geliştirici Seçenekleri > Animasyon ölçeği (geliştiriciler için). Erişilebilirlik sürümü, ekranlar arası geçişler, uygulama açma animasyonu ve yükleme efektleri dahil tüm sistem animasyonlarını kapatır. Geliştirici Seçenekleri ölçeği 0,5x, 0,1x'e düşürmeyi veya tamamen kapatmayı sağlar.

Teknik olarak Android, animasyon kapatmayı sistem özellikleri üzerinden uygular: window_animation_scale, transition_animation_scale ve animator_duration_scale. Erişilebilirlik ayarında üçü de 0 değerini alır. Sistem Launcher'ı ve sistem uygulamaları bu değerleri kontrol eder. Üçüncü taraf uygulamalar için Android, AnimationScaleObserver aracılığıyla sistem ayarını otomatik okuyan Jetpack Compose ve View sistemini kullanmayı önerir.

Bir Android uygulamasında kontrol

Bir geliştirici Android'de animasyon durumunu Settings.Global üzerinden kontrol edebilir ve arayüzü uyarlayabilir. Jetpack Compose, otomatik ayar için AnimationScaleObserver sağlar. Anahtar değer animator_duration_scale'dir: 0 ise animasyon tamamen kapatılmıştır.

import android.content.Context
import android.provider.Settings
import android.database.ContentObserver
import android.os.Handler
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.runtime.getValue

class AndroidMotionHelper {

    // Animasyonun kapalı olup olmadığını kontrol et
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Animasyon değişimini gözlemle (ContentObserver)
    fun observeAnimationScale(
        context: Context,
        onChange: (Boolean) -> Unit
    ): ContentObserver {
        val observer = object : ContentObserver(Handler()) {
            override fun onChange(selfChange: Boolean) {
                onChange(isAnimationDisabled(context))
            }
        }
        context.contentResolver.registerContentObserver(
            Settings.Global.getUriFor(
                Settings.Global.ANIMATOR_DURATION_SCALE
            ),
            false,
            observer
        )
        return observer
    }
}

// Jetpack Compose — ayarları dikkate alan animasyon
@Composable
fun MotionAwareAnimation(enabled: Boolean) {
    val context = androidx.compose.ui.platform.LocalContext.current
    val noMotion = AndroidMotionHelper().isAnimationDisabled(context)

    val scale by animateFloatAsState(
        targetValue = if (enabled) 1f else 0f,
        animationSpec = if (noMotion) {
            androidx.compose.animation.core.tween(durationMillis = 0)
        } else {
            androidx.compose.animation.core.spring()
        },
        label = "scale"
    )
    // Animasyonlu arayüz
}

AndroidMotionHelper sınıfı ANIMATOR_DURATION_SCALE'i Settings.Global üzerinden kontrol eder, değişiklikleri izlemek için ContentObserver sağlar ve Jetpack Compose animasyonlarının uyum sağlamasına olanak tanır: animasyon kapatıldığında durationMillis = 0 (anında uygulama). View sistemi için bir animasyon başlatmadan önce ViewPropertyAnimator.withLayer() kullanın ve isAnimationDisabled() kontrolünü yapın.

Erişilebilirlik ve Geliştirici Seçenekleri arasındaki fark

Android'deki “Animasyonları kaldır” erişilebilirlik ayarı, sıradan bir kullanıcının animasyonu kapatmasının tek yoludur. Geliştirici Seçenekleri yalnızca geliştiricilere yöneliktir ve gizli olabilir. Erişilebilirlik ayarı, sistem API'si aracılığıyla tüm uygulamalara garantili olarak iletilir. Geliştirici, Geliştirici Seçeneklerine değil AccessibilityManager'a güvenmelidir.

CSS prefers-reduced-motion: web için medya işlevi

CSS medya işlevi prefers-reduced-motion, kullanıcı işletim sisteminde Reduce Motion'ı etkinleştirdiğinde web geliştiricilerin animasyonu kapatmasına veya değiştirmesine olanak tanır. Tarayıcı, sistem ayarı etkinken reduce değerini, ayar değiştirilmemişse no-preference değerini iletir. 2020'den beri tüm modern tarayıcılarda desteklenir: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

MDN ve W3C önerisi — animasyonlarla birlikte her zaman prefers-reduced-motion: reduce belirlemektir. Reduce Motion'ı etkinleştiren kullanıcı nabız, paralaks, otomatik oynatılan karuseller ve skeleton yükleme görmemelidir. Animasyon yerine statik içerik gösterilebilir veya minimum süreli CSS transition kullanılabilir. Aşağıda tam uyarlama örneği verilmiştir.

prefers-reduced-motion ile bir web sayfasını uyarlama

prefers-reduced-motion: reduce olduğunda bir web sayfası şunları yapmalıdır: CSS animasyonlarını (@keyframes) kapatmalı, CSS transition'larını anında değişikliklerle değiştirmeli, JavaScript animasyonlarını (requestAnimationFrame) durdurmalı, parallax scrolling'i kapatmalı, karuselleri ve kaydırıcıları durdurmalı, skeleton efektlerini kapatmalı ve spinner'ı statik bir göstergeyle değiştirmelidir.

/* Temel animasyonlar (no-preference) */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #0066CC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

.parallax-bg {
    transform: translateZ(-1px) scale(1.5);
    transition: transform 0.3s ease-out;
}

/* Reduce Motion: her şeyi kapatıyoruz */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-top-color: #0066CC;
    }

    .skeleton {
        animation: none;
        background: #f0f0f0;
    }

    .parallax-bg {
        transform: none;
        transition: none;
    }

    .carousel {
        scroll-behavior: auto;
        overflow-x: auto;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

CSS örneğinde prefers-reduced-motion: reduce için animasyonun küresel bir sıfırlaması kullanılır: tüm animasyonlar ve geçişler 0,01ms süre ve iteration-count 1 alır. Ayrıca spinner (statik kenarlık), skeleton (titreşimsiz gri arka plan), paralaks (kapatılmış) ve karusel (smooth yerine scroll-behavior: auto) yeniden tanımlanır. Evrensel seçici *, tüm öğeler için bir güvenlik ağıdır.

prefers-reduced-motion'ın JavaScript ile algılanması

JavaScript için matchMedia('(prefers-reduced-motion: reduce)').matches kullanılabilir. true ise — requestAnimationFrame, setInterval veya Web Animations API aracılığıyla animasyon çalıştırmayın. Örnek: reduceMotion'da kaydırıcı otomatik dönmez, yalnızca düğmelerle döner. GSAP, Framer Motion ve Anime.js gibi kitaplıklar bu kontrolü kendi erişilebilirlik seçenekleriyle destekler.

WCAG 2.2: etkileşim kaynaklı animasyon ve kriter 2.3.3

WCAG 2.2 (2023) yeni bir kriter 2.3.3 Animation from Interactions (AAA düzeyi) getirmiştir: animasyon kullanıcı etkileşiminden (tıklama, kaydırma, üzerine gelme) başlıyorsa kapatılabilir olmalı veya 5 saniyeyi aşmamalıdır. Etkileşimle ilgisi olmayan animasyon (yükleme spinner'ı, ilerleme çubuğu) bu kriterin kapsamına girmez. AA düzeyi için animasyonun bilgi aktarmanın tek yolu olmaması yeterlidir.

Kriter 2.3.3, parallax scrolling ve “çekip yenile” animasyonundan kaynaklanan taşıt tutması şikayetlerinin ardından eklenmiştir. W3C tüm sitelere ve uygulamalara şunları önerir: öğeleri 5 saniyeden fazla canlandırmayın, animasyonu kapatma anahtarı sağlayın (kontrol paneli veya prefers-reduced-motion aracılığıyla) ve nabız gibi atan ve yanıp sönen öğeleri kullanmayın (epilepsi için tehlikeli).

Animasyonlar için WCAG 2.2'ye nasıl uyulur

WCAG 2.2'ye uymak için bir geliştirici şunları yapmalıdır: prefers-reduced-motion'ı kontrol etmeli ve ayar etkinken animasyonu kapatmalı, animasyonun maksimum süresini 5 saniye belirlemeli (animasyon kapatılamıyorsa), uygulama ayarlarında animasyon için bir UI anahtarı sağlamalı, paralaks efektlerini tek gezinme yöntemi olarak kullanmamalı ve tüm tarayıcılarda ve tüm cihazlarda Reduce Motion etkinken test etmelidir.

• prefers-reduced-motion kontrolü — CSS/JS animasyonu olan tüm web siteleri için zorunludur
• En fazla 5 saniye — etkileşim kaynaklı animasyon daha uzun sürmemelidir (kriter 2.3.3 AAA)
• UI anahtarı — uygulamada ayarlarda animasyonu kapatma seçeneği bulunmalıdır
• Paralaks gezinme yok — içerik yalnızca parallax scrolling ile erişilebilir olmamalıdır

Reduce Motion test araçları

Reduce Motion ile uygulama davranışını test etmek için şunları kullanın: iOS Simulator (Settings > Accessibility içinde Reduce Motion'ı etkinleştirin), Android Emulator (“Animasyonları kaldır”ı etkinleştirin), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion) ve Safari web denetçisi (macOS System Preferences > Accessibility > Display içinde Reduce Motion'ı etkinleştirin). İçeriğin animasyon olmadan erişilebilir ve okunabilir kaldığını kontrol edin.