Προσβάσιμη κίνηση: Σχεδιασμός για προτιμώμενη-μειωμένη κίνηση χωρίς απώλεια νοήματος
Πώς να σχεδιάσετε κίνηση που σέβεται τις ρυθμίσεις μειωμένης κίνησης και τις αιθουσαίες διαταραχές: τι απαιτεί το WCAG, τι να αφαιρέσετε, τι να διατηρήσετε και πώς να δοκιμάσετε.
Core Takeaway
Όταν ένας χρήστης ενεργοποιεί μειωμένη κίνηση, διατηρήστε το νόημα κάθε κινούμενης εικόνας, αλλά αφαιρέστε την κίνηση: αντικαταστήστε τις διαφάνειες, τις ζουμ και την παράλλαξη με σύντομα ξεθώριασμα ή στιγμιαίες αλλαγές, σταματήστε την αυτόματη αναπαραγωγή βρόχων και μην βασίζεστε ποτέ μόνο στην κίνηση για να επικοινωνήσετε κάτι. Στον ιστό, εντοπίστε τη ρύθμιση με το ερώτημα προτιμώμενων πολυμέσων μειωμένης κίνησης.
Γιατί έχει σημασία
Για μερικούς ανθρώπους, η κίνηση στην οθόνη δεν είναι θέμα γούστου. Το W3C σημειώνει ότι το animation μπορεί να προκαλέσει αιθουσαίες διαταραχές, με αντιδράσεις που περιλαμβάνουν ναυτία, ημικρανία και, σε σοβαρές περιπτώσεις, ανάγκη ανάπαυσης στο κρεβάτι για να ανακάμψει. Τα λειτουργικά συστήματα επιτρέπουν στους χρήστες να ζητούν λιγότερη κίνηση και στον ιστό αυτό το αίτημα εκτίθεται ως το ερώτημα προτιμώμενων μέσων μειωμένης κίνησης. Η τιμή του μειώνεται όταν ο χρήστης έχει ενεργοποιήσει τη ρύθμιση.
Τι ζητάει το WCAG
Δύο κριτήρια επιτυχίας WCAG καλύπτουν την κίνηση. 2.2.2 Παύση, Διακοπή, Απόκρυψη ισχύει για κίνηση που ξεκινά αυτόματα, όπως καρουσέλ και κινούμενα σχέδια με βρόχο, και απαιτεί έναν τρόπο παύσης, διακοπής ή απόκρυψής της. 2.3.3 Το Animation from Interactions (επίπεδο AAA) ισχύει για την κίνηση που ενεργοποιείται από την αλληλεπίδραση του χρήστη και προτείνει την αποφυγή περιττών κινούμενων εικόνων, την προσφορά ελέγχου για την απενεργοποίησή του ή τη χρήση της ρύθμισης μείωσης κίνησης του λειτουργικού συστήματος. Ακόμη και όπου δεν απαιτείται ΑΑΑ, η τήρησή του είναι καλή πρακτική.
Αφαιρέστε την κίνηση, διατηρήστε το νόημα
Η μειωμένη κίνηση δεν σημαίνει ότι δεν υπάρχει ανάδραση. Ένας χρήστης που πατά ένα κουμπί πρέπει να γνωρίζει ότι λειτούργησε. Στόχος είναι να διατηρηθεί η πολιτειακή αλλαγή και να σταματήσουν τα ταξίδια.
- Αφαιρέστε ή μειώστε: μεγάλες διαφάνειες, ζουμ, παράλλαξη, κίνηση που συνδέεται με κύλιση, περιστροφή, αυτόματη αναπαραγωγή βρόχων και βίντεο φόντου.
- Διατήρηση: αλλαγές χρώματος και αδιαφάνειας, δείκτες εστίασης, σύντομες μεταβάσεις κατάστασης, πληροφορίες προόδου.
- Αντικατάσταση: μεταβάσεις σελίδων και πίνακα με μια σύντομη διασταύρωση ή μια στιγμιαία αλλαγή.
- Ποτέ: χρησιμοποιήστε την κίνηση ως τον μόνο τρόπο για να εμφανίσετε ένα σφάλμα, μια αλλαγή ή ένα νέο στοιχείο.
Εφαρμόζοντάς το
Στον ιστό, τυλίξτε τη μη ουσιαστική κίνηση σε @media (prefers-reduced-motion: no-preference) ή παρακάμψτε την μέσα στο @media (prefers-reduced-motion: μείωση). Στο JavaScript, διαβάστε το window.matchMedia('(prefers-reduced-motion: reduce)') και ακούστε για αλλαγές. Οι εγγενείς πλατφόρμες εκθέτουν την ίδια ρύθμιση: τα SwiftUI, UIKit και Android σας επιτρέπουν να το ελέγξετε. Εάν το σύστημα σχεδίασής σας διαθέτει διακριτικά κίνησης, ορίστε μια μειωμένη παραλλαγή για κάθε ένα, ώστε κάθε στοιχείο να συμπεριφέρεται με τον ίδιο τρόπο.
Δοκιμές
Ενεργοποιήστε τη μειωμένη κίνηση στο λειτουργικό σας σύστημα και περπατήστε σε κάθε ροή πλήκτρων. Ελέγξτε ότι τίποτα σημαντικό δεν έχει χαθεί, ότι κανένας βρόχος δεν ξεκινά αυτόματα και ότι η κύλιση δεν μετακινεί το περιεχόμενο πέρα από αυτό που κάνει η ίδια η κύλιση. Τα εργαλεία προγραμματιστή προγράμματος περιήγησης μπορούν επίσης να μιμηθούν τη ρύθμιση.
Απόσπασμα υλοποίησης παραγωγής
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Κλειδί Principles για να θυμάστε
- Η κίνηση μπορεί να κάνει μερικούς ανθρώπους σωματικά άρρωστους. σεβαστείτε το σκηνικό
- Κατάργηση ταξιδιού, ζουμ, παράλλαξης και αυτόματης αναπαραγωγής. κρατήστε τις αλλαγές κατάστασης και τα σχόλια
- Το WCAG 2.2.2 καλύπτει την αυτόματη κίνηση. 2.3.3 καλύπτει την κίνηση από την αλληλεπίδραση
- Εντοπίστε τη ρύθμιση με προτιμήσεις-μειωμένη κίνηση και σε κάθε εγγενή πλατφόρμα
- Σχεδιάστε μια μειωμένη παραλλαγή για κάθε διακριτικό κίνησης
Συχνές Ερωτήσεις
Πηγές
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Έγγραφα Ιστού
- Motion — Οδηγίες ανθρώπινης διεπαφής Apple