`prefers-reduced-motion` dùng thế nào cho đúng? Có phải tắt sạch mọi animation?

prefers-reduced-motion là media query phản ánh cài đặt "giảm chuyển động" ở hệ điều hành. Người bật nó thường bị rối loạn tiền đình: parallax, zoom lớn, phần tử bay ngang màn hình có thể gây chóng mặt, buồn nôn.

"Reduced" không phải "none". Cách làm đúng là thay chuyển động lớn bằng chuyển động nhỏ hoặc fade, giữ lại phản hồi trạng thái để giao diện không mất mạch:

.card { transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: opacity .15s ease; transform: none; }
}

Ưu tiên viết theo hướng thêm animation khi được phép (@media (prefers-reduced-motion: no-preference)) để mặc định luôn an toàn.

Với JS animation (requestAnimationFrame, canvas, thư viện motion) media query CSS không tự áp — phải kiểm tra thủ công và render một khung tĩnh:

const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
if (mq.matches) drawStaticFrame()
else startLoop()

WCAG 2.2 tiêu chí 2.3.3 Animation from Interactions yêu cầu cho phép tắt animation do tương tác gây ra, trừ khi nó thiết yếu.

Với video/GIF tự chạy hơn 5 giây thì phải có nút tạm dừng (2.2.2), độc lập với media query này.