Reduce Motion σε εφαρμογές κινητών: ουσία, ρυθμίσεις μείωσης κίνησης

Τι είναι το Reduce Motion στην προσβασιμότητα;

Reduce Motion — μια ρύθμιση συστήματος που δίνει εντολή στο λειτουργικό σύστημα, το πρόγραμμα περιήγησης και τις εφαρμογές να ελαχιστοποιήσουν ή να απενεργοποιήσουν πλήρως την κινούμενη εικόνα, την κίνηση, την κλίμακα και τα εφέ parallax. Η λειτουργία προορίζεται για άτομα με αιθουσαίες διαταραχές, στα οποία τα κινούμενα στοιχεία διεπαφής προκαλούν ναυτία, ζάλη, αποπροσανατολισμό και ημικρανία.

Το αιθουσαίο σύστημα του έσω ωτός είναι υπεύθυνο για την αίσθηση ισορροπίας και τον προσανατολισμό στο χώρο. Όταν τα μάτια βλέπουν κίνηση στην οθόνη αλλά η αιθουσαία συσκευή δεν αισθάνεται την αντίστοιχη μετακίνηση του σώματος, προκύπτει μια αισθητηριακή διένεξη. Αυτή η διένεξη πυροδοτεί μια φυτική αντίδραση: ναυτία, ψυχρός ιδρώτας, ζάλη. Σύμφωνα με την Ένωση Αιθουσαίων Διαταραχών, περίπου το 35% των ατόμων άνω των 40 ετών βιώνουν δυσφορία από τα εφέ κίνησης στις διεπαφές.

Η βασική διαφορά του Reduce Motion από την απλή απενεργοποίηση κινούμενων εικόνων — το επίπεδο συστήματος. Η ενεργοποιημένη ρύθμιση μεταδίδεται σε όλες τις εφαρμογές και ιστοσελίδες μέσω του API του λειτουργικού συστήματος ή της λειτουργίας πολυμέσων CSS prefers-reduced-motion. Ο προγραμματιστής δεν χρειάζεται να μαντέψει αν ο χρήστης θέλει κινούμενη εικόνα — το σύστημα το γνωστοποιεί. Αυτό αποτελεί μέρος της προσέγγισης progressive enhancement: η κινούμενη εικόνα είναι μια βελτίωση, όχι υποχρεωτικό στοιχείο.

Ποια εφέ απενεργοποιεί το Reduce Motion

Reduce Motion επηρεάζει τα εφέ parallax (μετατόπιση φόντου κατά την κλίση της συσκευής), την κινούμενη εικόνα μεταβάσεων μεταξύ οθονών (push, slide, fade), την κλίμακα εικονιδίων κατά το πάτημα, τα εφέ μηνυμάτων (φυσαλίδες SMS), την κινούμενη εικόνα φόρτωσης (spinner, skeleton, progress bar animation), το parallax σε παιχνίδια και τα εφέ parallax scrolling ιστού. Οι στατικές εικόνες και τα βίντεο δεν επηρεάζονται.

Ποιοι χρειάζονται το Reduce Motion

Το κύριο κοινό του Reduce Motion — άτομα με αιθουσαίες διαταραχές (νόσος Meniere, λαβυρινθίτιδα, BPPV), ημικρανία (ειδικά με αύρα), κινέτωση (ναυτία σε μετακινήσεις) και ορισμένες μορφές επιληψίας. Η λειτουργία είναι επίσης χρήσιμη για ηλικιωμένους χρήστες — οι ηλικιακές αλλαγές στην αιθουσαία συσκευή αυξάνουν την ευαισθησία στην κίνηση, και για χρήστες με ΔΕΠΥ — τα κινούμενα στοιχεία αποσπούν την προσοχή από την ανάγνωση.

Reduce Motion στο iOS: ρύθμιση και εφέ συστήματος

Στο iOS το Reduce Motion βρίσκεται στις Settings > Accessibility > Motion και περιλαμβάνει τρεις επιλογές: Reduce Motion (κύριος διακόπτης), Auto-Play Message Effects (αυτόματη αναπαραγωγή εφέ iMessage) και Auto-Play Video Previews (αυτόματη προεπισκόπηση βίντεο στο App Store). Το Reduce Motion είναι το πιο ισχυρό: απενεργοποιεί το parallax ταπετσαρίας, την κινούμενη εικόνα ανοίγματος εφαρμογών (zoom), τις μεταβάσεις μεταξύ οθονών (το push αντικαθίσταται με cross-fade) και τα εφέ εικονιδίων στην αρχική οθόνη.

