Gerakan yang Dapat Diakses: Mendesain untuk gerakan yang lebih disukai tanpa kehilangan makna
Bagaimana merancang gerakan yang memperhatikan pengaturan pengurangan gerakan dan gangguan vestibular: apa yang dibutuhkan WCAG, apa yang harus dihilangkan, apa yang harus dipertahankan, dan bagaimana cara mengujinya.
Pengambilan Inti
Saat pengguna mengaktifkan pengurangan gerakan, pertahankan arti dari setiap animasi tetapi hilangkan gerakannya: ganti slide, zoom, dan paralaks dengan pemudaran singkat atau perubahan instan, hentikan putaran pemutaran otomatis, dan jangan pernah mengandalkan gerakan saja untuk mengomunikasikan sesuatu. Di web, deteksi pengaturan dengan kueri media pilihan-gerakan yang dikurangi.
Mengapa itu penting
Bagi sebagian orang, gerakan di layar bukanlah soal selera. W3C mencatat bahwa animasi dapat memicu gangguan vestibular, dengan reaksi yang meliputi mual, migrain, dan, dalam kasus yang parah, memerlukan istirahat di tempat tidur untuk pulih. Sistem operasi memungkinkan orang meminta lebih sedikit tindakan, dan di web permintaan tersebut ditampilkan sebagai permintaan media yang lebih memilih tindakan yang dikurangi. Nilainya berkurang ketika pengguna mengaktifkan pengaturannya.
Apa yang diminta WCAG
Dua kriteria keberhasilan WCAG mencakup gerakan. 2.2.2 Jeda, Berhenti, Sembunyikan berlaku untuk gerakan yang dimulai secara otomatis, seperti carousel dan animasi perulangan, dan memerlukan cara untuk menjeda, menghentikan, atau menyembunyikannya. 2.3.3 Animasi dari Interaksi (level AAA) berlaku untuk gerakan yang dipicu oleh interaksi pengguna, dan menyarankan untuk menghindari animasi yang tidak diperlukan, menawarkan kontrol untuk mematikannya, atau menggunakan pengaturan pengurangan gerakan pada sistem operasi. Meskipun AAA tidak diperlukan, mengikutinya adalah praktik yang baik.
Hapus gerakan, pertahankan makna
Berkurangnya gerakan bukan berarti tidak ada umpan balik. Pengguna yang menekan tombol tetap perlu mengetahui bahwa tombol tersebut berfungsi. Tujuannya adalah untuk menjaga perubahan negara dan menghentikan perjalanan.
- Hapus atau kurangi: slide besar, zoom, paralaks, gerakan tertaut gulir, putaran, putaran putar otomatis, dan video latar belakang.
- Simpan: perubahan warna dan opacity, indikator fokus, transisi keadaan singkat, informasi kemajuan.
- Ganti: transisi halaman dan panel dengan cross-fade singkat atau perubahan instan.
- Tidak pernah: gunakan gerakan sebagai satu-satunya cara untuk menunjukkan kesalahan, perubahan, atau item baru.
Menerapkannya
Di web, gabungkan gerakan yang tidak penting dalam @media (prefers-reduction-motion: no-preference), atau timpa di dalam @media (prefers-reduksi-gerakan: kurangi). Di JavaScript, baca window.matchMedia('(prefers-reduksi-gerakan: pengurangan)') dan dengarkan perubahannya. Platform asli menampilkan pengaturan yang sama: SwiftUI, UIKit, dan Android semuanya memungkinkan Anda memeriksanya. Jika sistem desain Anda memiliki token gerakan, tentukan varian yang dikurangi untuk masing-masing token sehingga setiap komponen berperilaku sama.
Pengujian
Aktifkan pengurangan gerakan di sistem operasi Anda dan telusuri setiap alur tombol. Pastikan tidak ada hal penting yang hilang, tidak ada perulangan yang dimulai secara otomatis, dan pengguliran tidak memindahkan konten melebihi apa yang dilakukan pengguliran itu sendiri. Alat pengembang browser juga dapat meniru pengaturan tersebut.
Cuplikan Implementasi Produksi
/* 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; });Kunci Principles untuk Diingat
- Gerakan dapat membuat sebagian orang sakit secara fisik; hormati pengaturannya
- Hapus perjalanan, zoom, paralaks, dan putar otomatis; menjaga perubahan keadaan dan umpan balik
- WCAG 2.2.2 mencakup gerakan otomatis; 2.3.3 meliputi gerak dari interaksi
- Deteksi pengaturan dengan gerakan yang dikurangi dan pada setiap platform asli
- Rancang varian yang dikurangi untuk setiap token gerakan
Pertanyaan yang Sering Diajukan
Sumber
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Dokumen Web MDN
- Motion — Pedoman Antarmuka Manusia Apple