Hướng dẫn WCAG 2.2 ‘2.2.2 Tạm dừng, Dừng, Ẩn’ Mức A
Mở đầu
Hướng dẫn WCAG 2.2 “2.2.2 Tạm dừng, Dừng, Ẩn” đưa ra các tiêu chí nhằm đảm bảo rằng thông tin di chuyển, nhấp nháy, cuộn hoặc tự động cập nhật không làm cản trở trải nghiệm của người dùng. Mục tiêu của tiêu chí này là đảm bảo rằng nội dung động không làm cản trở việc duyệt và hiểu nội dung.
1. Phạm vi áp dụng
Tiêu chí này áp dụng cho các loại nội dung sau:
- Chuyển động（Moving）: Văn bản cuộn hoặc hoạt hình.
- Nhấp nháy（Blinking）: Văn bản hoặc hình ảnh nhấp nháy.
- Cuộn（Scrolling）: Thông tin cuộn tự động.
- Cập nhật tự động（Auto-updating）: Dữ liệu được cập nhật theo thời gian thực.
2. Yêu cầu
Cần phải đáp ứng tất cả các điều kiện sau:
- Cung cấp cơ chế cho người dùng để tạm dừng (Pause) hoặc dừng (Stop) nội dung.
- Cung cấp cơ chế cho người dùng để ẩn (Hide) nội dung.
- Nếu việc nhấp nháy hoặc hoạt hình kết thúc trong vòng 5 giây, sẽ được coi là đáp ứng tiêu chí này.
3. Phương pháp triển khai
a. Tạm dừng và tiếp tục nội dung động
Điều khiển văn bản cuộn
HTML
<div id="scrollingText">
Văn bản cuộn tự động sẽ hiển thị tại đây
</div>
<button id="pauseButton">Tạm dừng</button>
<button id="resumeButton">Tiếp tục</button>
JavaScript
const scrollingText = document.getElementById('scrollingText');
let scrollInterval;
function startScrolling() {
scrollInterval = setInterval(() => {
scrollingText.scrollLeft += 1; // Cuộn theo chiều ngang
}, 50);
}
function pauseScrolling() {
clearInterval(scrollInterval);
}
document.getElementById('pauseButton').addEventListener('click', pauseScrolling);
document.getElementById('resumeButton').addEventListener('click', startScrolling);
startScrolling(); // Bắt đầu cuộn ở trạng thái ban đầu
b. Điều khiển nội dung nhấp nháy
Hoạt hình nhấp nháy kết thúc trong vòng 5 giây
HTML
<div id="blinkingText">Văn bản nhấp nháy</div>
CSS
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
#blinkingText {
animation: blink 1s infinite;
}
JavaScript
setTimeout(() => {
document.getElementById('blinkingText').style.animation = 'none';
}, 5000); // Dừng nhấp nháy sau 5 giây
c. Điều khiển nội dung cập nhật tự động
Tạm dừng cập nhật
HTML
<div id="autoUpdateContent">Nội dung cập nhật theo thời gian thực</div>
<button id="stopUpdate">Dừng cập nhật</button>
<button id="startUpdate">Tiếp tục cập nhật</button>
JavaScript
const autoUpdateContent = document.getElementById('autoUpdateContent');
let updateInterval;
function startUpdating() {
updateInterval = setInterval(() => {
autoUpdateContent.textContent = "Thời gian cập nhật: ${new Date().toLocaleTimeString()}";
}, 1000);
}
function stopUpdating() {
clearInterval(updateInterval);
}
document.getElementById('stopUpdate').addEventListener('click', stopUpdating);
document.getElementById('startUpdate').addEventListener('click', startUpdating);
startUpdating(); // Bắt đầu cập nhật ở trạng thái ban đầu
4. Các ví dụ thất bại thường gặp và cách khắc phục
a. Nội dung nhấp nháy không có chức năng dừng
Ví dụ thất bại
<div style="text-decoration: blink;">Văn bản nhấp nháy</div>
Ví dụ cải thiện
- Thêm chức năng dừng bằng CSS hoặc JavaScript và điều khiển việc nhấp nháy trong vòng 5 giây
b. Cuộn tự động không thể dừng lại
Ví dụ thất bại
<marquee>Văn bản này không thể dừng lại</marquee>
Ví dụ cải thiện
- Điều khiển tạm dừng và tiếp tục cuộn bằng JavaScript
5. Lợi ích của khả năng tiếp cận
a. Cải thiện sự thoải mái về mặt thị giác
- Nếu việc nhấp nháy hoặc chuyển động quá nổi bật, có thể gây khó chịu cho người dùng hoặc gây ra cơn động kinh. Việc ngăn chặn điều này sẽ giúp tăng cường tính an toàn.
b. Cải thiện khả năng đọc hiểu
- Việc cung cấp chức năng tạm dừng và dừng lại giúp người dùng có thể đọc nội dung một cách thoải mái.
6. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra nội dung cuộn, nhấp nháy và cập nhật tự động.
- Kiểm tra xem các chức năng tạm dừng, dừng lại và tiếp tục có hoạt động đúng hay không.
- Kiểm tra xem việc nhấp nháy có kết thúc trong vòng 5 giây hay không.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như WAVE hoặc Axe để kiểm tra khả năng tiếp cận của nội dung động.
Tóm tắt
Hướng dẫn WCAG 2.2 ‘2.2.2 Tạm dừng, Dừng, Ẩn’ yêu cầu thiết kế nội dung động sao cho không cản trở thao tác và sự hiểu biết của người dùng.
Điểm cần chú ý khi triển khai
- Cung cấp chức năng tạm dừng và dừng lại.
- Nội dung nhấp nháy phải kết thúc trong vòng 5 giây.
- Cung cấp chức năng cho người dùng để ẩn nội dung.
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.