Chỉ dẫn WCAG 2.2 ‘2.2.6 Thời gian chờ’ Cấp AAA
Mở đầu
WCAG 2.2 ‘2.2.6 Thời gian chờ’ yêu cầu cung cấp cảnh báo thích hợp khi có khả năng mất dữ liệu nếu người dùng không thực hiện thao tác trong một khoảng thời gian nhất định. Tiêu chuẩn này nhằm ngăn ngừa việc người dùng vô tình mất dữ liệu và tạo ra một môi trường để họ có thể tiếp tục công việc một cách an tâm.
1. Tổng quan về tiêu chuẩn
Yêu cầu
Cần phải đáp ứng một trong các yêu cầu sau:
- Trường hợp phiên làm việc được duy trì trong hơn 20 giờ:
- Không cần cung cấp cảnh báo bổ sung.
- Trường hợp thời gian chờ xảy ra trong ít hơn 20 giờ:
- Cung cấp cơ chế cảnh báo cho người dùng về khả năng mất dữ liệu.
2. Phương pháp triển khai
a. Thông báo thời gian chờ
Thông báo cho người dùng về thời gian chờ phiên làm việc
HTML
<p id="timeoutWarning"></p>
<button id="extendSession">Kéo dài phiên làm việc</button>
JavaScript
let sessionDuration = 600000; // 10 phút (600,000 mili giây)
let timeoutWarningDuration = 300000; // 5 phút trước khi hết thời gian chờ (300,000 mili giây)
let timeout;
function startSession() {
timeout = setTimeout(showTimeoutWarning, sessionDuration - timeoutWarningDuration);
}
function showTimeoutWarning() {
const warningMessage = document.getElementById('timeoutWarning');
warningMessage.textContent = 'Phiên làm việc sắp hết thời gian. Bạn có muốn kéo dài không?';
document.getElementById('extendSession').style.display = 'inline-block';
}
document.getElementById('extendSession').addEventListener('click', () => {
clearTimeout(timeout);
startSession();
document.getElementById('timeoutWarning').textContent = '';
alert('Phiên làm việc đã được kéo dài!');
});
// Bắt đầu phiên làm việc
startSession();
b. Giữ dữ liệu trong thời gian dài
Lưu dữ liệu phiên làm việc trên máy chủ
Bằng cách lưu trữ dữ liệu của người dùng trong hơn 20 giờ, ngăn ngừa việc mất dữ liệu khi hết thời gian chờ.
Mã giả (phía máy chủ)
// Lưu dữ liệu phiên làm việc trên máy chủ
app.post('/saveData', (req, res) => {
const userData = req.body.data;
// Lưu dữ liệu vào phiên làm việc (thời gian hiệu lực 20 giờ)
req.session.userData = userData;
req.session.cookie.maxAge = 20 * 60 * 60 * 1000; // 20 giờ
res.send('Dữ liệu đã được lưu');
});
c. Cung cấp cảnh báo trước khi hết thời gian chờ
Thông báo khi bắt đầu quá trình đang diễn ra
Khi người dùng bắt đầu quá trình, rõ ràng hiển thị thời gian chờ.
HTML
<div>
<p>Phiên làm việc này sẽ hoạt động trong 10 phút. Vui lòng hoàn thành thao tác trong thời gian này.</p>
</div>
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Không có cảnh báo về thời gian chờ
Ví dụ thất bại
- Thời gian chờ hết hạn khi người dùng không thực hiện thao tác, dẫn đến mất dữ liệu.
Ví dụ cải thiện
- Cung cấp cảnh báo thích hợp trước khi hết thời gian chờ và cung cấp tùy chọn kéo dài thời gian.
b. Thời gian lưu trữ dữ liệu không đủ
Ví dụ thất bại
- Dữ liệu phiên làm việc hết hạn sau vài phút, và người dùng mất dữ liệu sau khi đăng nhập lại.
Ví dụ cải thiện
- Giữ dữ liệu phiên làm việc ít nhất 20 giờ, hoặc lưu trữ dữ liệu trên máy chủ hoặc bộ nhớ cục bộ.
4. Lợi ích của khả năng tiếp cận
a. Tăng cường sự an tâm của người dùng
- Ngăn ngừa mất dữ liệu không mong muốn do thời gian chờ hết hạn.
b. Nâng cao hiệu quả công việc
- Vì người dùng có thể tiếp tục thao tác một cách an tâm, công việc sẽ được tiến hành một cách suôn sẻ.
c. Quan tâm đến tất cả người dùng
- Người dùng có khuyết tật nhận thức hoặc hạn chế về tốc độ thao tác cũng sẽ được đảm bảo đủ thời gian để hoàn thành thao tác.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Mô phỏng tình huống xảy ra thời gian chờ hết hạn.
- Xác nhận rằng cảnh báo sẽ được hiển thị trước khi hết thời gian chờ.
- Xác nhận rằng dữ liệu không bị mất sau khi hết thời gian chờ.
b. Công cụ kiểm tra tự động
- Kiểm tra các cảnh báo liên quan đến thời gian chờ và chức năng lưu trữ dữ liệu bằng các công cụ truy cập như Axe và WAVE.
Tóm tắt
WCAG 2.2 ‘2.2.6 Thời gian chờ’ cung cấp các tiêu chuẩn để ngăn ngừa mất dữ liệu do hết thời gian phiên làm việc của người dùng.
Điểm cần chú ý khi triển khai
- Hiển thị cảnh báo cho người dùng trước khi hết thời gian chờ
- Giữ dữ liệu trong hơn 20 giờ hoặc đảm bảo có thể khôi phục dữ liệu sau khi hết thời gian chờ
- Thông báo thời gian chờ khi bắt đầu quá trình
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.