Về hướng dẫn WCAG 2.2 ‘2.3.3 Chuyển động do tương tác’ mức AAA
Mở đầu
Hướng dẫn WCAG 2.2 ‘2.3.3 Chuyển động do tương tác’ yêu cầu cung cấp tuỳ chọn vô hiệu hoá các hoạt ảnh có chuyển động được kích hoạt bởi thao tác của người dùng (ví dụ: nhấp chuột hoặc di chuột). Tuy nhiên, điều này không áp dụng nếu hoạt ảnh đó là cần thiết cho chức năng hoặc truyền đạt thông tin.
Tiêu chuẩn này nhằm mục đích ngăn chặn việc hoạt ảnh gây khó chịu hoặc nhầm lẫn cho một số người dùng, đồng thời cung cấp một môi trường thao tác thoải mái.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Có thể vô hiệu hóa các hoạt ảnh được kích hoạt bởi tương tác。
- Tiêu chuẩn này không áp dụng trong trường hợp hoạt ảnh là cần thiết (ví dụ: khi nó là một phần của chức năng)
2. Phương pháp triển khai
a. Sử dụng truy vấn media prefers-reduced-motion của CSS
Ví dụ về tùy chọn giảm hoạt ảnh
Nếu cài đặt hệ thống của người dùng có kích hoạt “Giảm chuyển động”, các hoạt ảnh sẽ bị vô hiệu hóa.
HTML
<div class="animated-box">Hoạt ảnh khi di chuột (hover animation)</div>
CSS
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s ease;
}
.animated-box:hover {
transform: scale(1.2);
}
/* Kiểu dáng khi cài đặt "Giảm chuyển động" được kích hoạt: */
@media (prefers-reduced-motion: reduce) {
.animated-box {
transition: none; /* Vô hiệu hóa hoạt ảnh */
}
}
Phương pháp này giảm chuyển động động dựa trên cài đặt của người dùng.
b. Vô hiệu hóa hoạt ảnh dựa trên cài đặt của người dùng
Cung cấp nút để bật/tắt hoạt ảnh
HTML
<div id="interactiveBox" class="animated">Hoạt ảnh khi nhấp chuột</div>
<button id="toggleAnimation">Vô hiệu hóa hoạt ảnh</button>
CSS
#interactiveBox {
width: 100px;
height: 100px;
background-color: green;
transition: transform 0.5s ease;
}
#interactiveBox.animated:active {
transform: rotate(45deg);
}
JavaScript
const toggleAnimationButton = document.getElementById('toggleAnimation');
const interactiveBox = document.getElementById('interactiveBox');
toggleAnimationButton.addEventListener('click', () => {
interactiveBox.classList.toggle('animated');
const isAnimated = interactiveBox.classList.contains('animated');
toggleAnimationButton.textContent = isAnimated
? 'Vô hiệu hóa hoạt ảnh'
: 'Kích hoạt hoạt ảnh';
});
Người dùng có thể nhấp vào nút để chuyển đổi bật hoặc tắt hoạt ảnh.
c. Biện pháp khi hoạt ảnh là cần thiết
Ngay cả khi hoạt ảnh là cần thiết, vẫn sẽ áp dụng các biện pháp để giảm chuyển động。
Ví dụ về hoạt ảnh giảm chuyển động
- Hiển thị hoạt ảnh của chỉ báo cuộn bằng cách thay đổi màu sắc hoặc hình dạng thay vì chuyển động.
HTML
<div id="essentialAnimation" class="reduced-motion">Giảm chuyển động đến mức tối thiểu</div>
CSS
#essentialAnimation {
width: 100px;
height: 100px;
background-color: orange;
animation: essentialMotion 2s infinite;
}
@keyframes essentialMotion {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
#essentialAnimation {
animation: none; /* Dừng hoàn toàn hoạt ảnh */
}
}
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Không có tùy chọn vô hiệu hóa hoạt ảnh
Ví dụ thất bại
- Có các yếu tố di chuyển khi di chuột hoặc nhấp chuột, và người dùng không thể vô hiệu hóa chuyển động đó.
Ví dụ cải thiện
- Điều khiển chuyển động bằng cách sử dụng cài đặt của người dùng hoặc CSS prefers-reduced-motion.
b. Chuyển động quá nhanh gây ra sự nhầm lẫn
Ví dụ thất bại
@keyframes fastMotion {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(100px); }
}
.animated {
animation: fastMotion 0.2s infinite;
}
Ví dụ cải thiện
- Làm chậm tốc độ hoạt ảnh hoặc hỗ trợ prefers-reduced-motion.
4. Lợi ích của khả năng tiếp cận
a. Cải thiện sự thoải mái của người dùng
- Bằng cách giảm chuyển động, người dùng nhạy cảm với chuyển động (ví dụ: người bị chóng mặt, nhạy cảm với ánh sáng) có thể sử dụng một cách thoải mái.
b. Khả năng điều khiển được thao tác
- Vì người dùng có thể bật/tắt hoạt ảnh tùy theo nhu cầu của mình, điều này cung cấp một trải nghiệm thao tác không căng thẳng.
c. Cải thiện trải nghiệm người dùng
- Giảm thiểu tác động của chuyển động và cung cấp nội dung hấp dẫn và an toàn cho tất cả người dùng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kích hoạt cài đặt “Giảm chuyển động” trong hệ thống và xác nhận rằng hoạt ảnh đã bị vô hiệu hóa.
- Xác nhận rằng tùy chọn bật/tắt hoạt ảnh hoạt động đúng cách.
b. Công cụ kiểm tra tự động
- Kiểm tra việc triển khai prefers-reduced-motion bằng các công cụ như Lighthouse.
Tóm tắt
Hướng dẫn WCAG 2.2 “2.3.3 Chuyển động do tương tác” nhằm cung cấp tùy chọn vô hiệu hóa hoạt ảnh có chuyển động, từ đó mang lại một môi trường thao tác thoải mái cho tất cả người dùng.
Điểm cần chú ý khi triển khai
- Sử dụng prefers-reduced-motion của CSS để giảm chuyển động.
- Cung cấp cho người dùng tùy chọn bật/tắt hoạt ảnh.
- Ngay cả khi chuyển động là cần thiết, hãy sử dụng hoạt ảnh nhẹ nhàng nhất có thể.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.