Mewujudkan animasi web yang boleh diakses dapat dicapai dengan perancangan dan pelaksanaan yang bijak. Pilihan reka bentuk strategik, memberi tumpuan kepada pengalaman pengguna (UX) dan kemudahan penggunaan, adalah penting. Garis Panduan Kebolehcapaian Kandungan Web (WCAG) menyediakan panduan taktikal untuk animasi yang boleh diakses. Walaupun butiran pelaksanaan berbeza mengikut konteks, WCAG menawarkan cadangan mengenai kawalan jeda/bermain, batasan berkelip, dan pilihan gerakan yang dikurangkan. Spesifikasi (versi 2.1) memberikan wawasan yang dikemas kini dan berharga untuk mereka bentuk animasi web yang boleh diakses.

Mari kita periksa cadangan WCAG utama:

Jeda, berhenti, bersembunyi

Garis panduan ini menasihatkan bahawa secara automatik mula bergerak, berkedip, atau menatal kandungan yang berlangsung selama lima saat, yang dibentangkan bersama kandungan lain, mesti menawarkan mekanisme untuk menjeda, menghentikan, atau menyembunyikannya. Pengecualian wujud di mana gerakan itu penting untuk aktiviti. Ini terpakai kepada situasi seperti carousels auto-vancing, latar belakang animasi, atau ilustrasi gelung, di mana gerakan kumulatif melebihi lima saat.

Melaksanakan Jeda, Berhenti, Sembunyikan

Untuk animasi yang lebih lama, masukkan kawalan jeda/main. WCAG tidak menentukan reka bentuk kawalan; Kebebasan kreatif dibenarkan. Contohnya termasuk butang Play/Stop untuk animasi gelung, atau butang replay untuk animasi main tunggal, bersepadu dengan lancar ke dalam reka bentuk. GIF animasi gelung juga memerlukan kawalan sedemikian. Loaders dan preloaders adalah pengecualian kepada garis panduan ini.

Tiga kilat atau di bawah ambang

Cadangan ini menangani risiko penyitaan dari skrin yang berkelip. Garis panduan menyatakan: Laman web tidak boleh mengandungi apa -apa yang berkelip lebih daripada tiga kali sesaat, atau melebihi ambang kilat flash dan merah yang ditentukan.

Memenuhi tiga ambang kilat

Mengelakkan berkelip melebihi tiga kali sesaat adalah pendekatan yang paling selamat. Walaupun pilihan gaya mungkin menggabungkan berkelip (contohnya, estetika permainan retro), melebihi had ini menimbulkan risiko aksesibiliti. Sekiranya tidak dapat dielakkan, berikan amaran lanjutan dan versi bukan pemotongan alternatif. WCAG menyediakan ambang kilat selamat terperinci.

Tahap pematuhan WCAG (A, AA, AAA)

WCAG mentakrifkan tahap pematuhan: A (minimum), AA (pertengahan, yang memerlukan pematuhan A dan AA), dan AAA (tertinggi, memerlukan pematuhan A, AA, dan AAA). Tahap AA biasanya disasarkan untuk kebolehcapaian laman web. Garis panduan "berhenti, bersembunyi" dan "tiga kilat" jatuh di bawah AA.

Animasi dari interaksi

Garis panduan ini memberi tumpuan kepada animasi yang dicetuskan oleh pengguna yang dicetuskan, menyatakan: Animasi gerakan yang dicetuskan oleh interaksi harus dilumpuhkan melainkan penting untuk fungsi atau maklumat yang disampaikan. "Animasi gerakan" secara khusus merujuk kepada animasi yang mewujudkan ilusi pergerakan, tidak termasuk warna, kabur, atau perubahan kelegapan.

Melaksanakan pilihan gerakan yang dikurangkan

Untuk menangani sensitiviti gerakan, pertimbangkan:

• Mengelakkan animasi yang tidak perlu: Menilai konteks dan kesesuaian animasi.
• Menyediakan Kawalan Pengguna: Menawarkan toggle atau tetapan untuk melumpuhkan gerakan yang tidak penting.
• Memanfaatkan prefers-reduced-motion : Gunakan pertanyaan media ini untuk mengesan dan bertindak balas terhadap keutamaan gerakan pengguna OS yang dikurangkan, menawarkan alternatif, versi animasi yang kurang berintensifkan. Ini boleh dilaksanakan dalam CSS atau JavaScript.

Menggunakan prefers-reduced-motion dalam CSS:

 / * Melantun animasi */
H2 {
  Animasi: Melantun 1.5S Linear Infinite Alternate;
}

/ * Alternatif gerakan yang dikurangkan */
@media (lebih suka-dikurangkan-gerakan: mengurangkan) {
  H2 {
    Animasi: Pudar 0.5s mudah-dalam kedua-duanya;
  }
}

Menggabungkan togol adat dan prefers-reduced-motion menyediakan penyelesaian yang mantap untuk tapak dengan animasi yang luas.

Kesimpulan

Dengan mematuhi garis panduan WCAG ini, anda boleh membuat animasi web yang boleh diakses, memastikan khalayak yang lebih luas dapat berinteraksi secara bermakna dengan laman web anda. Ingatlah bahawa kebolehcapaian melangkaui animasi; Terokai sumber tambahan untuk pendekatan holistik.

Atas ialah kandungan terperinci Animasi web yang boleh diakses: WCAG pada animasi dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!