Hướng dẫn WCAG 2.2 ‘2.2.5 Xác thực lại’ Cấp AAA
Mở đầu
Hướng dẫn WCAG 2.2 ‘2.2.5 Xác thực lại’ yêu cầu rằng khi phiên xác thực hết hạn, người dùng có thể tiếp tục thao tác mà không bị mất dữ liệu sau khi xác thực lại. Tiêu chuẩn này nhằm mục đích ngăn ngừa việc người dùng mất dữ liệu hoặc công việc đang tiến hành do hết phiên làm việc, và cung cấp trải nghiệm thao tác không căng thẳng.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Khi phiên xác thực hết hạn, dữ liệu sẽ được khôi phục và người dùng có thể tiếp tục công việc sau khi xác thực lại.
- Cung cấp cơ chế lưu trữ tạm thời dữ liệu để tránh mất công việc đang thực hiện.
2. Phương pháp triển khai
a. Lưu trữ và khôi phục dữ liệu
Ví dụ về việc khôi phục dữ liệu sau khi xác thực lại
HTML
<form id="dataForm">
<label for="inputData">Nội dung đã nhập:</label>
<input type="text" id="inputData" name="inputData" value="">
<button type="submit">Gửi</button>
</form>
<div id="authMessage" style="display: none;">
Phiên làm việc đã hết hạn. Vui lòng xác thực lại
<button id="reauthenticate">Xác thực lại</button>
</div>
JavaScript
let sessionActive = true; // Mô phỏng trạng thái phiên làm việc
let savedData = ''; // Dữ liệu đã lưu
document.getElementById('dataForm').addEventListener('submit', (event) => {
event.preventDefault();
if (!sessionActive) {
savedData = document.getElementById('inputData').value;
document.getElementById('authMessage').style.display = 'block';
} else {
alert('Dữ liệu đã được gửi: ' + document.getElementById('inputData').value);
}
});
document.getElementById('reauthenticate').addEventListener('click', () => {
sessionActive = true; // Mô phỏng xác thực lại
document.getElementById('authMessage').style.display = 'none';
document.getElementById('inputData').value = savedData;
alert('Xác thực lại đã hoàn tất. Vui lòng tiếp tục công việc');
});
b. Lưu dữ liệu trên trang xác thực lại
Lưu dữ liệu dưới dạng trường ẩn
HTML
<form id="reauthPage">
<input type="hidden" id="savedData" name="savedData" value="">
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password">
<button type="submit">Xác thực lại</button>
</form>
JavaScript
const savedData = 'Dữ liệu nhập vào đây sẽ được lưu';
document.getElementById('savedData').value = savedData;
document.getElementById('reauthPage').addEventListener('submit', (event) => {
event.preventDefault();
const recoveredData = document.getElementById('savedData').value;
alert('Xác thực lại đã hoàn tất. Dữ liệu đã được khôi phục: ' + recoveredData);
});
c. Lưu dữ liệu vào phiên làm việc trên phía máy chủ
Ví dụ phía máy chủ (mã giả)
-
Lưu dữ liệu ngay trước khi phiên làm việc hết hạn:
sessionStorage.setItem('userData', userData); -
Khôi phục dữ liệu sau khi xác thực lại:
const recoveredData = sessionStorage.getItem('userData');
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Dữ liệu bị mất do phiên làm việc hết hạn
Ví dụ thất bại
- Nội dung người dùng đã nhập bị mất hoàn toàn do phiên làm việc hết hạn
Ví dụ cải thiện
- Sử dụng bộ lưu trữ cục bộ hoặc bộ lưu trữ phiên để lưu dữ liệu
b. Không thể khôi phục dữ liệu sau khi xác thực lại
Ví dụ thất bại
- Sau khi xác thực lại, biểu mẫu bị đặt lại và dữ liệu không được khôi phục
Ví dụ cải thiện
- Sử dụng trường ẩn và quản lý dữ liệu phiên làm việc trên phía máy chủ
4. Lợi ích của khả năng tiếp cận
a. Cải thiện trải nghiệm người dùng
- Không lo mất dữ liệu đang làm việc, người dùng có thể thao tác một cách an tâm
b. Giảm căng thẳng
- Giảm căng thẳng do phiên làm việc hết hạn và giúp người dùng tiếp tục công việc một cách mượt mà sau khi xác thực lại.
c. Gia tăng hiệu quả công việc
- Việc khôi phục dữ liệu giúp người dùng không cần nhập lại hoặc làm lại công việc
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Mô phỏng tình huống khi phiên làm việc hết hạn
- Kiểm tra xem dữ liệu có được khôi phục đúng sau khi xác thực lại không
- Kiểm tra xem quá trình xác thực lại có diễn ra một cách suôn sẻ không
b. Công cụ kiểm tra tự động
- Sử dụng công cụ kiểm tra hỗ trợ quản lý phiên làm việc để xác nhận chức năng khôi phục dữ liệu
Tóm tắt
Hướng dẫn WCAG 2.2 ‘2.2.5 Xác thực lại’ nhằm đảm bảo rằng ngay cả khi phiên làm việc hết hạn, người dùng vẫn có thể tiếp tục công việc mà không bị mất dữ liệu.
Điểm cần chú ý khi triển khai
- Cung cấp chức năng lưu dữ liệu và khôi phục sau khi xác thực lại.
- Sử dụng trường ẩn hoặc bộ lưu trữ phiên làm việc để quản lý dữ liệu.
- Thiết kế quy trình để người dùng có thể hoàn thành xác thực lại mà không gặp căng thẳ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.