Menghidupkan semula lebih suka-motion-gerakan

Dua tahun yang lalu, saya meneroka prefers-reduced-motion , pertanyaan media yang diperkenalkan di Safari 10.1 untuk meningkatkan kebolehcapaian web untuk pengguna dengan gangguan vestibular dan epilepsi. Artikel asal membincangkan latar belakang, keperluan, dan pelaksanaan pertanyaan untuk mencegah masalah yang disebabkan oleh gerakan.

Ini mengikuti kerja yang sangat baik dari Orde Saunders pada pertanyaan pengguna dan pandangan Val Head mengenai kepekaan gerakan dalam animasi web.

Maju ke 2019, dan pelayar desktop utama kini menyokong ciri penting ini! Safari memimpin jalan, diikuti rapat oleh Firefox. Chrome menyertai kemudian, dengan sokongan bermula dari versi 74.

Butiran sokongan penyemak imbas boleh didapati di Caniuse.com (nombor menunjukkan sokongan dari versi itu dan seterusnya).

Sokongan penyemak imbas desktop

Penyemak imbas	Sokongan
Chrome	Ya
Firefox	Ya
Iaitu	Tidak
Tepi	Tidak (tetapi menjadi berasaskan krom)
Safari	Ya

Sokongan penyemak imbas mudah alih/tablet

Penyemak imbas	Sokongan
Android Chrome	Ya
Android Firefox	Ya
Android (yang lain)	Separa
IOS Safari	Ya

Walaupun Microsoft Edge kini tidak mempunyai sokongan, integrasinya dengan Chrome sudah dekat. Peralihan ini menawarkan potensi terbalik: ciri kebolehaksesan yang kuat Edge mungkin dimasukkan ke dalam Chrome.

Meningkatkan kesedaran

Walaupun sesetengah laman web dan aplikasi menggunakan prefers-reduced-motion , pengangkatannya tetap mengejutkan di luar CSS dan komuniti aksesibiliti. Ini tidak sepenuhnya tidak dijangka; Ciri -ciri CSS sering undervalued, dan kebolehcapaian lebih banyak lagi.

Adalah difahami bahawa pemaju mungkin mengabaikan ciri yang agak baru, terutamanya dalam industri yang pantas. Keutamaan pasaran sangat mempengaruhi fokus pemaju. Walau bagaimanapun, prefers-reduced-motion adalah perpustakaan-agnostik dan mengintegrasikan dengan tetapan peringkat OS, yang menunjukkan kaitan jangka panjang.

Nilai sebenarnya tidak terletak pada perekrut yang mengagumkan tetapi dalam meningkatkan kehidupan pengguna yang terjejas. Pertanyaan media mudah ini dapat menghalang ketidakselesaan yang signifikan untuk pengguna hanya melayari atau berinteraksi dengan laman web.

Memberi kesan kepada pengguna yang terjejas

Kecacatan adalah kompleks dan pelbagai, merangkumi pelbagai faktor kekal, sementara, alam sekitar, dan situasional. Ramai orang tersilap hanya memberi tumpuan kepada gangguan visual. Kesan kecacatan berbeza -beza, dan apa yang membantu seseorang mungkin membahayakan orang lain.

Bagi individu yang mengalami gangguan vestibular, migrain, atau pencetus penyitaan, pelayaran web boleh mencabar. Animasi yang tidak dijangka dapat mencetuskan gejala yang melemahkan. Ini amat bermasalah bagi mereka yang bekerja sangat bergantung pada aplikasi web. Mereka mungkin kurang mengawal peranti kerja atau pilihan pekerjaan mereka.

Ini salah faham bahawa semua orang menyedari keadaan mereka atau pencetusnya. Acara pencetus awal kadang -kadang dapat meningkatkan kepekaan. Artikel Facundo Corradini, "Kebolehcapaian untuk Gangguan Vestibular," fasih menggambarkan pengalaman ini.

Selain itu, tidak semua pengguna teknologi bantuan adalah teknologi yang bijak. Mereka mungkin tidak menyedari tetapan OS atau sambungan penyemak imbas yang mengurangkan gerakan. Pertimbangkan pengguna dengan peranti korporat terkunci, mereka yang tidak dikenali dengan keupayaan peranti mereka, atau mereka yang menggunakan peranti murah atau lebih tua yang kurang mendapat sokongan untuk prefers-reduced-motion .

Menilai kemudaratan yang berpotensi

Animasi yang dimaksudkan untuk menggalakkan penglibatan dapat menjauhkan pengguna. Walaupun sukar untuk mengukur, kesan negatif ini adalah nyata. Kerosakan yang disengajakan adalah lebih mudah untuk diukur, walaupun menangani ia memberikan cabaran lanjut.

Kerosakan yang ketara kepada asas pengguna yang besar mempengaruhi penjenamaan. Animasi yang berlebihan atau kurang dilaksanakan dapat menghalang pengguna, walaupun mereka tidak dapat menyatakan alasannya.

Kita tidak boleh dan tidak boleh mengetahui keadaan tertentu setiap pengguna. Pendekatan proaktif, perhatian adalah penting.

Animasi sebagai peningkatan progresif

Tidak semua peranti menjadikan animasi sama baiknya. Peranti kuasa rendah mungkin berjuang, dan mod pelayaran khusus (seperti mod pembaca) boleh mengubah atau mengeluarkan animasi sepenuhnya. Ini menggariskan kepentingan reka bentuk yang mantap.

Animasi mungkin tidak selalu berkelakuan seperti yang dimaksudkan dalam mode viewports atau mod pembaca. Unsur -unsur penting dapat ditolak dari pandangan, mengakibatkan pengalaman visual yang bergelora.

