Intinya...

Animasi yang dipicu oleh interaksi (misalnya saat diklik, hover, diketuk) harus dapat

  • dinonaktifkan lewat pengaturan sistem (misalnya "Reduce Motion" di iOS), atau
  • dinonaktifkan dalam opsi tingkat situs web.

Apa itu WCAG 2.3.3?

Jika animasi tidak penting untuk memahami konten atau cara sesuatu bekerja, pengguna harus bisa mematikannya. Atau, animasi sebaiknya dihilangkan secara default.

WCAG 2.3.3 membantu mencegah efek yang tidak perlu terjadi saat pengguna berinteraksi dengan situs web. Animasi yang muncul setelah pengguna mengklik, menggulir, atau mengarahkan kursor bisa membuat mereka merasa mual atau pusing.

Contoh efek gerakan ini meliputi:

  • Latar parallax, di mana latar depan bergerak dengan kecepatan berbeda dari latar belakang saat menggulir
  • Transisi melompat atau memperbesar antara halaman atau bagian
  • Konten yang bergeser atau kartu yang berputar saat mouse diarahkan
  • Bagian akordeon yang terbuka dan tertutup saat diklik
  • Animasi pemuatan seperti lingkaran putar saat konten baru dimuat

Perbandingan dengan WCAG 2.2.2 Jeda, Hentikan, Sembunyikan

WCAG 2.2.2 mengatur hal-hal yang bergerak sendiri tanpa interaksi pengguna. Sedangkan WCAG 2.3.3 Animasi dari Interaksi relevan ketika animasi muncul karena aksi pengguna.

Mengapa ini penting?

Beberapa orang memiliki gangguan vestibular, sehingga efek gerakan bisa membuat mereka benar-benar sakit. Gejalanya bisa berupa pusing, migrain, mual, atau perlu berbaring sejenak. Jika situs web kamu memicu berbagai animasi tanpa alasan yang jelas, kamu bisa membahayakan pengguna nyata.

Bahkan efek kecil seperti teks yang memperbesar atau meluncur saat menggulir bisa mengganggu fokus atau merusak pengalaman bagi orang yang sangat sensitif terhadap gerakan. Tanpa opsi untuk mematikan efek gerakan, pengguna bisa sangat sakit hanya untuk mengakses informasi yang mereka butuhkan secara online.

Ilustrasi pengguna yang terlihat pusing sambil memegang ponselnya

Seorang pengguna memegang ponsel dan tampak pusing, dengan bintang dan pusaran yang berputar di sekitar kepala mereka. Di layar ponsel terlihat situs dengan banyak efek gerakan seperti ikon yang berputar, simbol refresh yang berputar, dan garis animasi.

Siapa yang terpengaruh?

Pengguna dengan gangguan vestibular, pengguna yang mudah terganggu oleh gerakan, dan pengguna yang rentan migrain atau mabuk perjalanan.

Pengguna dengan gangguan vestibular bisa merasa pusing, mual, atau bingung saat terkena efek gerakan yang dipicu oleh menggulir, mengklik, atau mengarahkan kursor.

Pengguna yang mudah terganggu oleh gerakan bisa kesulitan fokus atau membaca konten karena animasi yang terus menarik perhatian mereka.

Pengguna yang rentan migrain atau mabuk perjalanan mungkin mengalami sakit kepala, mual, atau harus berhenti menggunakan situs jika efek gerakan terlalu kuat atau tak terduga.

Cara menerapkan WCAG 2.3.3

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Hormati pengaturan peduced motion

Gunakan media query CSS prefers-reduced-motion untuk memeriksa apakah pengguna meminta pengurangan animasi. Jika ya, pastikan animasi di situs web kamu mengikuti pengaturan tersebut.

Sebagian besar perangkat dan browser modern sudah mendukung pengaturan prefers-reduced-motion, yang memberi tahu situs web untuk membatasi atau mematikan efek gerakan.

Pengguna dapat mengaktifkan pengaturan ini di preferensi aksesibilitas browser atau sistem operasi mereka. Biasanya bernama “Reduce Motion” atau “Remove Animations”.

Saat pengaturan ini aktif, CSS dengan @media (prefers-reduced-motion: reduce) akan otomatis mengurangi atau menghilangkan animasi.

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Tidak semua animasi dibuat dengan CSS, beberapa dijalankan lewat JavaScript. Untuk memastikan efek gerak interaktif di situs webmu menghormati preferensi pengguna, tambahkan pengecekan cepat di JavaScript juga. Ini membantu kamu melewati atau menyederhanakan animasi untuk pengguna yang sudah meminta pengurangan gerakan di pengaturan sistem mereka.

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // User prefers reduced motion—avoid animation
} else {
    // Safe to run animation
}

Penambahan kecil ini memastikan animasi berbasis JavaScript, seperti scroll yang melenting, slider khusus, atau efek UI dinamis, tidak membuat pengguna yang butuh pengalaman lebih tenang menjadi tidak nyaman.

Kontrol manual untuk mematikan efek gerak

Tidak semua sistem pengguna diatur untuk mengurangi gerakan. Karena itu, berguna untuk menyediakan kontrol manual di seluruh situs, seperti pengaturan di menu atau tombol toggle sederhana di halaman, agar pengguna bisa mematikan efek gerak yang tidak penting.

Ilustrasi situs web dengan panel pengaturan aksesibilitas

Panel pengaturan aksesibilitas di halaman depan situs web yang menampilkan toggle 'Remove Motion Effects' (aktif) dan 'Dark Mode' (nonaktif).

Jangan gunakan animasi kecuali benar-benar penting

Tanyakan pada diri sendiri: Apakah animasi ini membantu pengguna memahami apa yang terjadi? Jika tidak, pertimbangkan untuk menghapusnya atau membuatnya opsional.

Misalnya, di aplikasi desain di mana melihat pratinjau animasi adalah fungsi utama, animasi itu penting dan harus dipertahankan. Tapi kalau ada confetti yang melayang setelah seseorang mengirim formulir? Itu kemungkinan cuma hiasan, dan pengguna harus bisa melewatinya.

Kesimpulan

Animasi bisa menyenangkan, tapi hanya jika tidak membuat orang pusing atau sakit. WCAG 2.3.3 membantu memastikan efek gerak yang dipicu interaksi tidak mengganggu kesehatan atau fokus pengguna. Jadi, hilangkan efek berlebihan jika tidak perlu. Gunakan prefers-reduced-motion, tombol toggle, dan pengaturan default yang lebih baik supaya situs webmu nyaman untuk semua orang.