Hướng dẫn WCAG 2.2 ‘2.2.4 Kiểm soát gián đoạn’ Cấp AAA
Mở đầu
Hướng dẫn WCAG 2.2 “2.2.4 Kiểm soát gián đoạn” yêu cầu có khả năng kiểm soát hoặc hạn chế các gián đoạn không khẩn cấp (như thông báo hoặc cảnh báo) để không làm cản trở thao tác của người dùng. Tiêu chuẩn này nhằm mục đích ngăn ngừa sự nhầm lẫn hoặc sai sót trong thao tác do gián đoạn, giúp tất cả người dùng có thể thao tác nội dung một cách thoải mái.
1. Phạm vi áp dụng và yêu cầu
Gián đoạn là gì?
- Thông báo không khẩn cấp: Tin nhắn mới, tin tức, cảnh báo hệ thống, v.v.
- Cập nhật tự động: Thông báo khi nội dung được cập nhật trong thời gian thực.
Yêu cầu
Cần phải đáp ứng các điều kiện sau:
- Có thể hoãn gián đoạn: Cung cấp cơ chế cho phép người dùng kiểm tra thông báo hoặc cập nhật sau.
- Có thể hạn chế gián đoạn: Cung cấp cơ chế cho phép người dùng vô hiệu hóa thông báo hoặc cập nhật.
- Ngoại lệ trong trường hợp khẩn cấp: Các gián đoạn yêu cầu khẩn cấp (ví dụ: cảnh báo thiên tai) sẽ được loại trừ.
2. Phương pháp triển khai
a. Thực hiện hoãn thông báo
Cung cấp nút hoãn thông báo
HTML
<div id="notification" style="display: none;">
<p>Có tin nhắn mới</p>
<button id="postponeNotification">Kiểm tra sau</button>
</div>
<button id="showNotification">Hiển thị thông báo</button>
JavaScript
const notification = document.getElementById('notification');
const showNotificationButton = document.getElementById('showNotification');
const postponeNotificationButton = document.getElementById('postponeNotification');
// Hiển thị thông báo
showNotificationButton.addEventListener('click', () => {
notification.style.display = 'block';
});
// Hoãn thông báo
postponeNotificationButton.addEventListener('click', () => {
notification.style.display = 'none';
alert('Bạn có thể kiểm tra thông báo sau');
});
b. Hạn chế thông báo và cập nhật
Cung cấp tùy chọn hạn chế thông báo
HTML
<label>
<input type="checkbox" id="suppressUpdates"> Vô hiệu hóa cập nhật tự động
</label>
<div id="autoUpdateContent">Thông tin cập nhật hiện tại: Không có</div>
JavaScript
const suppressUpdatesCheckbox = document.getElementById('suppressUpdates');
const autoUpdateContent = document.getElementById('autoUpdateContent');
let updateInterval;
function startAutoUpdate() {
updateInterval = setInterval(() => {
autoUpdateContent.textContent = "Thông tin cập nhật hiện tại: ${new Date().toLocaleTimeString()}";
}, 3000);
}
suppressUpdatesCheckbox.addEventListener('change', () => {
if (suppressUpdatesCheckbox.checked) {
clearInterval(updateInterval);
autoUpdateContent.textContent = 'Cập nhật tự động đã bị vô hiệu hóa';
} else {
startAutoUpdate();
}
});
startAutoUpdate(); // Bắt đầu cập nhật tự động ở trạng thái ban đầu
c. Xử lý ngoại lệ gián đoạn khẩn cấp
Phân biệt và hiển thị thông báo khẩn cấp
HTML
<div id="emergencyAlert" style="display: none; background-color: red; color: white;">
<p>Cảnh báo khẩn cấp: Đã xảy ra thảm họa!</p>
</div>
<button id="triggerEmergency">Kích hoạt cảnh báo khẩn cấp</button>
JavaScript
document.getElementById('triggerEmergency').addEventListener('click', () => {
const emergencyAlert = document.getElementById('emergencyAlert');
emergencyAlert.style.display = 'block';
alert('Cảnh báo khẩn cấp đã được hiển thị');
});
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Không có điều khiển cập nhật tự động
Ví dụ thất bại
setInterval(() => {
document.getElementById('content').textContent = '新しい情報が追加されました。';
}, 3000);
Vấn đề
- Người dùng không thể dừng hoặc hoãn cập nhật tự động
Ví dụ cải thiện
- Cho phép kiểm soát cập nhật tự động bằng cách sử dụng hộp kiểm hoặc nút bấm
b. Thông báo pop-up luôn luôn hiển thị
Ví dụ thất bại
alert('Có thông báo mới!');
Vấn đề
- Việc pop-up hiển thị quá thường xuyên sẽ cản trở trải nghiệm người dùng
Ví dụ cải thiện
- Sử dụng thông báo có thể ẩn hoặc hoãn
4. Lợi ích của khả năng tiếp cận
a. Bảo vệ sự tập trung của người dùng
- Việc giảm gián đoạn giúp người dùng có thể tập trung vào nội dung
b. Giảm căng thẳng
- Bằng cách hạn chế gián đoạn không cần thiết, chúng ta cung cấp một trải nghiệm người dùng thoải mái.
c. Xử lý thích hợp trong trường hợp khẩn cấp
- Bằng cách chỉ hiển thị thông báo khi cần thiết, các thông báo khẩn cấp sẽ nổi bật một cách thích hợp.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem thông báo và cập nhật có thể hoãn hoặc hạn chế được không
- Kiểm tra xem thông báo khẩn cấp có hiển thị đúng cách không
b. Công cụ kiểm tra tự động
- Hiện tại, do công cụ kiểm tra tự động không thể xác minh hoàn toàn, việc kiểm tra thủ công được khuyến nghị.
Tóm tắt
Hướng dẫn WCAG 2.2 ‘2.2.4 Kiểm soát gián đoạn’ yêu cầu đảm bảo rằng gián đoạn không làm cản trở trải nghiệm người dùng.
Điểm cần chú ý khi triển khai
- Cung cấp cơ chế để hoãn hoặc hạn chế gián đoạn
- Thông báo khẩn cấp phải được phân biệt rõ ràng và chỉ hiển thị khi cần thiết
- Áp dụng thiết kế tôn trọng thao tác của người dùng
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.