Τεχνικά, το iOS υλοποιεί το Reduce Motion σε επίπεδο UIKit μέσω UIView animations και UIViewControllerAnimatedTransitioning. Με ενεργοποιημένη τη ρύθμιση, το UIView.animate με διάρκεια > 0 μειώνεται σε 0,01 δευτ. και το UIViewController.transitionDuration επιστρέφει 0. Για το parallax, το iOS απενεργοποιεί το UIInterpolatingMotionEffect στο UIWindow. Ο προγραμματιστής μπορεί να ελέγξει την κατάσταση μέσω UIAccessibility.isReduceMotionEnabled.

Έλεγχος Reduce Motion σε εφαρμογή iOS

Ο προγραμματιστής μπορεί να προσαρμόσει την κινούμενη εικόνα στο iOS για το Reduce Motion: να αντικαταστήσει σύνθετες μεταβάσεις με εφέ fade, να απενεργοποιήσει το parallax σε προσαρμοσμένα στοιχεία UI και να συντομεύσει τη διάρκεια των κινούμενων εικόνων. Το SwiftUI παρέχει έναν ειδικό modifier .animation(nil) όταν το reduceMotion είναι ενεργό.

import UIKit

class MotionManager {

    // Έλεγχος κατάστασης Reduce Motion
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Ασφαλής κινούμενη εικόνα με βάση το Reduce Motion
    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
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
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

Η κλάση MotionManager ελέγχει το isReduceMotionEnabled και προσαρμόζει τη διάρκεια της κινούμενης εικόνας: με ενεργό Reduce Motion, η διάρκεια μειώνεται σε 0,01 δευτ. (ουσιαστικά άμεση). Ο modifier SwiftUI .animation(nil) απενεργοποιεί πλήρως την κινούμενη εικόνα όταν reduceMotion == true. Η εγγραφή στο reduceMotionStatusDidChangeNotification επιτρέπει τη δυναμική εναλλαγή της κινούμενης εικόνας χωρίς επαναφόρτωση της εφαρμογής.

Auto-Play Message Effects στο iMessage

Μια ξεχωριστή επιλογή του iOS — Auto-Play Message Effects — ελέγχει την αναπαραγωγή εφέ στο iMessage: κινούμενη εικόνα μπαλονιών, κομφετί, λέιζερ και πυροτεχνημάτων. Με ενεργοποιημένο το Reduce Motion, τα εφέ iMessage απενεργοποιούνται αυτόματα. Ο προγραμματιστής μπορεί να ελέγξει αυτήν την επιλογή μέσω UIAccessibility.isReduceMotionEnabled — δεν υπάρχει ξεχωριστό API για το Message Effects, είναι συνδεδεμένα με τη γενική ρύθμιση.

Κατάργηση κινούμενης εικόνας στο Android: Developer Options και Accessibility

Στο Android η ρύθμιση "Κατάργηση κινούμενης εικόνας" βρίσκεται σε δύο σημεία: Ρυθμίσεις > Προσβασιμότητα > Κατάργηση κινούμενης εικόνας (για ρυθμίσεις προσβασιμότητας) και Επιλογές προγραμματιστή > Κλίμακα κινούμενης εικόνας (για προγραμματιστές). Η έκδοση προσβασιμότητας απενεργοποιεί όλες τις κινούμενες εικόνες συστήματος, συμπεριλαμβανομένων των μεταβάσεων μεταξύ οθονών, της κινούμενης εικόνας ανοίγματος εφαρμογών και των εφέ φόρτωσης. Οι Επιλογές προγραμματιστή επιτρέπουν τη μείωση της κλίμακας σε 0,5x, 0,1x ή την πλήρη απενεργοποίηση.

Τεχνικά, το Android υλοποιεί την απενεργοποίηση κινούμενων εικόνων μέσω ιδιοτήτων συστήματος: window_animation_scale, transition_animation_scale και animator_duration_scale. Στη ρύθμιση προσβασιμότητας, και οι τρεις λαμβάνουν τιμή 0. Ο Εκκινητής συστήματος και οι εφαρμογές συστήματος ελέγχουν αυτές τις τιμές. Για εφαρμογές τρίτων, το Android συνιστά τη χρήση Jetpack Compose και View system, που διαβάζουν αυτόματα τη ρύθμιση συστήματος μέσω AnimationScaleObserver.

Έλεγχος σε εφαρμογή Android

Ο προγραμματιστής μπορεί να ελέγξει την κατάσταση κινούμενης εικόνας στο Android μέσω Settings.Global και να προσαρμόσει το UI. Το Jetpack Compose παρέχει AnimationScaleObserver για αυτόματη προσαρμογή. Η βασική τιμή — animator_duration_scale: αν είναι 0, η κινούμενη εικόνα είναι πλήρως απενεργοποιημένη.

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 {

    // Έλεγχος απενεργοποίησης κινούμενης εικόνας
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Παρακολούθηση αλλαγής κινούμενης εικόνας (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 — κινούμενη εικόνα με βάση ρυθμίσεις
@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"
    )
    // Διεπαφή με κινούμενη εικόνα
}

Η κλάση AndroidMotionHelper ελέγχει το ANIMATOR_DURATION_SCALE μέσω Settings.Global, παρέχει ContentObserver για παρακολούθηση αλλαγών και επιτρέπει στις κινούμενες εικόνες Jetpack Compose να προσαρμοστούν: με απενεργοποιημένη κινούμενη εικόνα, durationMillis = 0 (άμεση εφαρμογή). Για το View system, χρησιμοποιήστε ViewPropertyAnimator.withLayer() και ελέγξτε το isAnimationDisabled() πριν ξεκινήσετε κινούμενη εικόνα.

Διαφορά μεταξύ Accessibility και Developer Options

Η ρύθμιση προσβασιμότητας "Κατάργηση κινούμενης εικόνας" στο Android — ο μόνος τρόπος για έναν απλό χρήστη να απενεργοποιήσει την κινούμενη εικόνα. Οι Επιλογές προγραμματιστή προορίζονται μόνο για προγραμματιστές και μπορεί να είναι κρυμμένες. Η ρύθμιση προσβασιμότητας είναι εγγυημένο ότι μεταδίδεται σε όλες τις εφαρμογές μέσω του API συστήματος. Ο προγραμματιστής πρέπει να βασίζεται στο AccessibilityManager, όχι στις Επιλογές προγραμματιστή.

CSS prefers-reduced-motion: λειτουργία πολυμέσων για τον ιστό

Η λειτουργία πολυμέσων CSS prefers-reduced-motion επιτρέπει στους προγραμματιστές ιστού να απενεργοποιούν ή να αντικαθιστούν την κινούμενη εικόνα όταν ο χρήστης έχει ενεργοποιήσει το Reduce Motion στο λειτουργικό σύστημα. Το πρόγραμμα περιήγησης μεταδίδει την τιμή reduce όταν η ρύθμιση συστήματος είναι ενεργή, no-preference — αν η ρύθμιση δεν έχει αλλάξει. Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης από το 2020: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

Σύσταση του MDN και του W3C — να ορίζετε πάντα το prefers-reduced-motion: reduce μαζί με κινούμενες εικόνες. Ο χρήστης που έχει ενεργοποιήσει το Reduce Motion δεν πρέπει να βλέπει παλμούς, parallax, αυτόματη αναπαραγωγή καρουζέλ και φόρτωση skeleton. Αντί για κινούμενη εικόνα, μπορεί να εμφανίζεται στατικό περιεχόμενο ή να χρησιμοποιείται CSS transition με ελάχιστη διάρκεια. Παρακάτω δίνεται ένα παράδειγμα πλήρους προσαρμογής.

Προσαρμογή ιστοσελίδας μέσω prefers-reduced-motion

Με prefers-reduced-motion: reduce η ιστοσελίδα πρέπει: να απενεργοποιήσει τις κινούμενες εικόνες CSS (@keyframes), να αντικαταστήσει τα CSS transitions με άμεσες αλλαγές, να σταματήσει τις κινούμενες εικόνες JavaScript (requestAnimationFrame), να απενεργοποιήσει το parallax scrolling, να σταματήσει τα καρουζέλ και τα ρυθμιστικά, να απενεργοποιήσει τα εφέ skeleton και να αντικαταστήσει το spinner με στατική ένδειξη.

/* Βασικές κινούμενες εικόνες (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: απενεργοποιούμε τα πάντα */
@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 χρησιμοποιείται καθολική επαναφορά κινούμενης εικόνας στο prefers-reduced-motion: reduce: όλες οι κινούμενες εικόνες και μεταβάσεις λαμβάνουν duration 0.01ms και iteration-count 1. Ξεχωριστά έχουν παρακαμφθεί το spinner (στατικό περίγραμμα), το skeleton (γκρι φόντο χωρίς τρεμόπαιγμα), το parallax (απενεργοποιημένο) και το καρουζέλ (scroll-behavior: auto αντί για smooth). Ο καθολικός επιλογέας * — ασφάλεια για όλα τα στοιχεία.

Ανίχνευση prefers-reduced-motion σε JavaScript

Για JavaScript είναι διαθέσιμο το matchMedia('(prefers-reduced-motion: reduce)').matches. Αν true — μην εκτελείτε κινούμενες εικόνες μέσω requestAnimationFrame, setInterval ή Web Animations API. Παράδειγμα: το ρυθμιστικό με reduceMotion δεν περιστρέφεται αυτόματα, μόνο με κουμπιά. Οι βιβλιοθήκες GSAP, Framer Motion και Anime.js υποστηρίζουν αυτόν τον έλεγχο μέσω των επιλογών προσβασιμότητάς τους.

WCAG 2.2: κινούμενη εικόνα από αλληλεπίδραση και κριτήριο 2.3.3

Το WCAG 2.2 (2023) εισήγαγε ένα νέο κριτήριο 2.3.3 Animation from Interactions (επίπεδο AAA): αν η κινούμενη εικόνα ενεργοποιείται από αλληλεπίδραση χρήστη (κλικ, κύλιση, αιώρηση), πρέπει να μπορεί να απενεργοποιηθεί ή να μην υπερβαίνει τα 5 δευτερόλεπτα. Η κινούμενη εικόνα που δεν σχετίζεται με αλληλεπίδραση (spinner φόρτωσης, γραμμή προόδου) δεν εμπίπτει σε αυτό το κριτήριο. Για το επίπεδο AA αρκεί η κινούμενη εικόνα να μην είναι ο μόνος τρόπος μετάδοσης πληροφοριών.

Το κριτήριο 2.3.3 προστέθηκε μετά από πολυάριθμες καταγγελίες για ναυτία από parallax scrolling και κινούμενη εικόνα "έλξη-ανανέωση". Το W3C συνιστά σε όλους τους ιστότοπους και εφαρμογές: μην κινείτε στοιχεία για περισσότερο από 5 δευτερόλεπτα, παρέχετε διακόπτη απενεργοποίησης κινούμενων εικόνων (μέσω πίνακα ελέγχου ή prefers-reduced-motion), μην χρησιμοποιείτε παλλόμενα και αναβοσβήνοντα στοιχεία (επικίνδυνα για επιληψία).

Πώς να συμμορφωθείτε με το WCAG 2.2 για κινούμενες εικόνες

Για συμμόρφωση με το WCAG 2.2 ο προγραμματιστής πρέπει: να ελέγξει το prefers-reduced-motion και να απενεργοποιήσει την κινούμενη εικόνα σε ενεργή ρύθμιση, να ορίσει μέγιστη διάρκεια κινούμενης εικόνας 5 δευτερόλεπτα (αν η κινούμενη εικόνα δεν μπορεί να απενεργοποιηθεί), να παρέχει διακόπτη UI κινούμενης εικόνας στις ρυθμίσεις της εφαρμογής, να μην χρησιμοποιεί εφέ parallax ως μοναδικό τρόπο πλοήγησης και να δοκιμάζει με ενεργοποιημένο το Reduce Motion σε όλα τα προγράμματα περιήγησης και συσκευές.

• Έλεγχος prefers-reduced-motion — υποχρεωτικός για όλους τους ιστότοπους με κινούμενη εικόνα CSS/JS
• Μέγιστο 5 δευτερόλεπτα — η κινούμενη εικόνα από αλληλεπίδραση δεν πρέπει να διαρκεί περισσότερο (κριτήριο 2.3.3 AAA)
• Διακόπτης UI — η εφαρμογή πρέπει να έχει επιλογή απενεργοποίησης κινούμενης εικόνας στις ρυθμίσεις
• Χωρίς πλοήγηση parallax — το περιεχόμενο δεν πρέπει να είναι προσβάσιμο μόνο μέσω parallax scrolling

Εργαλεία δοκιμής Reduce Motion

Για τη δοκιμή της συμπεριφοράς της εφαρμογής με Reduce Motion χρησιμοποιήστε: iOS Simulator (ενεργοποιήστε το Reduce Motion στις Settings > Accessibility), Android Emulator (ενεργοποιήστε την "Κατάργηση κινούμενης εικόνας"), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), το εργαλείο επιθεώρησης ιστού Safari (ενεργοποιήστε το Reduce Motion στις macOS System Preferences > Accessibility > Display). Ελέγξτε ότι το περιεχόμενο παραμένει προσβάσιμο και αναγνώσιμο χωρίς κινούμενη εικόνα.