Hướng dẫn WCAG 2.2 ‘2.2.1 Điều chỉnh giới hạn thời gian’ Mức độ A
Mở đầu
Tiêu chí “2.2.1 Điều chỉnh giới hạn thời gian” trong WCAG 2.2 yêu cầu đảm bảo rằng giới hạn thời gian được thiết lập trong nội dung không cản trở thao tác của người dùng. Đặc biệt, trong trường hợp có giới hạn thời gian, người dùng cần có khả năng điều chỉnh giới hạn thời gian bằng một trong các phương pháp sau:
- Có thể kéo dài giới hạn thời gian
- Có thể tắt giới hạn thời gian
- Có thể thiết lập giới hạn thời gian dài hơn
1. Phạm vi áp dụng và yêu cầu của tiêu chí
Tình huống và yêu cầu về giới hạn thời gian
-
Hết thời gian phiên làm việc" hoặc "Thời gian chờ phiên làm việc.
- Người dùng có thể yêu cầu gia hạn thời gian chờ.
-
Giới hạn thời gian do kịch bản (script) thiết lập.
- Người dùng có thể điều chỉnh hoặc vô hiệu hóa giới hạn thời gian.
-
Giới hạn thời gian đọc.
- Cung cấp chức năng tạm dừng và tiếp tục nội dung.
2. Phương pháp triển khai
a. Điều chỉnh thời gian chờ phiên làm việc
Cung cấp tùy chọn gia hạn bằng hộp kiểm
HTML
<form>
<label>
<input type="checkbox" id="extendSession"> Gia hạn thời gian chờ phiên làm việc
</label>
<button type="submit">Gửi</button>
</form>
JavaScript
const extendSessionCheckbox = document.getElementById('extendSession');
extendSessionCheckbox.addEventListener('change', () => {
if (extendSessionCheckbox.checked) {
alert('Thời gian chờ phiên làm việc sẽ được gia hạn');
// Thêm mã gửi yêu cầu gia hạn đến máy chủ
}
});
b. Cho phép người dùng điều chỉnh giới hạn thời gian
Thông báo hết thời gian và chức năng gia hạn
HTML
<div id="timerAlert" role="alert" style="display: none;">
Phiên làm việc sắp kết thúc. Bạn có muốn gia hạn không?
<button id="extendTime">Gia hạn</button>
</div>
JavaScript
let timeout = setTimeout(showAlert, 5000); // Hiển thị cảnh báo sau 5 giây
function showAlert() {
const alertBox = document.getElementById('timerAlert');
alertBox.style.display = 'block';
}
document.getElementById('extendTime').addEventListener('click', () => {
clearTimeout(timeout); // Đặt lại bộ đếm thời gian
timeout = setTimeout(showAlert, 5000); // Đặt lại
alert('Phiên làm việc đã được gia hạn');
});
c. Tạm dừng và tiếp tục nội dung
Chức năng tạm dừng nội dung động
HTML
<div id="scrollingText">
Văn bản cuộn tự động sẽ được hiển thị ở đâ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.scrollTop += 1;
}, 100);
}
function pauseScrolling() {
clearInterval(scrollInterval);
}
document.getElementById('pauseButton').addEventListener('click', pauseScrolling);
document.getElementById('resumeButton').addEventListener('click', startScrolling);
startScrolling(); // Bắt đầu cuộn tự động
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Chuyển hướng qua meta refresh
Ví dụ thất bại
<meta http-equiv="refresh" content="5;url=https://example.com">
Vấn đề
- Người dùng không có phương tiện để kiểm soát thời gian chờ hoặc chuyển hướng
Ví dụ cải thiện
- Sử dụng JavaScript để cung cấp thông báo và lựa chọn trước khi chuyển hướng
b. Chuyển hướng cưỡng chế từ phía máy chủ
Vấn đề
- Trang sẽ được chuyển hướng sau khi hết thời gian chờ mà người dùng không nhận được cảnh báo
Ví dụ cải thiện
- Thông báo cho người dùng về thời gian chờ của máy chủ và cung cấp tùy chọn gia hạn
4. Lợi ích của khả năng tiếp cận
a. Nội dung có thể thao tác bởi bất kỳ ai
- Người dùng có đủ thời gian để thao tác với nội dung
b. Giảm căng thẳng
- Giảm căng thẳng do hết thời gian chờ và cải thiện trải nghiệm người dùng
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận xem giới hạn thời gian có được thông báo hay không.
- Xác nhận xem có thể gia hạn hoặc tắt giới hạn thời gian hay không.
- Xác nhận xem nội dung động có thể tạm dừng và tiếp tục hay không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra thông báo và chức năng điều chỉnh giới hạn thời gian.
Tóm tắt
Tiêu chí ‘2.2.1 Điều chỉnh giới hạn thời gian’ trong WCAG 2.2 yêu cầu cung cấp cơ chế để tất cả người dùng có thể quản lý giới hạn thời gian.
Điểm cần chú ý khi triển khai
- Cung cấp tùy chọn gia hạn cho thời gian chờ phiên làm việc.
- Thông báo giới hạn thời gian bằng kịch bản và cho phép gia hạn hoặc vô hiệu hóa.
- Hỗ trợ tạm dừng và tiếp tục nội dung độ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.