Materi
Kriteria 2.2.2 Pause, Stop, Hide (tingkat A) meminta mekanisme untuk menjeda, menghentikan, atau menyembunyikan informasi bergerak, berkedip, atau bergulir yang mulai otomatis, berlangsung lebih dari lima detik, dan tampil bersamaan dengan konten lain. Informasi yang diperbarui otomatis juga butuh mekanisme itu, atau pengaturan frekuensi pembaruannya. Kriteria 2.3.3 Animation from Interactions (tingkat AAA) meminta animasi gerak yang dipicu interaksi bisa dimatikan, kecuali esensial. Alasannya, gerak seperti parallax saat menggulir bisa memicu mual dan pusing pada orang dengan gangguan vestibular.
Teknik C39 untuk 2.3.3 memakai media query prefers-reduced-motion. MDN menjelaskan fitur itu mendeteksi pengaturan perangkat untuk mengurangi gerak non-esensial. Nilainya no-preference, yang bernilai salah, dan reduce, yang bernilai benar, sehingga @media (prefers-reduced-motion) setara dengan @media (prefers-reduced-motion: reduce). Kelas CSS Tata Letak sudah memperkenalkan fiturnya; di sini fitur itu dipakai untuk memenuhi kriteria.
Kriteria 2.5.8 Target Size (Minimum), baru di WCAG 2.2 dengan tingkat AA, meminta target penunjuk berukuran minimal 24 kali 24 CSS px. Pengecualiannya lima. Jarak: target yang lebih kecil lolos bila lingkaran berdiameter 24 CSS px yang dipusatkan di kotak tiap target tidak memotong target lain atau lingkaran target kecil lainnya. Setara: fungsi yang sama tersedia lewat kontrol lain yang memenuhi. Sebaris: target berada di dalam kalimat. Kendali agen pengguna: ukurannya ditentukan peramban dan tidak diubah penulis. Esensial: tampilannya memang diwajibkan. Kriteria 2.5.5 Target Size (Enhanced) tingkat AAA menaikkan angkanya menjadi 44 kali 44 CSS px. Target adalah seluruh area yang menerima klik, jadi padding tombol ikut dihitung: ikon 20px dengan padding 2px di tiap sisi menjadi target 24px.
.carousel { animation: geser 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.carousel { animation: none; }
}
.tombol-ikon { min-width: 24px; min-height: 24px; }