Pelaksanaan praktikal

Untuk meningkatkan kesedaran dan pertimbangan untuk kelemahan potensi animasi, kita boleh secara proaktif menggabungkan pertanyaan media untuk melumpuhkan animasi untuk pengguna yang lebih suka atau mempunyai peranti yang tidak dapat mengendalikannya dengan lancar. Ini mensasarkan kedua-dua prefers-reduced-motion dan peranti dengan kadar penyegaran skrin perlahan menggunakan ciri media update .

Skrin @Media dan
  (lebih suka-berkurang-gerakan: mengurangkan),
  (kemas kini: lambat) {
  * {
    Animasi-Pemulihan: 0.001ms! Penting;
    Animasi-Iterasi-kiraan: 1! Penting;
    Peralihan Peralihan: 0.001ms! Penting;
  }
}

Ini memaksa semua animasi untuk menyelesaikannya. Ia berfungsi untuk pengguna yang meminta gerakan atau peranti yang dikurangkan dengan kadar penyegaran yang perlahan (contohnya, skrin e-ink). Mengekalkan animation-duration dan transition-duration memastikan fungsi sambil mencegah isu.

Pendekatan ini bertujuan untuk:

1. Meningkatkan kesedaran mengenai ciri -ciri media.
2. Galakkan pertimbangan yang bijak terhadap kesan animasi.
3. Menggalakkan lebih banyak stylesheet yang boleh dipelihara.

Nilai animasi

Di luar gangguan vestibular dan fotosensitiviti, kecacatan kognitif mesti dipertimbangkan. Pertubuhan Kesihatan Sedunia menganggarkan 300 juta orang di seluruh dunia terjejas oleh kemurungan, yang dapat menjejaskan interaksi dengan alam sekitar.

Animasi boleh memberi manfaat kepada beberapa kecacatan kognitif, membantu pemahaman dan komunikasi. Kerja Val Head menyoroti potensi untuk meningkatkan penyelesaian masalah, ingat, dan pengambilan kemahiran sambil mengurangkan beban kognitif.

Kurangkan, jangan keluarkan

Kita tidak boleh menghilangkan animasi sepenuhnya. prefers-reduced-motion menunjukkan pengurangan, bukan penyingkiran. Menggunakan cascade CSS, kita boleh menguruskan animasi secara per-komponen. Sekiranya animasi penting untuk memahami, kita boleh melambatkannya untuk mengelakkan masalah mencetuskan.

Sifat Custom CSS boleh menyelaraskan proses ini, walaupun membolehkan widget keutamaan animasi di seluruh tapak.

/ * Tempoh lalai */
: root {
  --Animation-graf: 250ms;
  -Perubatan-jangkauan: 250ms;
}

/ * Pemendekan kontekstual */
@media (lebih suka-dikurangkan-gerakan: mengurangkan), (kemas kini: lambat) {
  : root {
    --Animation-graf: 0.001ms! Penting;
    -Perubatan-jangkauan: 0.001ms! Penting;
  }
}

@media (lebih suka-dikurangkan-gerakan: mengurangkan), (kemas kini: lambat) {
  * {
    Animasi-Peringkat: Var (-Animasi-Penghantaran);
    Animasi-Iterasi-kiraan: 1! Penting;
    Peralihan Peralihan: var (-Animasi-Penghantaran);
  }
}

/ * Tempoh kemas kini untuk animasi kritikal */
@media (lebih suka-dikurangkan-gerakan: mengurangkan), (kemas kini: cepat) {
  .c-educational-concept {
    --Animation-graf: 6000ms! Penting;
    nama animasi: konsep pendidikan;
    Animasi-Peringkat: Var (-Animasi-Penghantaran);
  }
}

Ujian animasi perlahan memerlukan input daripada pengguna yang terdedah kepada isu-isu yang berkaitan dengan gerakan. Pendekatan yang lebih baik adalah untuk mengumpulkan maklumat mengenai pencetus masa lalu dan membandingkannya dengan animasi yang dilaksanakan.

Neurodivergence

Shell Little, pakar kebolehcapaian, memberikan pandangan yang berharga mengenai neurodivergence:

Animasi web boleh memberi manfaat kepada beberapa pengguna neurodivergen, tetapi animasi yang sama boleh menjadi penghalang bagi orang lain. Jeda WCAG, berhenti, menyembunyikan garis panduan adalah terhad, hanya memohon kepada animasi lebih lama daripada 5 saat dan mengecualikan gerakan penting. prefers-reduced-motion menawarkan penyelesaian terkawal pengguna, memperkasakan individu untuk menentukan kapan dan di mana animasi dipaparkan. Ini amat penting bagi pengguna yang mempunyai kecacatan yang berkaitan dengan perhatian atau sensitiviti pemprosesan deria. Kandungan autoplaying adalah kekecewaan yang biasa, dan prefers-reduced-motion dapat menangani ini.

Kesimpulan

Animasi harus digunakan secara bertanggungjawab. Faktor yang perlu dipertimbangkan termasuk: meningkatkan kesedaran mengenai isu -isu yang berpotensi, mengurangkan risiko undang -undang, meningkatkan pengalaman pengguna, memahami keupayaan dan batasan peranti, dan menghormati data pengguna dan hayat bateri.

Menyebarkan kesedaran mengenai amalan animasi prefers-reduced-motion dan bertanggungjawab adalah penting. Berkongsi pengalaman animasi yang bermasalah dapat membantu membina rujukan berharga bagi pemaju. Usaha kolektif ini boleh menjadikan web lebih inklusif dan boleh diakses untuk semua orang.

Atas ialah kandungan terperinci Menghidupkan semula lebih suka-motion-gerakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!