Chuyển động có thể truy cập: Thiết kế cho chuyển động ưa thích mà không làm mất ý nghĩa
Cách thiết kế chuyển động tôn trọng cài đặt giảm chuyển động và rối loạn tiền đình: WCAG yêu cầu những gì, những gì cần loại bỏ, những gì cần giữ và cách kiểm tra.
Điểm chính
Khi người dùng bật chuyển động giảm, hãy giữ nguyên ý nghĩa của mọi hoạt ảnh nhưng loại bỏ chuyển động: thay thế các trang trình bày, thu phóng và thị sai bằng các hiệu ứng mờ dần hoặc thay đổi tức thì, dừng các vòng lặp tự động phát và không bao giờ chỉ dựa vào chuyển động để truyền đạt điều gì đó. Trên web, hãy phát hiện cài đặt bằng truy vấn phương tiện giảm chuyển động ưu tiên.
Tại sao nó quan trọng
Đối với một số người, chuyển động trên màn hình không phải là vấn đề sở thích. W3C lưu ý rằng hoạt hình có thể gây ra rối loạn tiền đình, với các phản ứng bao gồm buồn nôn, đau nửa đầu và trong trường hợp nghiêm trọng, cần nghỉ ngơi tại giường để hồi phục. Hệ điều hành cho phép mọi người yêu cầu ít chuyển động hơn và trên web, yêu cầu đó được hiển thị dưới dạng truy vấn phương tiện ưu tiên giảm chuyển động. Giá trị của nó giảm khi người dùng bật cài đặt.
WCAG yêu cầu những gì
Hai tiêu chí thành công của WCAG bao gồm chuyển động. 2.2.2 Tạm dừng, Dừng, Ẩn áp dụng cho chuyển động bắt đầu tự động, chẳng hạn như băng chuyền và hoạt ảnh lặp lại, đồng thời yêu cầu cách tạm dừng, dừng hoặc ẩn chuyển động đó. 2.3.3 Hoạt ảnh từ Tương tác (cấp độ AAA) áp dụng cho chuyển động được kích hoạt bởi tương tác của người dùng và đề xuất tránh hoạt ảnh không cần thiết, cung cấp điều khiển để tắt hoạt ảnh đó hoặc sử dụng cài đặt giảm chuyển động của hệ điều hành. Ngay cả khi không yêu cầu AAA, việc tuân theo nó là cách làm tốt.
Loại bỏ chuyển động, giữ ý nghĩa
Giảm chuyển động không có nghĩa là không có phản hồi. Người dùng nhấn nút vẫn cần biết nó hoạt động. Mục tiêu là giữ cho trạng thái thay đổi và bỏ việc di chuyển.
- Loại bỏ hoặc giảm bớt: các trang trình bày lớn, thu phóng, thị sai, chuyển động liên kết cuộn, quay, vòng lặp tự động phát và video nền.
- Keep: thay đổi màu sắc và độ mờ, chỉ báo tiêu điểm, chuyển đổi trạng thái ngắn, thông tin tiến trình.
- Thay thế: chuyển đổi trang và bảng điều khiển bằng một đoạn chuyển đổi ngắn hoặc thay đổi tức thời.
- Không bao giờ: sử dụng chuyển động là cách duy nhất để hiển thị lỗi, thay đổi hoặc mục mới.
Thực hiện nó
Trên web, gói chuyển động không cần thiết trong @media (thích-giảm-chuyển động: không ưu tiên) hoặc ghi đè chuyển động đó bên trong @media (thích-giảm-chuyển động: giảm). Trong JavaScript, đọc window.matchMedia('(prefers-reduced-motion: less)') và lắng nghe những thay đổi. Các nền tảng gốc hiển thị cùng một cài đặt: SwiftUI, UIKit và Android đều cho phép bạn kiểm tra. Nếu hệ thống thiết kế của bạn có mã thông báo chuyển động, hãy xác định một biến thể rút gọn cho từng mã để mọi thành phần hoạt động theo cùng một cách.
Kiểm tra
Bật tính năng giảm chuyển động trong hệ điều hành của bạn và xem qua từng luồng phím. Kiểm tra để đảm bảo không có nội dung quan trọng nào bị mất, không có vòng lặp nào tự động bắt đầu và thao tác cuộn không di chuyển nội dung vượt quá chức năng của cuộn. Các công cụ dành cho nhà phát triển trình duyệt cũng có thể mô phỏng cài đặt.
Đoạn mã triển khai thực tế
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Nguyên tắc chính cần nhớ
- Chuyển động có thể khiến một số người bị ốm; tôn trọng khung cảnh
- Loại bỏ du lịch, thu phóng, thị sai và tự động phát; giữ các thay đổi trạng thái và phản hồi
- WCAG 2.2.2 bao gồm chuyển động tự động; 2.3.3 bao hàm chuyển động do tương tác
- Phát hiện cài đặt bằng chuyển động ưu tiên và trên mỗi nền tảng gốc
- Thiết kế một biến thể rút gọn cho mỗi mã thông báo chuyển động
Câu hỏi thường gặp
Nguồn
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Tài liệu web MDN
- Motion — Nguyên tắc giao diện con người của Apple