Hướng dẫn WCAG 2.2 ‘2.5.2 Hủy bỏ con trỏ’ Mức độ A
Mở đầu
Hướng dẫn WCAG 2.2 ‘2.5.2 Hủy bỏ con trỏ’ yêu cầu cung cấp ít nhất một phương pháp hủy bỏ phù hợp để ngăn chặn việc thao tác bị thực hiện sai khi sử dụng con trỏ (ví dụ: nhấp chuột hoặc thao tác chạm). Tiêu chuẩn này nhằm giảm thiểu nguy cơ thao tác sai và cung cấp một môi trường cho phép người dùng thực hiện thao tác một cách an toàn.
1. Khái quát tiêu chí
Yêu cầu
Đối với các thao tác sử dụng con trỏ, cần phải đáp ứng một trong các yêu cầu sau:
- Kích hoạt hành động trong sự kiện thả (up event)
（Ví dụ: khi thả nút chuột hoặc khi rút ngón tay khỏi màn hình cảm ứng） - Có thể hủy bỏ
（Ví dụ: có thể hủy bỏ thao tác kéo (drag) giữa chừng） - Thực hiện sau khi xác nhận thao tác
（Ví dụ: hiển thị màn hình xác nhận trước khi thực hiện thao tác）
2. Phương pháp triển khai
a. Kích hoạt hành động trong sự kiện thả (up event)
Thao tác con trỏ sẽ bắt đầu hành động trong sự kiện thả (khi bỏ tay ra) thay vì sự kiện nhấn (khi nhấp chuột hoặc chạm vào màn hình).
Ví dụ: Sử dụng sự kiện thả (up event)
HTML
<button id="submitButton">Gửi</button>
JavaScript
document.getElementById('submitButton').addEventListener('mouseup', () => {
console.log('Nút gửi đã được nhấp');
});
b. Cung cấp chức năng hủy bỏ kéo và thả
Cung cấp chức năng hủy bỏ trong khi thực hiện thao tác kéo
Ví dụ: Hủy bỏ thao tác kéo
HTML
<div id="dragArea" draggable="true">Yếu tố có thể kéo</div>
<button id="cancelButton">Hủy bỏ</button>
JavaScript
const dragArea = document.getElementById('dragArea');
const cancelButton = document.getElementById('cancelButton');
let isDragging = false;
dragArea.addEventListener('dragstart', () => {
isDragging = true;
console.log('Bắt đầu kéo');
});
cancelButton.addEventListener('click', () => {
if (isDragging) {
isDragging = false;
console.log('Hủy bỏ kéo');
}
});
c. Hiển thị hộp thoại xác nhận thao tác
Đối với các thao tác quan trọng, hiển thị màn hình xác nhận để ngăn ngừa thao tác sai.
Ví dụ: Thêm hộp thoại xác nhận
HTML
<button id="deleteButton">Xóa</button>
JavaScript
document.getElementById('deleteButton').addEventListener('click', () => {
const confirmed = confirm('Bạn có chắc chắn muốn xóa không?');
if (confirmed) {
console.log('Đã xóa');
} else {
console.log('Đã hủy bỏ việc xóa');
}
});
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Kích hoạt hành động trong sự kiện nhấn (down event)
Ví dụ thất bại
button.addEventListener('mousedown', () => {
console.log('Đã được nhấp');
});
Vấn đề
- Ngay cả khi người dùng nhấn nhầm, hành động vẫn được thực hiện.
Biện pháp cải thiện
- Sử dụng sự kiện mouseup hoặc click.
b. Không có phương án hủy bỏ
Ví dụ thất bại
- Không có phương án hủy bỏ thao tác đã bắt đầu trong quá trình kéo.
Biện pháp cải thiện
- Cung cấp khả năng hủy bỏ thao tác bằng cách sử dụng nút hủy hoặc phím Esc.
4. Lợi ích của khả năng truy cập (accessibility)
a. Ngăn ngừa thao tác sai
- Bằng cách tránh thực hiện thao tác trong sự kiện nhấn (down event), giảm thiểu rủi ro thao tác bị thực hiện nhầm.
b. Cải thiện trải nghiệm người dùng
- Bằng cách thêm màn hình xác nhận và chức năng hủy bỏ, mang lại sự yên tâm cho thao tác.
c. Cải thiện tính bao gồm
- Đối với người dùng thiết bị màn hình cảm ứng hoặc người khuyết tật, thiết kế sẽ trở nên dễ sử dụng hơn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem thao tác con trỏ có kích hoạt hành động trong sự kiện thả (up event) hay không.
- Kiểm tra xem thao tác kéo có chức năng hủy bỏ hay không.
b. Kiểm tra với trình đọc màn hình
- Sử dụng trình đọc màn hình để kiểm tra tính khả dụng của thao tác con trỏ.
c. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra tính phù hợp của thao tác con trỏ.
Tóm tắt
Tiêu chuẩn ‘2.5.2 Hủy bỏ con trỏ’ trong WCAG 2.2 nhằm mục đích cung cấp sự kiện thả (up event) và chức năng hủy bỏ để ngăn ngừa thao tác sai khi sử dụng con trỏ.
Điểm cần lưu ý khi triển khai
- Kích hoạt thao tác trong sự kiện thả (up event).
- Cung cấp chức năng hủy bỏ.
- Thêm màn hình xác nhận cho các thao tác quan trọng.
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập 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.